HSL to OKLCH Converter
Paste an HSL value and get the exact OKLCH equivalent instantly — plus every other color format, a gamut check and one-click copy.
Gamut: srgb
Common HSL → OKLCH values
| Vivid Indigo | hsl(238.7 83.5% 66.7%) | oklch(0.5854 0.2041 277.12) | Details |
| Vivid Red | hsl(0 84.2% 60.2%) | oklch(0.6368 0.2078 25.33) | Details |
| Orange | hsl(24.6 95% 53.1%) | oklch(0.7049 0.1867 47.6) | Details |
| Light Yellow | hsl(45.4 93.4% 47.5%) | oklch(0.7952 0.1617 86.05) | Details |
| Vivid Green | hsl(142.1 70.6% 45.3%) | oklch(0.7227 0.192 149.58) | Details |
| Teal | hsl(173.4 80.4% 40%) | oklch(0.7038 0.123 182.5) | Details |
| Sky Blue | hsl(198.6 88.7% 48.4%) | oklch(0.6847 0.1479 237.32) | Details |
| Blue | hsl(217.2 91.2% 59.8%) | oklch(0.6231 0.188 259.81) | Details |
| Vivid Violet | hsl(258.3 89.5% 66.3%) | oklch(0.6056 0.2189 292.72) | Details |
| Vivid Pink | hsl(330.4 81.2% 60.4%) | oklch(0.6559 0.2118 354.31) | Details |
| Medium Gray | hsl(25 5.3% 44.7%) | oklch(0.5534 0.0116 58.07) | Details |
| Black | hsl(0 0% 0%) | oklch(0 0 0) | Details |
Moving a theme from HSL to OKLCH
Tailwind CSS v4 and shadcn/ui now define their colors in OKLCH. If your theme still stores channels like --primary: 239 84% 67%, convert each value and drop the hsl() wrapper where the variable is used:
/* Before */
:root { --primary: 239 84% 67%; }
.button { background: hsl(var(--primary)); }
/* After */
:root { --primary: oklch(0.5875 0.2039 277.36); }
.button { background: var(--primary); }What you gain
HSL lightness is not how bright a color looks: hsl(60 100% 50%) yellow and hsl(240 100% 50%) blue share a lightness of 50% but look nothing alike. OKLCH lightness matches perception, so shades built by changing one number stay even across hues, and contrast is easier to predict.
Reading the result
oklch(0.5875 0.2039 277.36) is lightness 0.5875 on a 0 to 1 scale, chroma 0.2039 (0 is gray) and hue 277.36°. Keep the numbers as given: HSL colors are always in sRGB, so nothing is clipped.
Frequently asked questions
- How do you convert HSL to OKLCH?
- HSL is a reshaping of sRGB, so the color goes HSL → RGB → linear RGB → OKLab, and OKLab's a and b axes are then turned into chroma (their distance from gray) and hue (their angle). The converter does all of it in one step.
- Can I paste the HSL values from a shadcn/ui or Tailwind theme?
- Yes. Bare channels such as 239 84% 67%, the way older shadcn/ui themes store --primary and friends, are read as hsl(239 84% 67%), as is a full hsl() value.
- Why does the hue change when I convert?
- HSL and OKLCH measure hue on different wheels. HSL puts pure blue at 240°, while OKLCH places it near 264°, so the numbers differ even though the color is the same.
- Will the color look different after converting?
- No. Every HSL color is inside sRGB, which OKLCH covers completely, so the conversion is exact apart from rounding in the last decimal place.