Skip to content
Free · No install required

Color Converter — HEX, RGB, HSL, OKLCH

Convert any color between HEX, RGB, HSL, and OKLCH instantly. WCAG contrast against white shown live.

Contrast vs white: 4.83 (AA)
R
G
B

rgb(220, 38, 38)

H
S
L

hsl(0, 72.2%, 50.6%)

What is a color converter

A color converter translates a single color between the formats CSS understands: HEX (#dc2626), RGB (rgb(220, 38, 38)), HSL (hsl(0, 72%, 51%)), and OKLCH (oklch(57.7% 0.245 27.3)). Each format expresses the same color but optimizes for a different use case — HEX for compactness, RGB for hardware roots, HSL for human-friendly tweaking, OKLCH for perceptual accuracy.

Why OKLCH matters in 2026

OKLCH is the format design systems are converging on. Lightness in OKLCH corresponds to perceived brightness, not just the math of RGB channels — which means a button at 60% lightness in red looks the same brightness as a button at 60% lightness in blue. With HSL, those would feel jarringly different.

If you’re building a design system today, generate your palette in OKLCH and let the rest of the pipeline derive HEX/RGB fallbacks.

Use cases

  • Design system migration: convert an existing palette from HEX to OKLCH to unlock perceptual scaling.
  • Tailwind v4 themes: drop OKLCH values straight into @theme { --color-accent: oklch(...) }.
  • Accessibility audits: pick a candidate color and see its contrast against white instantly.
  • Cross-tool handoff: paste a color from a Figma file in any format, get the rest in seconds.

How to use

  1. 1

    Pick or paste a color

    Use the native color picker, paste a HEX/RGB/HSL/OKLCH string into any field, or type values directly into the channel inputs.

  2. 2

    Edit any format

    Edits in any format (HEX, RGB, HSL) update all the others in real time. OKLCH is read-only since it's the wider-gamut output.

  3. 3

    Copy what you need

    Each format has a Copy button. The clipboard copy fires a small toast confirmation.

DevZap Premium

Use this directly on any page with DevZap

DevZap brings every tool into your browser as a one-click extension. No tab switching, no copy-pasting URLs. Inspect, generate, and export from any page you visit.

Install on Chrome

FAQ

Frequently asked questions

What is OKLCH and why should I care?
OKLCH is a perceptually uniform color space — equal numeric changes look like equal visual changes. Unlike HSL, lightness in OKLCH actually corresponds to perceived brightness across hues. Modern CSS supports it natively, and it's quickly becoming the preferred space for design systems.
Why does my HSL conversion look slightly off?
HSL is a quick approximation derived from RGB and isn't perceptually uniform — equal lightness values across different hues will look unequal in brightness. For accurate perceptual conversions, use OKLCH instead.
What does the WCAG contrast number mean?
It's the ratio of relative luminance between your color and pure white (1.0). WCAG 2.2 requires at least 4.5 for normal body text (AA) or 3.0 for large text. AAA is 7.0+. The chip on the picker shows you the closest passing level.
Does this tool send my colors anywhere?
No. All conversion runs locally in your browser. Nothing is uploaded, logged, or tracked.

You might also like

Related tools

WCAG Contrast Checker

Check WCAG 2.2 contrast ratios for any pair of colors. Get AA / AAA pass/fail at a glance.

color Open the WCAG Contrast Checker tool

CSS Gradient Generator

Build linear, radial, and conic gradients with a live preview. Copy production-ready CSS.

css Open the CSS Gradient Generator tool

CSS Box Shadow Generator

Stack multiple shadow layers and copy production-ready CSS. Inset, spread, opacity — all dialed in live.

css Open the CSS Box Shadow Generator tool

Ready to make your browser smarter?

Install DevZap free. Upgrade when you're ready.

Install on Chrome Get Premium →