RGB to OKLCH Converter

About the RGB to OKLCH Converter

What is RGB to OKLCH conversion?

RGB is how screens and design tools hand you colors — three 0–255 numbers for red, green and blue light. OKLCH is how modern CSS prefers to describe them: perceptual Lightness, Chroma and Hue that match what your eye sees. This converter maps any RGB triple to its exact oklch() value, along with HEX, HSL, LCH, LAB, HWB and CMYK, all updating live as you move the sliders.

The conversion itself is genuinely non-trivial — RGB values are gamma-encoded, so the math linearizes each channel, passes through the OKLab color space, and converts to polar coordinates. You don't need to care about any of that: drag R, G and B and read the result. Because it runs entirely in your browser, it also works offline.

How to Use This Tool

1. Set your RGB color. Drag the Red, Green and Blue sliders, type exact 0–255 values, or paste a HEX code.
2. Read the OKLCH value. The oklch() string at the top of the results is ready to paste into CSS.
3. Compare formats. HSL, LCH, LAB and the rest are listed below it, each with a copy button.
4. Explore the color. Shades, tints, harmonies and WCAG contrast are generated for every color you dial in.

Common Use Cases

• From design tool to modern CSS: Figma and Photoshop give you RGB; your stylesheet wants oklch().
• Migrating a codebase: Convert legacy rgb() declarations to OKLCH as part of a design-token upgrade.
• Perceptual tweaking: Once in OKLCH, nudging L gives an evenly lighter or darker color, something raw RGB can't do.
• Comparing vividness: The C value ranks colors by how colorful they actually appear.
• Accessibility: Check the WCAG contrast panel before committing a color to text.

Need the reverse? Try the OKLCH to RGB converter, start from a HEX code, or browse all our free color tools.

Frequently Asked Questions

How is RGB converted to OKLCH?

Each RGB channel is linearized (gamma removed), transformed into the OKLab color space through a pair of matrix operations, and then expressed in polar form: L stays as lightness, while a and b become Chroma (distance from gray) and Hue (angle). The tool does all of it instantly and exactly.

Why use OKLCH instead of HSL?

HSL's lightness is a lie: hsl(60, 100%, 50%) yellow looks far brighter than hsl(240, 100%, 50%) blue despite identical numbers. In OKLCH, two colors with the same L genuinely look equally bright, which makes palettes and hover states behave predictably.

Can I paste the result into CSS?

Yes. The output is formatted exactly as the CSS oklch() function expects, like oklch(62.8% 0.258 29.2), and works in all major browsers released since mid-2023.

Is the conversion lossless?

Yes. Every RGB color has one exact OKLCH representation, and converting back lands on the same RGB values. Displayed numbers are rounded to a sensible precision that still round-trips to the identical color.

Is this tool free and private?

Completely. The conversion runs entirely in your browser with JavaScript, nothing you enter is uploaded or logged, and the page keeps working offline once loaded.