A practical guide to the OKLCH color picker
How to use the picker
Start with the lightness and chroma plane, then set the hue. Every change updates the HEX, RGB, HSL and OKLCH readouts together, so you can also work the other way round: paste a value you already have into any of those inputs and the rest follow. HEX is the format most design tools and style guides use, RGB and HSL are what older CSS and many JavaScript libraries expect, and OKLCH is the one worth thinking in while you are choosing.
When you copy a color, copy the format your destination understands. A HEX or rgb() value works everywhere. An oklch() value, for example oklch(0.62 0.19 259), works in the CSS of current browsers and keeps the intent of your design visible in the source, because the three numbers say how light, how colorful and which hue the color is. If you need to share a single color with someone, the color library has a page for every well-known HEX value with all of its conversions listed.
What OKLCH is, and why perceptual lightness matters
OKLCH is the polar form of Oklab, a color space published by Björn Ottosson in 2020 and designed so that numeric changes line up with what people see. L is lightness from 0 (black) to 1 (white), C is chroma (how far the color is from grey) and H is the hue angle in degrees. CSS Color Level 4 added it as the oklch() function.
HSL looks similar, but its lightness is just a recipe applied to RGB channels. A yellow and a blue with the same HSL lightness of 50% are nowhere near equally bright: the yellow looks far lighter. That makes HSL unreliable for anything that depends on brightness, such as building a ramp of steps, picking a text color or keeping a set of brand hues visually balanced. In OKLCH, colors that share an L value look about equally light, so you can swap the hue and keep the same visual weight. The OKLCH vs HSL guide goes through the differences with examples.
Gamut: sRGB, Display P3 and out-of-gamut colors
A gamut is the range of colors a display or color space can show. sRGB is the long-standing web default. Display P3 is a wider space used by many recent phones, laptops and monitors, and it can reach more saturated reds, greens and cyans than sRGB. OKLCH is not limited to either of them, so you can type a chroma that no screen can reproduce.
That is what out-of-gamut means: the color is a valid OKLCH value but falls outside the gamut you are targeting, so it has to be clipped or mapped to something displayable. Clipping the channels directly can shift the hue or flatten detail. The picker tells you whether the current color fits inside sRGB so you know when the exported HEX is an approximation of what you see in OKLCH. If a color is out of gamut, lower the chroma a little (keeping L and H) until it fits. The gamut mapping guide explains how browsers and tools handle this.
Picking accessible text and background pairs
Readable text needs enough difference in lightness between foreground and background, and hue has very little to do with it. Because OKLCH gives you lightness directly, a reliable way to build a pair is to choose a background, then move the text color's L toward the opposite end until it is clearly different, keeping the brand hue. A dark ink on a pale tint of the same hue usually works well.
Always confirm the result with a measurement rather than by eye. Send the pair to the contrast checker to see the WCAG ratio and the APCA Lc value, or look through the ready-made combinations on the contrast pairs pages, which list the ratio for text on white, black and several greys. Our WCAG vs APCA guide explains which of the two numbers to rely on.
Building tints, shades and palettes
A tint is a color mixed toward white, a shade is one mixed toward black. In OKLCH you make them by stepping L up or down while holding H steady and easing C so the color does not leave the gamut at the extremes. Because the steps are perceptual, evenly spaced L values give an evenly spaced ramp, which is the property that makes 50 to 950 style scales usable for backgrounds, borders and text in the same interface. The guide to building OKLCH scales covers chroma curves in more detail.
For a full palette, pick one anchor color for the brand, a few supporting hues at similar lightness and chroma, and a neutral ramp with a touch of the brand hue. If you would rather start from existing work, browse the palette library, or read how hues are commonly perceived in the color meaning guides. If you are choosing between tools, the comparisons with Coolors and Adobe Color (also gathered on the comparison hub) are written to be fair about what each does best.
Exporting to CSS variables and Tailwind
Once you have a color, store it as a design token rather than pasting it around. As a CSS custom property that looks like --brand-500: oklch(0.62 0.19 259); declared on :root, and used as color: var(--brand-500). In Tailwind CSS v4 the same value goes in an @theme block as --color-brand-500, which makes utilities such as bg-brand-500 and text-brand-500 available. The picker exports both, plus DTCG design-token JSON, so a single source can feed code and design tools.
If you want to fetch conversions or palette data programmatically, for example in a build step, the color API returns the same HEX, RGB, HSL and OKLCH values as JSON. To go from a single picked color to a full system with roles and exports, continue in the Color Studio.