Color Palette Generator

What does this palette generator do?

It builds a harmonious colour scheme from one colour, and then answers the questions that usually send you to three other tools.

• Contrast checked in place. Every pair in the palette is scored against the WCAG ratios and sorted strongest first, so you know which combinations are safe for text before you commit.
• Colour blindness preview. See the palette as someone with protanopia, deuteranopia or tritanopia sees it, without leaving the page.
• Your base hue is respected. Set your brand colour and it stays put while everything else rerolls around it.
• Export as code. Hex, CSS custom properties, a Tailwind colour object, SCSS variables or JSON.
• A shareable link. The palette lives in the address itself, so you can send it to a client and nothing is stored on a server.

Press space to roll a new palette, lock the colours you love, and copy whatever you need. Everything runs in your browser.

How do I use it?

Set a base colour with the picker. The moment you do, "keep my base hue" turns itself on, because choosing a colour by hand is a clear signal that it matters.

Choose a harmony to set the mood: complementary, analogous, triad, tetrad or monochromatic.

Generate. Click the button or press the space bar. Locked swatches stay, the rest reroll.

Check it. Open the contrast panel, and switch the view through the colour blindness options.

Export or share. Copy a single hex, the whole palette as code, or a link that reopens it.

How do I check a palette is accessible?

Open the contrast check and read the ratios.

It scores all ten pairs in the palette and tells you how many reach the WCAG AA minimum. The numbers you need are short enough to memorise:

A palette can be beautiful and fail every one of these. An analogous scheme in particular, because it keeps all five colours close together on the colour wheel, often produces zero usable text pairs, and you would never know by looking.

Most palette generators send you to a separate contrast tool for this. Doing it here is deliberate: the moment to learn that your two favourite colours cannot hold text is while you are still choosing them, not after the design is built.

Why simulate colour blindness?

Because roughly one in twelve men and one in two hundred women sees colour differently, and a palette that carries meaning through hue alone stops working for them.

Switch the view and the swatches redraw as a dichromat perceives them. Your real hex codes stay visible underneath, unchanged. The failure this catches is specific and common: five colours that look clearly distinct to you collapsing into two or three, which breaks any chart, status badge or map that relies on colour to tell things apart.

The three options cover the three types: protanopia (reduced red), deuteranopia (reduced green, the most common) and tritanopia (reduced blue). This is a mathematical approximation of dichromatic vision using the Brettel and Viénot method, not a medical simulation, and it cannot tell you how any individual person actually experiences colour. Treat it as a design check, which is exactly what it is good for.

How does the colour maths work?

Colours are handled in HSL, where hue is an angle on the colour wheel. A harmony is just a set of rotations from your base: 180 degrees for complementary, small steps for analogous, 120 for a triad, 90 for a tetrad. Monochromatic holds the hue and shifts the lightness instead.

Contrast is a separate calculation and a stricter one. It converts each colour to relative luminance, which weights green far more heavily than blue because human eyes do, then compares the two. This is why a bright yellow and a white can look very different and still fail as a text pair.

That same maths decides the colour of the hex label on each swatch, which is a small detail that most tools get wrong by using a simple brightness average instead.

What this tool does not do

• It does not extract colours from an image. That is a different job needing a different interface.
• It does not save or browse palettes. There is no account and no library. Use the share link or export the code.
• It does not generate a full design system. You get five coordinated colours, not a 50 to 900 tint scale with semantic naming.
• It does not guarantee accessibility. It measures contrast between the colours you chose. Real accessibility also depends on font size, weight, what sits behind translucent layers, and not relying on colour alone to convey meaning.
• It is not a medical colour vision tool. The colour blindness views are design approximations, not diagnostics.

Is my data private?

Yes. The generator is fully client-side. Your base colour and the palettes it produces are never uploaded, logged, or stored, and they clear when you close the tab. Even the share link holds the colours in the address itself rather than on a server. It keeps working offline once the page has loaded.