Convert color from HSL to OKLCH

HSL to OKLCH converter

Convert HSL to OKLCH for even, perceptual palettes.

Example: hsl(16, 100%, 60.4%)

OKLCH
See this color in all formats

About HSL to OKLCH Converter

Moving a palette from HSL to OKLCH is a common first step when adopting modern CSS color. HSL colors with the same lightness often do not look equally light, for example yellow and blue, and the OKLCH lightness shows you exactly where your current scale is uneven.

About the formats. 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. 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.

How exact is it? HSL is only another way of writing sRGB, so no colors are added or lost, but the result is rounded to the nearest of the 256 levels per channel and the angle and percentages are read at full precision. Every sRGB color has an exact OKLCH value. It is shown to four decimals for chroma and two for lightness and hue, so converting it back can differ by one step in a single channel for roughly 1 color in 1,000.

For example, hsl(267.4, 72.3%, 63.1%) in HSL is oklch(61.13% 0.1996 301.79) in OKLCH. The conversion is exact, since every HSL color is an sRGB color. Expect the L in the result to differ a lot from the L you typed in: they are different scales, not different spellings of the same number.

How to convert HSL to OKLCH

  1. Type or paste an HSL color, such as hsl(267.4, 72.3%, 63.1%), or choose a color with the picker.
  2. The OKLCH value, oklch(61.13% 0.1996 301.79) for that example, appears straight away.
  3. Press Copy to put the OKLCH value on your clipboard.
  4. Use the From and To menus at the top to switch to a different conversion, or open the all-formats page to see every format at once.

Frequently asked questions

How do I convert HSL to OKLCH?

Type or paste an HSL value such as hsl(267.4, 72.3%, 63.1%) and the OKLCH value, oklch(61.13% 0.1996 301.79), appears straight away. Use Copy to put it on your clipboard, or choose a color with the picker.

Why is the OKLCH lightness so different from my HSL lightness?

They measure different things. HSL lightness comes from the highest and lowest channel values, while OKLCH lightness models human perception. Pure blue, hsl(240, 100%, 50%), is only about 45% in OKLCH, while pure yellow, hsl(60, 100%, 50%), is about 97%.

Can I keep the HSL value as a fallback?

Yes. Declare the hsl() line first and the oklch() line after it. Browsers that do not understand oklch() skip it and use the hsl() value.

Is converting HSL to OKLCH exact?

HSL is only another way of writing sRGB, so no colors are added or lost, but the result is rounded to the nearest of the 256 levels per channel and the angle and percentages are read at full precision. Every sRGB color has an exact OKLCH value. It is shown to four decimals for chroma and two for lightness and hue, so converting it back can differ by one step in a single channel for roughly 1 color in 1,000.

Does HSL to OKLCH keep transparency?

Yes. Add transparency to the HSL value and it is carried over to the OKLCH result, which supports it too.

Are my colors sent anywhere?

No. The conversion runs in your browser and nothing is uploaded.