Modern CSS Color Generator
What oklch() and color-mix() do
CSS colour moved well beyond hex. oklch() describes colour the way people perceive it, color-mix() blends two colours in any space, relative colour syntax derives one colour from another, and light-dark() picks between two values without a media query.
Syntax
color: oklch(<lightness> <chroma> <hue>); background: color-mix(in oklch, <a>, <b> <percent>);| Part | What it controls |
|---|---|
| oklch() | Lightness from 0 to 1 or as a percentage, chroma as an absolute amount of colour, hue in degrees. Equal lightness values look equally bright across hues, which hex and HSL do not manage. |
| color-mix() | Blends two colours in a named space. in oklch keeps the midpoint vivid; in srgb is what you get by default elsewhere. |
| relative colour syntax | oklch(from var(--brand) l c h / 0.5) takes an existing colour apart and rebuilds it with one channel changed — a tint ramp from a single token. |
| light-dark() | Returns the first value in a light scheme and the second in dark, provided color-scheme is declared on the element or root. |
| hex fallback | Older browsers ignore a declaration they cannot parse, so writing the hex first and the modern value second gives a free fallback. |
| P3 and wide gamut | oklch can express colours outside sRGB. On a wide-gamut display they are noticeably more saturated; elsewhere the browser clamps them. |
Notes from practice
oklch makes palettes predictable
Hold lightness and chroma, change only the hue, and every colour in the set has the same visual weight. The same exercise in HSL gives a yellow that glares and a blue that disappears.
The cascade is the fallback mechanism
No @supports needed: write background: #528def then background: oklch(0.65 0.16 260). Browsers that cannot parse the second keep the first.
light-dark() needs color-scheme
Without color-scheme: light dark declared, the function has nothing to switch on and always returns the light value.
Modern CSS Color Generator FAQ
What is oklch in CSS?
oklch() is a perceptual colour function taking lightness, chroma and hue. Unlike HSL, two colours with the same lightness genuinely look equally bright whatever their hue, which makes it far better for building palettes and for interpolating gradients.
How do I mix two colours in CSS?
Use color-mix(): background: color-mix(in oklch, var(--brand), white 30%) gives a 30% lighter tint. The colour space matters — in oklch keeps the mix vivid, while in srgb can pass through a duller midpoint.
What is relative colour syntax?
It derives a new colour from an existing one by taking it apart and changing a channel: oklch(from var(--brand) calc(l + 0.1) c h). One brand token can then generate a whole tint and shade ramp with no extra variables.
How do I support light and dark mode without a media query?
Use light-dark(): color: light-dark(#111, #eee) returns the first value under a light scheme and the second under dark. It requires color-scheme: light dark to be declared, usually on :root.
Do modern colour functions need a fallback?
A plain hex declaration written immediately before the modern one is enough. Browsers discard declarations they cannot parse and keep the previous value, so no @supports block is needed. This generator writes that fallback for you.
Related generators
- Gradients — Linear, radial and conic gradients, repeating patterns and modern colour-space interpolation.
- CSS Patterns — Tile dots, grids, stripes, checkers and zigzags from gradients alone, with no image files.
- Blend Modes — Blend stacked backgrounds with background-blend-mode, or blend an element into what is behind it with mix-blend-mode.
- Form Controls & Scrollbars — accent-color, caret-color, color-scheme, ::selection, ::placeholder, scrollbar styling and textarea behaviour.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.