Colour Picker & Palette Generator
Choose a colour and instantly get every format, a full tint and shade ramp, four harmony palettes and WCAG contrast scores against white and black.
About the Colour Picker & Palette Generator
Choosing one colour is easy. Building the eight or ten around it that a real interface needs is the hard part, and it is where most self-built palettes fall down. You need lighter tints for backgrounds and hover states, darker shades for text and borders, at least one accent that sits comfortably beside the primary, and confidence that text on any of them is actually readable.
This tool does all four. Pick a colour with the picker or by typing a HEX, RGB or HSL value, and it generates a ten-step ramp from near-white to near-black by adjusting lightness while holding hue and saturation, which is exactly how design system colour scales are built. Alongside it you get complementary, analogous, triadic and split-complementary harmonies derived from the colour wheel.
The contrast panel is the part that saves real trouble. WCAG defines minimum contrast ratios for text: 4.5:1 for body text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 at level AAA. The tool reports the ratio against both white and black and states plainly which levels pass. Discovering that a brand colour fails contrast is far cheaper before the site is built than during an accessibility audit afterwards.
How to use it
- Pick a colourUse the native colour picker, or type a value in HEX, RGB or HSL — all three stay in sync.
- Copy any formatHEX, RGB, HSL and the HSL values individually, each copyable in one click.
- Explore the rampA ten-step tint and shade scale, ready to become the 50 to 900 steps of a design system.
- Check the harmoniesComplementary, analogous, triadic and split-complementary palettes generated from the colour wheel.
- Read the contrast scoresRatios against white and black with AA and AAA pass or fail stated for normal and large text.
- Export the paletteCopy the whole set as CSS custom properties ready to paste into a stylesheet.
Features
- Every formatHEX, RGB, HSL and individual channel values, all synchronised and individually copyable.
- Ten-step tint and shade rampA lightness scale suitable for use directly as design system colour tokens.
- Four harmony typesComplementary, analogous, triadic and split-complementary, calculated on the colour wheel.
- WCAG contrast checkingRatios against white and black with explicit AA and AAA verdicts for both text sizes.
- CSS variable exportThe full palette as custom properties, ready to paste into a stylesheet.
- Random and lockGenerate a random starting colour when you need inspiration rather than a specific value.
Who uses this tool
- DesignersBuild a complete, accessible palette around a single brand colour in a couple of minutes.
- DevelopersGet the exact HEX or HSL a design file specifies, plus the hover and active variants nobody documented.
- Accessibility reviewersVerify that text and background combinations meet WCAG AA before an audit finds that they do not.
- Brand buildersTest a proposed brand colour against real interface requirements before it is locked in.
Tips worth knowing
- Adjust lightness in HSL to build tints and shades. Mixing toward white or black in RGB drifts the hue and produces a muddy ramp.
- Pure black text on a pure white background is harsh. A very dark desaturated version of your brand hue is easier to read for long periods.
- Check contrast for both normal and large text — 3:1 is enough for headings at 24px or bold 19px, but body copy needs 4.5:1.
Frequently asked questions
What is a good contrast ratio for text?
WCAG level AA requires at least 4.5:1 for normal text and 3:1 for large text — 24px, or 19px bold and above. Level AAA raises those to 7:1 and 4.5:1. The panel here reports the exact ratio and states which levels pass.
What is the difference between HEX, RGB and HSL?
They describe the same colours in different ways. HEX and RGB both specify red, green and blue amounts. HSL specifies hue, saturation and lightness, which makes it far easier to reason about — to make a colour lighter you change one number instead of three.
How do I create a colour palette from one colour?
Take a ramp of tints and shades for the primary colour, then add one accent from the harmonies — complementary for maximum contrast, analogous for a calmer scheme. Add a neutral grey ramp and you have a complete interface palette.
What are complementary and analogous colours?
Complementary colours sit opposite each other on the colour wheel and create strong contrast, which suits accents and calls to action. Analogous colours sit next to each other and create harmonious, low-tension schemes suited to backgrounds and large areas.
Why does my brand colour fail contrast on white?
Mid-tone saturated colours — most oranges, yellows and light blues — rarely reach 4.5:1 against white. The usual fix is to keep the brand colour for large elements and use a darker shade of the same hue for body text, which the ramp here generates for you.
Can I export the palette as CSS variables?
Yes. The export button produces custom properties for the full ramp and the harmony colours, ready to paste into a stylesheet's :root block.