Skip to content
Arnaud.app

Color Converter (HEX, RGB, HSL)

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

1.00
HEX

#0a7cff

CSS rgb()

rgb(10 124 255)

CSS hsl()

hsl(212 100% 52%)

HSV

hsv(212 96% 100%)

CMYK

cmyk(96% 51% 0% 0%)

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)

Pick an input format, type or paste a color (HEX, RGB, HSL, HSV/HSB, CMYK, OKLCH or a CSS name), and every other format updates live - with alpha. Perfect for design tokens, CSS variables, print specs, and brand kits.

How to use it

  1. Choose the input format

    Pick HEX, RGB, HSL, HSV/HSB, CMYK, OKLCH or CSS name from the format selector.

  2. Type or paste your color

    Enter the value - or use the color picker and alpha slider - and every other format updates live.

  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, reading the HSV your picker shows, getting an approximate CMYK breakdown for print, 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. Treat CMYK output as an approximation - the real press result depends on the ICC profile. 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.

Related tools

Unit Converter
Convert length, weight, temperature, volume and more.

More in this category