HEX to RGB and OKLCH.
Paste a hex code or any CSS colour. You get HEX, RGB, HSL and OKLCH side by side, plus the line for a Tailwind v4 theme.
- Free
- No signup
- Runs in your browser
Paste a hex code (#2563eb, #fff, #2563eb80), rgb(), hsl(), oklch(), or a bare shadcn value like 221 83% 53%.
Used in the Tailwind and CSS snippets. Lowercase letters, numbers and hyphens.
#2563eb
Every format below is the same colour.
How it works.
- 1
Paste a colour in any format, or pick one with the colour picker.
- 2
Every format updates as you type: HEX, RGB, HSL and OKLCH.
- 3
Copy the one you need, or the ready-made Tailwind v4 and CSS variable lines.
Why OKLCH keeps showing up
Tailwind v4 defines its whole default palette in OKLCH, and shadcn/ui themes moved to it too. The reason is lightness: in OKLCH, two colours with the same L value look equally bright to people, which is not true of HSL. That makes it far easier to build a palette or a dark mode that doesn't drift.
So the hex code from your brand guide usually needs to become an oklch() value before it goes into a theme. That's the conversion this page does.
How the conversion works
A hex code is three bytes: red, green and blue, each from 00 to ff. That's RGB already. HSL rearranges the same numbers into hue, saturation and lightness. OKLCH takes a longer road: sRGB to linear light, to the OKLab colour space, then to lightness, chroma and hue.
OKLCH can describe colours a normal sRGB screen can't show. When you paste one of those, the HEX, RGB and HSL outputs show the closest colour that fits, found by lowering chroma and keeping lightness and hue.
Questions, answered.
How do I convert hex to RGB?
Split the hex code into three pairs and read each pair as a base-16 number. #ff6600 becomes ff, 66 and 00, which is 255, 102 and 0, so rgb(255, 102, 0). The converter above does it as you type.
How do I convert hex to OKLCH?
Paste the hex code above and copy the OKLCH line. Under the hood the colour goes from sRGB to linear light, then through the OKLab matrices to lightness, chroma and hue, the same maths browsers use for oklch().
What does an 8-digit hex code mean?
The last two digits are alpha, the opacity. #ff660080 is the same orange at about 50% opacity. The 4-digit short form works the same way: #f608 expands to #ff660088.
Why does my OKLCH colour come out different in HEX?
Because it's outside sRGB, the range a hex code can describe. Wide-gamut screens can show it, but a hex code can't hold it. The tool flags this and gives you the nearest sRGB colour with the same lightness and hue.
Can I paste the old shadcn HSL values like 221 83% 53%?
Yes. Bare H S% L% triplets, the format older shadcn themes kept in their CSS variables, are read as HSL, so you can turn an old theme into OKLCH one value at a time.
More free tools.
All tools- shadcn Theme GeneratorOne brand colour in, a full shadcn/ui theme for Tailwind v4 out.
- Favicon GeneratorEvery favicon file a site needs, plus the HTML tags, in one zip.
- OG Image GeneratorMake a 1200x630 social share image and the meta tags that go with it.
- SVG to PNGRender an SVG as a crisp PNG at any size, transparent or on a colour.
Got the colour. Now theme the whole app.
Make the primary colour oklch(0.55 0.22 263) across the app.. Add a dark mode toggle to the settings page.. Add a pricing page with Stripe checkout.Every screen in Hype Stack, a free full-stack starter, takes its colours from one set of OKLCH variables in one CSS file. Change the primary there and everything follows.