About Color Converter

Convert between HEX, RGB, HSL, OKLCH, and Tailwind colors. Part of the DevTools Surf developer suite. Browse more tools in the Color collection.

Use Cases

• Translate Figma hex colors into Tailwind config
• Convert design-system tokens between formats
• Find the OKLCH equivalent of a brand color for modern CSS
• Audit contrast ratios when migrating from hex to OKLCH

Tips

• Click the color picker or type a hex value
• Shows HEX, RGB, RGBA, HSL, and CSS variable formats
• Each format has its own copy button

Fun Facts

• The human eye can distinguish approximately 10 million different colors, but most monitors can only display about 16.7 million (24-bit color).
• Hex color codes were introduced in HTML 2.0 (1995). The original HTML spec only supported 16 named colors like 'aqua' and 'fuchsia'.
• The OKLCH color space, now supported in CSS, is perceptually uniform — meaning equal numeric steps produce equal perceived color differences.

FAQ

Which formats can it handle?

HEX (3, 6, 8 chars), RGB/RGBA, HSL/HSLA, HWB, LAB, LCH, OKLCH, and named CSS colors. Plus Tailwind's closest class.

What is OKLCH and should I use it?

OKLCH is a perceptually-uniform color space. Two OKLCH colors with the same L look equally bright. It's in all modern browsers (2023+) and outperforms HSL for palette design.

Why doesn't my HEX exactly match the RGB?

HEX is 8 bits per channel; LAB/LCH can represent out-of-sRGB colors that clip when converted. For pixel-exact RGB, stay in sRGB-compatible formats.

Alpha channel support?

Yes in every format that supports it (HEX 8-char, RGBA, HSLA, color(display-p3 ... / 0.5)). Percent and 0-1 notation both accepted.