Skip to content
Log inStart free

Color palette generator

Five colors that work together, in one press

Start from a color you already use or let the generator pick one. Lock what you like, press the space bar for the rest, and see every swatch checked for readable text.

Free, no sign-up. Palettes are made and saved in this browser; nothing is sent anywhere.

Your palette

Harmony
  1. White
    1.31:1 Fails
    Black
    15.91:1 AAA
  2. White
    2.06:1 Fails
    Black
    10.16:1 AAA
  3. Editing
    White
    4.63:1 AA
    Black
    4.53:1 AA
  4. White
    6.00:1 AA
    Black
    3.49:1 AA large
  5. White
    13.56:1 AAA
    Black
    1.54:1 Fails

Adjust swatch 3

  • HEX#2A7F8F
  • RGBrgb(42 127 143)
  • OKLCHoklch(55.3% 0.082 212.7)

Saved in this browser

This palette, once saved: Analogous#C4E8DB #8FBDBB #2A7F8F #356982 #232F3E

Press Save palette to keep it here. Saved palettes stay on this device, up to 12.

On a storefront

Example store

Store theme roles

The lightest swatch becomes the page, the next the cards, the darkest the text, and the most colorful the buy button. Each pair is checked as the store would show it.

  • Text on the pageBody text needs 4.5:110.28:1AAA
  • Text on cardsBody text needs 4.5:16.56:1AA
  • Label on the buy buttonButton labels need 4.5:14.63:1AA
  • Sale tag on the pageShapes and large text need 3:14.55:1Passes

How it works

Four ways to build a palette around one color

Every palette is worked out in OKLCH, a color space where equal steps look equal to the eye. Each wheel below is drawn by the same code as the generator, from the same base color.

Analogous

Neighbors on the wheel, within 40 degrees of the base. Calm and easy to live with, good for a store that should feel quiet.

Complementary

The base and the hue opposite it. The strongest contrast between two colors, so keep the opposite for one job, such as the buy button.

Triadic

Three hues 120 degrees apart. Lively and balanced when one hue leads and the other two stay as small accents.

Monochrome

One hue in five steps of lightness. The safest choice for readable text, because every swatch differs mainly in lightness.

Contrast checks

Readable text, measured the way the guidelines measure it

Each badge compares relative luminance with the WCAG 2.2 formula. The ratio is never rounded up, so 4.49:1 shows as a fail for body text.

Add to cart
5.70:1AA body

AA for body text: 4.5:1

The level most accessibility laws and store audits ask for. Product descriptions, prices and buttons should meet it.

Autumn edit
3.21:1AA large

AA for large text: 3:1

Text from 24 px, or 18.66 px bold, may go down to 3:1. The sample here is drawn at 24 px, so its badge is true for its size.

Free returns
10.43:1AAA body

AAA for body text: 7:1

The enhanced level, for long reading and for older screens in bright light. Dark text on a pale swatch usually reaches it.

Search
3.58:1Passes 3:1

Shapes and icons: 3:1

Borders of fields, icons and focus rings need 3:1 against what is next to them, so a pale outline on white does not count.

On Tanqory

From a palette to a store that sells

A palette is the first hour of a brand. Tanqory takes the next ones off your team: a free theme to put it on, and AI that does the setup you would otherwise hire for.

  1. 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

  2. Use my new palette across the theme

    Theme colors updated

    • Page #C0E6EE
    • Cards #C6A8C0
    • Text #382835
    • Buttons #2A7F8F
    • Sale tags #2A6D78

    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

  3. A knitter at her worktable holding blue yarn, with shelves of yarn cones in many colors behind her
    • Theme
    • Pages
    • Products

    A store from one description

    Describe what you sell and get a store ready to sell: brand, theme, pages and products. Days of setup become an afternoon of review. See the AI store builder

  4. 0%

    Tanqory transaction fee

    Your provider's own rate, not marked up

    No transaction fee on any plan

    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

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

Bill of lading

Fill in a bill of lading for a freight shipment and download it as a PDF, in your browser.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 color palettes

Still have a question?

The help center covers themes, colors and Studio step by step.

Visit the help center
How does the palette generator choose colors?

It converts the base color to OKLCH (lightness, chroma, hue), places the other four swatches by the harmony you pick, and spreads them from light to dark so every palette has a background, a text color and steps between. Colors that the screen cannot show are brought into range by lowering chroma while keeping lightness and hue.

What do AA and AAA mean on each swatch?

They are the WCAG 2.2 contrast levels for text. AA needs 4.5:1 for body text and 3:1 for large text; AAA needs 7:1 for body text. Each swatch shows the ratio of white and of black text on it, and the store preview checks the pairs a storefront actually uses.

Why OKLCH instead of HSL?

In HSL, yellow and blue at the same lightness look very different in brightness, so a palette built on HSL steps looks uneven. OKLCH is built so that the same lightness looks equally light across hues, which gives smoother ladders and more predictable contrast.

Can I make a palette from a photo?

Yes. Choose From a photo and pick an image. The tool reads it in your browser, groups its pixels into the five main colors and orders them by how much of the photo each covers. The photo is never uploaded.

How do I lock a color?

Press the lock on a swatch. Locked swatches stay where they are when you generate again, and the first locked swatch becomes the base the others are built around.

How do I use the palette in my store or code?

Copy the CSS variables or download the CSS file: it lists each swatch and the store roles (page, cards, text, button, button label, accent). On Tanqory you can describe the change in Studio and AI applies it to your theme.

Where are my palettes saved?

In this browser's local storage, on this device only. Nothing is sent to Tanqory. The share link carries the palette in the address itself, so anyone you send it to sees the same colors.

Is the palette generator free?

Yes, with no sign-up and no limit on palettes. Exports are yours to use in any project.

Still have a question?

The help center covers themes, colors and Studio step by step.

Visit the help center

Your colors on a store that is ready to sell

Describe what you sell and Tanqory drafts the store, on a free theme you can recolor by asking. Keep your own payment provider with a 0% transaction fee.

Start for freeSee themes

We use cookies

Necessary cookies keep the site working. With your permission we also use analytics and marketing cookies. Change your choice any time in Cookie settings.