What is OKLCH and why use it?

OKLCH is a modern CSS color space (L = lightness, C = chroma, H = hue) based on the OKLab perceptual model. Unlike HSL, equal numeric steps in OKLCH appear visually equal to the human eye, making it ideal for generating accessible color palettes and design tokens.

Why do some hex colors show a CSS name?

CSS defines 140+ named colors (like 'red', 'navy', 'coral'). When the converted HEX value exactly matches one of these named colors, the tool shows it as an optional extra format you can copy.

How accurate is the OKLCH conversion?

The conversion uses the standard sRGB → linear RGB → XYZ D65 → OKLab → OKLCH pipeline. Results are accurate to 3 decimal places, which is sufficient for all practical CSS and design use cases.

Can I input HSV colors?

Yes. Type in the format hsv(H, S%, V%) — for example hsv(210, 75%, 90%). The converter will parse it and show all other formats. Note that HSV is not a CSS standard, so the browser's color picker doesn't support it natively.

Color Format Converter

Convert colors between HEX, RGB, HSL, HSV, and OKLCH formats instantly.

Developer

Share this tool

f 𝕏 L

Enter color (HEX, RGB, HSL, HSV or named)

HEX

RGB

HSL

HSV

OKLCH

How to Use

1
Type or paste a color value (HEX like #3b82f6, RGB like rgb(59,130,246), or a CSS name like 'blue') into the input field.
2
Alternatively click the color swatch on the right to open the native color picker and choose any color visually.
3
All conversions (HEX, RGB, HSL, HSV, OKLCH, and CSS named color if applicable) appear instantly in the results section.
4
Click the Copy button next to any format to copy that specific value to your clipboard.

Use Cases

Web & App Design

Convert a brand HEX color into HSL for Tailwind CSS custom properties, or into RGB for CSS rgba() transparency values.

Design System Tokens

Get OKLCH values for modern design tokens in CSS that provide perceptually uniform color scales across your design system.

Developer Handoff

Designers often work in HSL while developers need HEX or RGB for code — convert instantly to avoid manual calculation errors.

Accessibility Color Checking

Check the L (lightness) component in HSL or OKLCH to quickly assess whether foreground and background colors have sufficient contrast.

Frequently Asked Questions

Color Format Converter instantly translates any color between HEX, RGB, HSL, HSV, and OKLCH formats right in your browser — no installation needed. Paste a value or use the color picker and every format updates simultaneously.

Both use Hue and Saturation but differ in the third axis. HSL uses Lightness (0% = black, 50% = pure color, 100% = white), while HSV uses Value/Brightness (0% = black, 100% = full brightness). HSL is more intuitive for design; HSV is common in image editors like Photoshop.

Explore More Tools

📊

JSON to CSV

Convert JSON arrays to CSV format instantly — paste JSON, download CSV.

{ }

JSON Formatter

Format, validate, and minify JSON instantly with adjustable indentation.

🔤

Base64 Encoder

Encode or decode Base64 strings — runs entirely in your browser.

🔗

URL Encoder

Safely encode or decode URL components for query strings and paths.