OKLCH to HSL converter
Convert OKLCH to HSL for tools that only know hsl().
Example: oklch(70.45% 0.1926 39.23)
HSL
Convert OKLCH to HSL for tools that only know hsl().
Example: oklch(70.45% 0.1926 39.23)
Some design tools, CSS preprocessors and older codebases still speak HSL. This brings a color from OKLCH down to HSL by fitting it into sRGB first, if needed, and then writing it as hue, saturation and lightness.
About the formats. OKLCH is a perceptual color model built on Björn Ottosson's OKLab space: L is lightness from 0% to 100%, C is chroma (how vivid the color is, from 0 for grey up to about 0.32 inside sRGB) and H is the hue angle in degrees. Lightness tracks what the eye sees, so equal L values look equally light. HSL describes a color as a hue angle on the color wheel (0 to 360 degrees, where 0 is red, 120 green and 240 blue), a saturation percentage and a lightness percentage. It is the same sRGB color as RGB, written in a way that is easier to adjust by eye.
How exact is it? OKLCH can describe colors that a standard screen cannot show. When the color is outside sRGB, its chroma is lowered, keeping lightness and hue, until it fits, which is how browsers handle it too; colors already inside sRGB convert unchanged. The HSL values are shown to one decimal place, which is enough to give back exactly the same 8-bit color when you convert them again.
For example, oklch(69.29% 0.2055 346.77) in OKLCH is hsl(324, 84.3%, 65.1%) in HSL. Do not expect similar numbers. OKLCH lightness of 70% and HSL lightness of 70% are different things, and so are chroma and saturation. Even the hue angles differ, since the two models use different color wheels.
Type or paste an OKLCH value such as oklch(69.29% 0.2055 346.77) and the HSL value, hsl(324, 84.3%, 65.1%), appears straight away. Use Copy to put it on your clipboard, or choose a color with the picker.
They are different color wheels. In OKLCH red is near 29° and blue near 264°, while in HSL red is at 0° and blue at 240°.
Only if the OKLCH color is outside sRGB, in which case its chroma is lowered to fit. Otherwise it only rounds to the nearest 8-bit color, shown to one decimal in HSL.
OKLCH can describe colors that a standard screen cannot show. When the color is outside sRGB, its chroma is lowered, keeping lightness and hue, until it fits, which is how browsers handle it too; colors already inside sRGB convert unchanged. The HSL values are shown to one decimal place, which is enough to give back exactly the same 8-bit color when you convert them again.
Yes. Add transparency to the OKLCH value and it is carried over to the HSL result, which supports it too.
No. The conversion runs in your browser and nothing is uploaded.