A palette copied from a mockup can be difficult to extend when its colors are written as hex values. OKLCH makes the relationships easier to see. Its three coordinates are lightness, chroma, and hue: in `oklch(45% 0.09 165.4deg)`, the percentage is lightness and the angle identifies the hue. Chroma describes how much color is present. These coordinates give you separate values to adjust when a color needs to be lighter, stronger, or a different hue. section 11.3.1
A practical way to move an existing CSS palette to OKLCH is:
- Open the page in Chrome DevTools, select the root element, and find its color custom properties in the Styles panel. Use the color indicator beside a value to switch from hex to OKLCH. section 11.3
- Copy the converted values into the stylesheet. Keeping `%` on lightness and `deg` on hue can make each coordinate easier to recognize at a glance. section 11.3.1
- Compare related colors, then adjust new candidates in the browser’s color picker rather than assuming the first calculated value will look right. section 11.3.1 section 11.3.4
Listing 11.6 Converting hex colors to OKLCH
@layer theme {
:root {
--brand-green: oklch(45% 0.09 165.4deg); #1
--dark-green: oklch(59% 0.12 164.1deg); #1
--medium-green: oklch(74% 0.15 166.4deg); #1
--text-color: oklch(26% 0.01 0deg); #2
--gray: oklch(64% 0.02 248deg); #2
--light-gray: oklch(96% 0.003 248deg); #2
--extra-light-gray: oklch(98% 0 0deg);
--white: oklch(100% 0 0deg);
}
}
This palette shows three greens with nearly the same hue angle but different lightness and chroma. It also shows that several apparent grays contain a small amount of chroma—relationships that are harder to spot in hex. section 11.3.1
Adding a color to an existing palette
Suppose the palette’s green has a hue near `165deg` and a link needs a contrasting red accent for its active state. Rotating the hue by 180 degrees suggests `345deg` as a starting point, not a final answer. After testing the result in DevTools, a hue of `10deg` and lower lightness produce `--red: oklch(64% 0.15 10deg)`. Force the link’s active state in DevTools to judge the color where it will actually appear. section 11.3.4
OKLCH is useful when a palette needs deliberate adjustment; it does not require converting every color. Hex may be sufficient for fixed colors, while HSL is an option when browser compatibility is a concern. OKLCH can express colors beyond sRGB, but a display limited to sRGB will show an approximation of an out-of-gamut color. Check the rendered result and the color picker’s gamut boundary when choosing vivid colors. section 11.3 section 11.3.1
