ConverterHub

HSL to OKLCH Converter

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

How to use

  1. Enter your values in the fields above.
  2. Press Calculate to see your result instantly.
  3. Use the Share button to copy a link to your result.

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?

Comments (0)

  • Be the first to comment.

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