Back to UI design
Colour palette generator from one brand colour, with contrast check
Turn one colour into 11 evenly spaced OKLCH shades, each labelled with its WCAG contrast. Copy CSS variables for your website theme.
How to use
- Pick or paste your brand colour.
- See 11 shades from very light to very dark. Each swatch shows its contrast so you know whether text on it is readable.
- Name the palette and copy the CSS variables into your theme.
Frequently asked questions
Why is this palette more even than mixing with white and black?
It is computed in OKLCH, which follows how the eye perceives lightness, so the steps are even and never turn muddy.
Will my original colour change?
No. Your colour stays as-is at the nearest step; the other steps are calculated around it.
What does 4.5:1 mean?
It is the minimum contrast for readable body text under WCAG AA. Below that, use it only for large text.