HesapHanem

HSL to OKLCH Converter

Enter HSL hue, saturation, and lightness to get the OKLCH color.

Result

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.

Worked example

Take HSL 210, 50%, 50%. Chroma c = (1 − 0) × 0.5 = 0.5, so the sRGB channels are R = 0.25, G = 0.5, B = 0.75. Linearised they become 0.0509, 0.2140 and 0.5225. The Oklab matrices turn these into L = 0.5856, and a and b values whose length gives chroma C = 0.1183 and whose angle gives hue 250.5°. The tool prints oklch(58.6% 0.1183 250.5). Note the hue moved from 210° in HSL to 250.5° in OKLCH: the two hue wheels are not the same.

Try this example →

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.

About this calculator

HSL (hue, saturation, lightness) is the color model most web developers grew up with, but its “lightness” value doesn’t match how bright a color actually looks to the eye — a fully saturated yellow and a fully saturated blue at the same HSL lightness appear very different in brightness. OKLCH, based on the newer OKLab color space and standardized in the CSS Color Module 4 spec, fixes this by making its lightness axis perceptually uniform, so equal L values look equally bright across every hue.

UI and design system engineers use OKLCH to build color palettes and dark-mode variants that stay visually consistent when lightness or chroma is adjusted programmatically. This calculator runs your HSL input through the full conversion pipeline — sRGB, then linear RGB, then OKLab, then OKLCH — to output the equivalent lightness (L), chroma (C), and hue (H).

Was this helpful?

You can pick up to 3 reactions.

Comments (1)

  • Editorial team

    A quick way to see why people switch: compare two pure colors that share the same HSL lightness of 50%. Yellow at hue 60 comes out at 96.8% OKLCH lightness, while blue at hue 240 gives 45.2%. If you build a palette by holding HSL lightness fixed, those steps will look uneven; holding OKLCH lightness fixed keeps them level. Do you build your design tokens in OKLCH already, or still in HSL?

Popular calculators

Loan Calculator

Monthly payment, total interest and full amortization schedule.

Percentage Calculator

Percent change, percent of, and ratio calculations.

Discount Calculator

Calculate final price, savings, and discount amount.

BMI Calculator

Body mass index from height and weight (metric or imperial).

Age Calculator

Compute your exact age in years, months and days from a birth date.

Compound Interest Calculator

Calculate the final amount and interest earned with compounding.

All Calculators