Palette visualizer
See your colors on a real store before you commit
Paste the hex codes you have. Each color gets a job on a working storefront, and every pair the store shows is checked for readable contrast.
Free, no sign-up. Codes can come from anywhere: a brand guide, a CSS file, a message. Nothing leaves this browser.
No palette yet? Open the palette generator
Your palette on a storeSee it on a working store
Autumn table
Stoneware for every day
Contrast on this store
- Text on the pageBody text needs 4.5:114.48:1AAA
- Text on cardsBody text needs 4.5:112.88:1AAA
- Label on the primary buttonButton labels need 4.5:16.24:1AA
- Primary button on the pageShapes need 3:15.69:1Passes
- Sale tag label on the accentTag labels need 4.5:14.93:1AA
Every pair on this store passes.
Five roles
- TextHeadings, body copy, prices
- BackgroundThe page behind everything
- PrimaryBuy buttons, banners, the active tab
- SecondaryCards, the search field, panels
- AccentSale tags, offers, small highlights
How the roles work
Two neutrals and three colors
A palette is easy to love as a row of swatches and hard to use. Giving each color one job is what makes a store look calm and keeps the buy button the loudest thing on the page.
Text and background
Start with two near neutrals. Most of the page is these two, so they need 4.5:1 or more for body text.
Primary
One strong color for the action you want: add to cart, check out, sign up. Use it sparingly so it always stands out.
Secondary
A quiet step off the background for cards, fields and panels. Text must still read on it, so it is checked too.
Accent
A small dose of a second hue for sale tags, offers and highlights. The tag label sits on it in the page color, so that pair needs 4.5:1.
Example palettes
Four stores, four palettes
Each example passes every contrast check. Open one in the visualizer above and make it yours.
Baked today
Sourdough by morning
Bakery
Crust brown and a burnt orange button, with honey for the tags, on a cool off white page. Calm neutrals keep long menus easy to read.Open this palette
Trail season
Pack light, go far
Outdoor gear
A dark store with a signal orange primary that reads like trail markers.Open this palette
New serum
Gentle every day
Skincare
Soft plum and blush on near white. Calm, with enough contrast for ingredient lists.Open this palette
Fresh pressings
New on vinyl
Record shop
Cobalt and a signal red accent on cool grey, for a catalog with many small labels.Open this palette
On Tanqory
From a palette to a store that sells
Choosing colors is the first hour of a brand. Tanqory takes the next ones off your team: a free theme to put the palette on, and AI that does the setup you would otherwise hire for.
New serum
Daily calm serum
$38Sale
Size: 30 ml
Ships in 2 days
Every theme is free
Put your palette on any Tanqory theme at no cost. Themes are built in React and TypeScript and stay fully editable in the visual editor, so a color change never needs a developer. See themes
Use these five colors across my theme
Theme colors updated
- #1B2421
- #F2F5F3
- #2F6B57
- #E4E9DF
- #B04A33
AI credits included in every plan
Change the theme by asking
Describe the change in Studio and AI edits the theme for you, or generates a whole new one. Theme generation uses the AI credits included in every plan. See Tanqory AI
0%
Tanqory transaction fee
Your provider's own rate, not marked up
A 0% transaction fee
Connect your own Stripe, PayPal or Braintree account and pay a 0% Tanqory transaction fee on every plan. You pay your provider's own rate, never marked up. See payments
More free tools
Other tools for running the business
Free tools for the jobs around the palette: the colors themselves, labels for the products, and a check that AI shopping agents can read the store.
#101418 #F2F5F7 #1F4FD1 #DCE4EE #B3261EColor palette generator
Make a five color palette from a color or a photo, lock what you like and check contrast.Try it free
Barcode generator
Make EAN-13, UPC-A, Code 128 and QR codes with the check digit worked out, as SVG or PNG.Try it free
AI readiness checker
See whether AI shopping agents and search engines can read your store, with each fix named.Try it free
Questions about palette visualizers
The help center covers themes, colors and Studio step by step.
Visit the help centerWhat does a palette visualizer do?
It puts your colors on a real design instead of a row of swatches. Here each color gets a role on a store, so you can see whether the buy button stands out, whether text reads on cards and how the palette looks in an email, on a phone and in a social post.
How many colors do I need?
Two to five. With five, the lightest becomes the background, the darkest the text and the most colorful the primary. With fewer, the missing roles are worked out from the ones you gave, and you can change any of them.
How is contrast checked?
With the WCAG 2.2 contrast ratio, the same formula browsers and audit tools use. Body text on the page and on cards needs 4.5:1, the label on the primary button and the sale tag label 4.5:1, and the button against the page 3:1. Ratios are cut, not rounded, so a fail never reads as a pass.
What does Fix contrast change?
Only the lightness of the text, primary and accent colors, one small step at a time, until every pair passes. Hue stays the same and saturation stays as close as the color space allows, so the palette keeps its character.
How is the dark version made?
The page and cards go deep in the hue of your primary, the text goes light, and the primary and accent keep their hue and are moved until every pair passes on the dark page. Switch back to Light to return to your own colors.
Can I use a palette from the color palette generator?
Yes. Copy a share link in the generator and open it here, or use Edit in the palette generator to go the other way. Both tools use the same color math, so the numbers match.
How do I use the colors in my store?
Copy the CSS variables or download the JSON tokens and paste them into your theme settings or code. On Tanqory you can also ask AI in Studio to apply the five colors across your theme.
Is anything uploaded or saved?
No. The tool runs in your browser. The palette lives in the address of the page, so a share link opens the same colors, and nothing is sent to a server.
The help center covers themes, colors and Studio step by step.
Visit the help centerYour colors on a store that is ready to sell
Open a store, paste the colors you checked here and launch knowing every pair already passes. The palette link keeps the exact codes for whoever builds with you.
Fresh pressings
New on vinyl