HEX, RGB, HSL to OKLCH Converter

What this page does

One color is written four ways. The hex, RGB, HSL, and OKLCH rows are the same swatch, not four different colors. Contrast is a separate check. The ratios under the swatch are white text and black text on that color, from WCAG relative luminance.

What each format is for

Hex is the six-digit writing of the same red, green, and blue as RGB.
HSL separates hue, saturation, and lightness.
OKLCH separates lightness, chroma, and hue. Its lightness stays closer to how bright the color looks.
A CSS color name, such as rebeccapurple, is accepted in the color field on this page.

How to use this page

Type a color, choose a preset, use the picker, or roll the dice. The eyedropper button appears when the browser has one.
Read the note under the field. Valid OKLCH means chroma.js can show the color in sRGB. Outside sRGB means the swatch is the color a screen can show.
Copy a row with the icon on that row. Copy link, beside the field, copies an address that opens this color.
Drag the HSL or OKLCH sliders, or choose an OKLCH lightness step.
Read the white-text and black-text ratios. AA for body text is 4.5:1. AA for large text is 3:1.

The same color, four ways

These four lines are the page default, sky blue. Lightness in oklch() here runs from 0 to 1.

HEX#4FA8E1
RGBrgb(79 168 225)
HSLhsl(203 71% 60%)
OKLCHoklch(0.701 0.119 239.7)

Paste it into a stylesheet

Any of these declarations paints the same sky blue. For Tailwind CSS v4, one color goes under @theme. The homepage builds the rest of the theme. Hex, HSL, and RGB for the color you are converting stay in the rows above.

color: #4FA8E1;
color: rgb(79 168 225);
color: hsl(203 71% 60%);
color: oklch(0.701 0.119 239.7);

@theme {
  --color-primary: oklch(0.701 0.119 239.7);
}

Easy mistakes

The same HSL lightness does not look equally bright. OKLCH vs HSL vs RGB measures pure yellow and pure blue.
A steady OKLCH lightness is not a WCAG pass. The ratios on this page are the measurement.
When the note says Outside sRGB, the swatch is not the OKLCH value you typed. chroma.js clipped it to a color a screen can show. That clip is not CSS Color 4 gamut mapping.

Questions

How do I turn hex into OKLCH?

Paste the hex into the color field. The OKLCH row shows the converted value.

What does Valid OKLCH mean?

chroma.js could place the color inside sRGB, so the swatch matches the value. Outside sRGB means the value was clipped to a color a screen can show. The note uses that chroma.js clip. It is not CSS Color 4 gamut mapping.

Why do two HSL colors with the same lightness look different?

HSL lightness is not how bright a color looks. The guide linked above shows yellow and blue that share an HSL lightness and do not share a perceived brightness.

Does an OKLCH color pass contrast by itself?

No. WCAG uses sRGB relative luminance. Read the white-text and black-text ratios on this page.

Where does oklch() go in Tailwind CSS v4?

Put one color under @theme, as in the example above. A full light and dark theme comes from the homepage mixer.

Convert a color

HSL

OKLCH