Your palette as it appears under the three most common types of colour vision deficiency. If two swatches collapse into the same tone, the scheme is carrying meaning by hue alone.
Ratios for every pair. Green clears 4.5:1 — safe for one colour as text on the other. Red means those two should not be text and background together.
Every element below is painted live from the palette above. Change a colour in the studio and this interface follows — no refresh, no export step.
Accessibility treated as a final review step gets skipped. Treated as part of generation, it is free.
Each colour reports its contrast against white and against black the moment it appears, with the level it clears. You never have to copy a hex into another tab to find out whether text will work on it.
Around 8% of men have a colour vision deficiency. The simulator shows your palette under protanopia, deuteranopia and tritanopia, so a scheme that only works for full-colour vision is caught here rather than in a bug report.
Export CSS custom properties, SCSS variables, a Tailwind theme extension, JSON, or an SVG swatch sheet. Copy in one click — no account, no save button, no paywall on the export formats.
A short workflow that gets you to something usable rather than something merely pleasant.
Mood sets saturation and lightness range — Earthy keeps things low-saturation and warm, Neon pushes both to the top. Harmony sets where the hues sit relative to each other. Start with Analogous if you want something safe, Complementary if you need a call to action that jumps.
Hit the spacebar until a single swatch feels right, lock it with the ring icon, then keep rolling. The generator builds around what you locked instead of throwing it away. Two locked colours and it will fill in the rest of the scheme around both.
A swatch labelled AA on white can carry body text on a white background. One labelled fill only cannot carry text against white or black at all — use it for large areas, borders or decoration, and let a different swatch do the words.
The rest of the kit — all in the browser, all free, no sign-up.
Drag around the wheel and see all eight harmony rules applied live, with a lightness ladder for each hue.
Open the wheel →Ready-made schemes sorted by mood, each one already measured for contrast. Click any to load it into the studio.
Browse the library →Two colours, exact ratio, pass or fail for every level, and a one-click fix that keeps the hue.
Check a pair →Pick a base size and a ratio, get a complete heading scale in pixels. Seven classic ratios from minor second to golden.
Open the calculator →What each level requires, where the exceptions are, and how to handle text over images and gradients.
Read the guide →What the three common types actually do to your palette, and the patterns that survive all of them.
Read the guide →Most generators produce colours and stop there. Every swatch here is measured as it is created, so you see its contrast ratio against white and black, and whether it clears AA or AAA for text. The accessibility check happens during generation rather than afterwards in a separate tool.
It means that colour reaches at least 4.5:1 against pure white, which is the WCAG AA threshold for normal body text. AAA on white means it reaches 7:1. A swatch marked fill or accent only falls short against both white and black, so use it for backgrounds, borders or decoration rather than for words.
Roughly one in twelve men and one in two hundred women have some form of colour vision deficiency. Two palette colours that look clearly different to you can collapse into nearly the same tone under deuteranopia, the most common type. The simulator renders your palette as it would appear under protanopia, deuteranopia and tritanopia so you can catch that before shipping.
They are fixed relationships on the colour wheel. Analogous uses neighbouring hues for calm, cohesive schemes. Complementary pairs opposites for maximum tension. Triad and tetrad spread hues evenly. Split complementary softens the contrast of a complementary pair, and monochrome varies lightness within a single hue.
Yes. Click the ring icon on any swatch to lock it, then generate again — locked colours stay put and the unlocked ones are replaced around them. You can also click a swatch to pick an exact colour by hand, add or remove swatches, and undo any step.
No. Image extraction runs entirely in your browser using a canvas element. The file is decoded locally, sampled, and discarded — it never reaches a server, and there is no upload request to intercept.
CSS custom properties, SCSS variables, a Tailwind config snippet, JSON, a standalone SVG swatch sheet, and a plain comma-separated hex list. Copy any of them with one click.
No. Contrast and colour-vision safety are two checkpoints out of many. Keyboard users need visible focus, motion-sensitive users need reduced-motion support, and no meaning should be carried by colour alone. A passing palette makes your colours safe to use; it does not make the whole interface usable.
