Skip to content
arnaud.app

RGB to HSL Converter

Convert RGB color values to HSL (hue, saturation, lightness).

Runs in your browser

Paste an RGB value and we return the equivalent HSL - useful for translating a colour picked from a screenshot into something a designer can tweak intuitively.

CSS hsl()

hsl(212 100% 52%)

CSS rgb()

rgb(10 124 255)

CSS oklch()

oklch(0.608 0.215 257.4)

#0A7CFF

Best contrast vs

black text → ratio 5.34:1 (WCAG AA needs 4.5:1)

How to use it

  1. Type a colour in any format

    Drop a HEX, rgb(), hsl() or oklch() value into the matching field. Every other field updates live.

  2. Adjust channels directly

    Tweak individual R/G/B sliders or HSL components to dial in a shade.

  3. Copy the format you need

    Use the copy button next to the format your destination expects.

What is it?

A color converter translates between the formats CSS, design tools and image editors all use slightly differently. HEX (#0a7cff) is the legacy shorthand for an RGB triplet. RGB describes a colour in red/green/blue intensities. HSL (hue, saturation, lightness) is friendlier for tweaking shades. OKLCH is the new perceptually-uniform model in CSS Color Level 4 - adjusting lightness or chroma doesn't accidentally shift the hue the way HSL does.

When to use it

Whenever a colour value needs to move between contexts: copying a brand colour from a logo SVG (HEX) into a CSS variable system (often HSL or OKLCH), translating a screenshot pixel value (RGB) into a design token, or generating accessible variants of a base colour. Also helpful when checking contrast against WCAG thresholds.

Common mistakes

Don't assume HSL lightness is perceptual - it isn't. hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) have the same lightness number but look wildly different in luminance; OKLCH fixes this. And don't lose precision by truncating HEX channels mid-conversion: round once at the end.

FAQ

Why OKLCH?
OKLCH is the new CSS Color Level 4 format. Unlike HSL it's perceptually uniform, which means adjusting lightness or chroma doesn't accidentally shift the hue.

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL and OKLCH.

Try it out →

More in this category