HSL to OKLCH Converter

How it is calculated

The conversion runs in steps. HSL is turned into sRGB values between 0 and 1 using chroma c = (1 − |2L − 1|) × S. Each channel is then linearised: v ≤ 0.04045 ? v ÷ 12.92 : ((v + 0.055) ÷ 1.055)2.4. The linear RGB goes through the Oklab matrices (an LMS mix, a cube root, a second matrix) to give L, a and b. Finally C = √(a² + b²) and H = atan2(b, a) in degrees, kept between 0 and 360.

Inputs are hue in degrees (0–360) and saturation and lightness in percent (0–100); values outside those ranges, such as a hue of 400, give no result. The CSS string shows lightness as a percentage with one decimal, chroma with four decimals and hue with one decimal, always with a dot as the decimal mark so it can be pasted into CSS. The two separate rows show L and C as plain numbers. For greys (saturation 0) chroma is 0 and the hue printed is meaningless.

Common mistakes

• Expecting the hue to carry over. OKLCH hue is a different wheel, so HSL 210 becomes about 250 here.
• Expecting the lightness to carry over. A mid-grey at HSL lightness 50% comes out at about 59.8% in OKLCH, because OKLCH lightness follows perceived brightness.
• Typing saturation or lightness as fractions (0.5). The fields are percentages, so 50 is needed.
• Entering a hue above 360 or a negative hue to wrap around. Those values are rejected rather than wrapped, so use 0–360.
• Reading the hue of a grey as meaningful. With saturation 0 the chroma is 0.0000 and the hue number is arbitrary.