Color Palette Generator
Build a palette from one colour — complementary, triadic, analogous — plus the 50–900 scale a design system needs.
Processed on your device — no upload
Triadic
Tint and shade scale
Every step of the scale is measured against white and black so you can see immediately which end of the ramp is safe for text. Steps 800 and darker clear 4.5:1 on white.
How to use it
- Pick your base colour.
- Choose a scheme.
- Copy the CSS variables.
How it works
The schemes are rotations around the hue wheel, holding saturation and lightness constant. Complementary is 180° away, triadic is three colours 120° apart, analogous takes the immediate neighbours at ±30°. They are simple arithmetic — the value is in seeing the result rather than in the formula.
The tint and shade scale is the part you will actually ship. Ten steps from 50 to 900, holding the hue and saturation and walking lightness from 96% down to 18%. It is the convention Tailwind made standard, and it is what lets you write --brand-700 for a border and --brand-50 for a hover background and have them belong to each other.
Contrast is checked as the scale is built. The note under the ramp tells you which step is the lightest one that still clears 4.5:1 on white. That single fact decides where your body text colour can come from, and finding it by trial and error is how an inaccessible palette gets adopted before anyone notices.
The colour vision preview is a simulation, not a lens. The matrices are the standard approximations used across accessibility tooling. No matrix reproduces an individual's vision — but they are more than accurate enough to catch a palette where the success and error states are only distinguishable by hue.
A worked example
A working run. Start from a brand green, #4d7c0f. The triadic scheme gives you a blue and a magenta at equal spacing — usable as chart series precisely because they are equally distant from each other and from the base. The ramp gives you ten greens, and the note tells you 600 is where text on white becomes safe.
Now switch the preview to deuteranopia. This is the common one — around one man in sixteen. If your green and your red collapse into the same muddy tone, you have just learned that a status indicator built from those two colours communicates nothing to that reader. The fix is never a different green; it is adding a second signal, a tick and a cross, a solid and a dashed line, a word.
Why analogous schemes look expensive and triadic ones look loud. Neighbouring hues share light, so they read as one considered palette. Evenly spaced hues each demand equal attention, which is right for data and wrong for a page. The scheme picker is worth stepping through with the same base colour just to see this.
Copy the CSS and you have a starting design system. The output block is custom properties, ready to paste into a :root rule — the ramp as --brand-50 through --brand-900, and the harmony colours as accents.
Check any specific pairing in the contrast checker, or convert a single value with the colour converter.
Questions
Does it produce shades and tints?
Yes, ten steps from 50 to 900. The light end gives tints for backgrounds, the dark end shades for text and borders.
Which scheme should I use for a website?
Usually the ramp plus one accent. Analogous if you want the palette to feel calm and cohesive; complementary when you need one thing to stand out. Triadic and tetradic suit data more than interfaces.
What are the numbers 50 to 900?
Lightness steps, from nearly white to nearly black. It is the naming convention design systems settled on, so 500 is the base and 700 is a typical text colour.
Why do some steps fail contrast?
A light tint on white cannot reach 4.5:1. It is not a flaw in the scale. Light steps are for backgrounds and borders; text needs the darker end, and the note tells you where the line falls.
How accurate is the colour-blindness preview?
It uses the standard simulation matrices, which are approximations of a range of real conditions. Good enough to catch a palette that relies on hue alone; not a substitute for testing with people.
Can I extract a palette from an image?
Not here. This builds a palette from one colour you choose — pick the colour out of your image first, then generate around it.
Why do my two colours look muddy together?
Interpolating through sRGB passes through grey between opposing hues. It affects gradients more than palettes, but two near-complementary colours at equal lightness will always fight.
Is the palette saved anywhere?
No. Nothing leaves your browser and nothing is stored, so copy the CSS before you close the tab.
How many colours does a design system need?
Far fewer than people build. One brand ramp, one neutral ramp, and three semantic colours for success, warning and error will carry most products.