RGB to OKLCH Converter

RGB is device-oriented (it describes what the screen does); OKLCH is human-oriented (it describes what the eye perceives). Converting between them is the foundation of modern design tokens.

How RGB → OKLCH works

sRGB → linear RGB → LMS cone response → Oklab → OKLCH. The full pipeline is described in Björn Ottosson's original 2020 specification.

When to use OKLCH

Use OKLCH when generating shade scales, contrast pairs, or color wheels — they'll feel evenly spaced where RGB-derived equivalents won't.

Common RGB → OKLCH examples

Tap any swatch to see its full breakdown.

Navy

rgb(0, 0, 128)

→ oklch(27.1% 0.188 264)

Royal Blue

rgb(65, 105, 225)

→ oklch(56% 0.188 266)

Sky Blue

rgb(135, 206, 235)

→ oklch(81.5% 0.082 226)

Baby Blue

rgb(137, 207, 240)

→ oklch(82% 0.084 229)

Powder Blue

rgb(176, 224, 230)

→ oklch(87.5% 0.05 206)

Cornflower Blue

rgb(100, 149, 237)

→ oklch(67.5% 0.141 261)

Steel Blue

rgb(70, 130, 180)

→ oklch(58.8% 0.099 246)

Dodger Blue

rgb(30, 144, 255)

→ oklch(65.2% 0.19 253)

Cerulean

rgb(0, 123, 167)

→ oklch(54.8% 0.112 232)

Teal Blue

rgb(0, 128, 128)

→ oklch(54.3% 0.093 195)

Cyan

rgb(0, 255, 255)

→ oklch(90.5% 0.155 195)

Cobalt Blue

rgb(0, 71, 171)

→ oklch(42.8% 0.172 260)

Azure

rgb(0, 127, 255)

→ oklch(61.3% 0.212 256)

Sapphire

rgb(15, 82, 186)

→ oklch(46.7% 0.176 260)

Midnight Blue

rgb(25, 25, 112)

→ oklch(28.8% 0.144 273)

Indigo

rgb(75, 0, 130)

→ oklch(33.9% 0.179 302)

Periwinkle

rgb(204, 204, 255)

→ oklch(86.2% 0.07 285)

Slate Blue

rgb(106, 90, 205)

→ oklch(54.4% 0.171 286)

Other color conversions

HEX → RGB RGB → HEX HEX → HSL HEX → OKLCH OKLCH → HEX RGB → HSL HSL → RGB

Convert any RGB on your Mac

Colorframe shows you RGB, OKLCH, and every other format side-by-side as you pick. Copy any with one click.

Download for Mac