Skip to main content
WebColorTools

HSL to OKLCH Converter

Convert HSL color values to OKLCH instantly. Free, in your browser.

Instant 100% Private Free Forever
HSL OKLCH CSS Converters
Swap to OKLCH → HSL
HSL values

OKLCH output

oklch(68% 0.21 33.5)
Raw 68%, 0.21, 33.5
HEX #FF5733

Examples

How to use the HSL to OKLCH Converter

Four steps to turn HSL into OKLCH perceptual values.

  1. 1

    Enter HSL values

    Type hue (0–360), saturation (0–100%), and lightness (0–100%), or pick with the swatch.

  2. 2

    See the live preview

    The large swatch updates instantly so you can confirm the color.

  3. 3

    Copy the OKLCH value

    Click Copy next to the main oklch() output, or grab Raw components or the bonus HEX code.

  4. 4

    Try an example

    Use Load example or the gallery chips for hsl(11, 100%, 60%), a vivid blue, and black.

What is HSL to OKLCH conversion?

HSL to OKLCH conversion bridges the familiar cylindrical HSL model — hue, saturation, lightness — into the perceptually uniform OKLCH space increasingly used by modern CSS and design systems. You might tune a palette in HSL because it is intuitive, then need OKLCH for accessible color ramps, Tailwind v4 tokens, or CSS that behaves predictably when adjusting lightness. This free converter performs that translation instantly with a live preview and copy-ready strings.

HSL maps color as an angle plus two percentages. Hue (0–360°) locates the color on the wheel. Saturation (0–100%) measures distance from gray. Lightness (0–100%) controls luminance. CSS syntax looks like hsl(11, 100%, 60%). Search phrases like hsl to oklch, hsl to oklch converter, and convert hsl to oklch describe developers upgrading from HSL-based themes to OKLCH-based design tokens.

OKLCH (Oklab Lightness, Chroma, Hue) offers more predictable adjustments: changing lightness does not accidentally shift perceived hue or saturation the way HSL often does. The output looks like oklch(68% 0.21 33.5) for the same vivid orange-red. Raw comma-separated OKLCH components and a bonus HEX row accompany the primary output.

The conversion algorithm first transforms HSL to RGB using standard CSS formulas, then converts RGB through OKLab into OKLCH coordinates. For the reverse direction, use our OKLCH to HSL converter, or explore HEX to OKLCH and the all-in-one Color Converter.

Frequently asked questions

Why migrate from HSL to OKLCH?
HSL is intuitive but not perceptually uniform — equal lightness steps look uneven across hues, and adjusting L can shift perceived saturation. OKLCH separates lightness, chroma, and hue in a way that matches human vision more closely. Design systems like Tailwind CSS v4 prefer OKLCH for scale generation. This converter helps you translate familiar HSL values into OKLCH for modern CSS workflows.
What does hsl(11, 100%, 60%) become in OKLCH?
That vivid orange-red maps to roughly oklch(68% 0.21 33.5) and HEX #FF5733. The live swatch confirms the match. Enter your H, S, and L values and copy the computed oklch() string.
What is the Raw output row?
Raw lists lightness, chroma, and hue as comma-separated values — for example 68%, 0.21, 33.5 — without the oklch() wrapper. Handy for spreadsheets, design docs, or preprocessors that assemble the function yourself.
Can I use the color picker instead of typing HSL numbers?
Absolutely. The native picker sets RGB under the hood and syncs the H, S, and L fields automatically. This is handy when you know the color visually but not its cylindrical coordinates — pick it, then read or tweak the HSL values before copying the OKLCH output.
Is my color data sent anywhere?
No. Every calculation runs locally in your browser. Nothing is uploaded, logged, or stored on a server. You can use the tool offline once the page has loaded.

Related tools

More free tools — all run in your browser.

OKLCH to HSL

Convert OKLCH color values to HSL instantly.

HEX to OKLCH

Convert HEX color codes to OKLCH values instantly.

HEX to HSL

Convert HEX color codes to HSL values instantly.

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH.