# Color converter

URL: https://www.toolflux.app/en/color-converter/
Stand: 2026-05-05

Color converter for 6 spaces at once: HEX, RGB, HSL, OKLCH, LAB, Display-P3. With OKLCH lightness rotator and live WCAG meter. Local in your browser.

A color isn't a value but a bundle of representations. HEX to write, RGB to send, OKLCH to think in perceptual brightness. The converter below shows six spaces at once with gamut badges (sRGB / Display-P3 / out of gamut), an OKLCH lightness rotator, and a live WCAG meter that tells you immediately if your foreground/background combo trips the accessibility threshold.

## Six color spaces, one color

Each space has a strength and a weakness.

**HEX** is a compact sRGB notation and the CSS classic. But it's sRGB-only - if you want Display-P3, you need `color(display-p3 …)` notation and HEX no longer applies.

**RGB** is the screen's native language: three numbers, one per channel. Handy for OS APIs and mixing, but not perceptually uniform. RGB doesn't tell you whether two colors *look* equally bright.

**HSL** is the beginner favourite: hue, saturation, lightness. Easy to manipulate in a color picker, but the "lightness" doesn't match perceived brightness. HSL yellow at lightness 50% looks noticeably brighter than HSL red at lightness 50%.

**OKLCH** is a strong modern choice for web design: lightness, chroma, hue, all perceptually uniform. L = 60% means "medium perceived brightness", regardless of hue. Many newer design systems and CSS workflows use OKLCH for consistent lightness steps (tonal scales, dark mode).

**LAB** is the older perceptually-uniform space, decades-old in print and prepress workflows. ΔE calculations for Pantone matching run on LAB. OKLCH is its mathematically refined successor - closer to how humans actually perceive lightness.

**Display-P3** is Apple's wide-gamut standard, about 25% larger than sRGB by 2D chromaticity area (around 50% larger by gamut volume per CSS Color 4). Mostly extra saturation in reds and greens. Visible only on P3 hardware (Retina Macs, OLED iPhones, some Android flagships). On older LCDs P3 is gamut-mapped or clipped back to sRGB.

## Lightness scale in OKLCH

The showcase. Type a color and the tool renders it as a continuous OKLCH lightness gradient from L = 0 to L = 100%. Hue and chroma stay constant. The scale gets evenly lighter from left (dark) to right (light) - that's the perceptually-uniform property of OKLCH. Tap or drag along the scale to set your input's lightness; the tick marks sit at 0, 25, 50, 75, and 100%.

The comparison makes the point: try the same in HSL and you'll see HSL's lightness ladder for yellow looks different from blue. The same tool can't help you with that - but the fact that your own HSL design feels "uneven" comes from this exact property.

How to use it in a design system: define your tonal scale as OKLCH at fixed L steps (e.g. 95 / 80 / 60 / 40 / 20%) and only vary hue and chroma. You get a palette where every hue has the same perceived lightness pattern. HSL can't do that.

## Live WCAG meter

Pick a color as foreground, white / black / a custom color as background, and the tool computes the WCAG 2.1 contrast ratio live. The ratio is a number from 1 (no contrast) to 21 (max contrast, black on white).

| Level | Normal text | Large text (≥ 18 pt regular or 14 pt bold) |
|---|---|---|
| AA | ≥ 4.5 : 1 | ≥ 3 : 1 |
| AAA | ≥ 7 : 1 | ≥ 4.5 : 1 |

The four pass/fail badges cover both levels × both text sizes. Plus a sample box rendering actual fg/bg text so you can see the look, not just the number. Important: the meter only checks fg/bg contrast - it doesn't know your font size. Small text on a brand color needs AA Normal.

## Gamut badges

Each color space card carries a badge:

- **sRGB**: the color sits in the classic web gamut. Renders everywhere.
- **Display-P3**: the color extends past sRGB but stays in Display-P3 - visible on modern Apple hardware and many OLED displays.
- **out of gamut**: neither in sRGB nor P3 without clipping. Typical for Lab values at the edge of the gamut or for heavily saturated CIELCH values. Browsers will gamut-map or clip the value depending on the output path (CSS Color 4 calls this gamut mapping).

Designing in mind: HEX values are always sRGB. OKLCH values can sit in P3 or beyond depending on chroma. If your `oklch(60% 0.4 30)` shows the 'out of gamut' badge, you know: on a standard display the user gets a different color than you typed.

## Palettes

Four modes, each using your current input as the base:

- **Complementary**: hue + 180°. Classic foreground/background tension.
- **Triadic**: hue + 120° + 240°. Balanced three-color composition.
- **Analogous**: hue ± 30°. Soft tone-on-tone variation.
- **Perceptually distinct**: hue + 30°/+60°/+90° at constant L and C. Four anchors that don't look like the same color but still feel equally bright.

All math runs in OKLCH, so generated colors keep the same perceived lightness as your base - as long as they fit the displayable sRGB gamut. If a computed OKLCH color falls outside sRGB, the rendered swatch is gamut-mapped or clipped and its L can drift slightly. An HSL-based complementary calculation often hands you a noticeably different lightness even without any gamut issues.

## FAQ

### What is OKLCH and why is it better than HSL?

OKLCH is perceptually uniform: equal L values feel equally bright across all hues. HSL doesn't have that - HSL yellow at 50% L looks brighter than HSL red at 50% L. The lightness rotator shows it.

### How do I convert HEX to OKLCH?

Type the HEX above - the OKLCH card renders the value immediately. The math goes through sRGB → linear → XYZ → Oklab → OKLCH using the culori library.

### What's the difference between sRGB and Display-P3?

sRGB is the web standard (older monitors). Display-P3 is Apple's wide-gamut, about 25% larger by 2D chromaticity area (around 50% larger by gamut volume), mostly in reds and greens.

### What WCAG contrast counts as accessible?

AA: 4.5:1 normal, 3:1 large. AAA: 7:1 normal, 4.5:1 large. Large = 18 pt regular or 14 pt bold.

### FAQ

**What is OKLCH and why is it better than HSL?**

OKLCH stands for Oklab Lightness Chroma Hue, a perceptually uniform color space. That means equal L values look equally bright across all hues. HSL doesn't have that property - HSL yellow at 50% lightness looks brighter than HSL red at 50%. The lightness scale in the converter shows this live: a continuous OKLCH gradient from L = 0 to L = 100% at the same hue and chroma - dark on the left, light on the right. Tap or drag along the scale to set the lightness.

**How do I convert HEX to OKLCH?**

Just type the HEX in the converter above - the OKLCH card renders the converted value instantly. The math itself runs in several steps: HEX → 8-bit sRGB → linear sRGB → CIE XYZ → Oklab → OKLCH. We use culori, an established library; rolling your own often misses the sRGB-to-linear transform.

**What's the difference between sRGB and Display-P3?**

sRGB is the 1990s web standard - the gamut almost every old monitor renders. Display-P3 is Apple's 2015 wide-gamut standard, about 25% larger by 2D chromaticity area (around 50% larger by gamut volume per CSS Color 4), especially in saturated reds and greens. Many newer Apple displays, OLED iPhones, and some Android flagships support P3; older standard-gamut displays usually don't. The converter cards show a badge: sRGB (everywhere), Display-P3 (only on P3 hardware), or 'out of gamut' (no common display).

**What WCAG contrast counts as accessible?**

WCAG 2.1 requires: AA Normal at least 4.5:1, AA Large at least 3:1. Large = 18 pt regular or 14 pt bold. AAA requires 7:1 for normal and 4.5:1 for large. Black on white reaches 21:1 (the max), 50% grey on white only ~3.9:1 - so AA Large yes, AA Normal no. The live WCAG meter shows all four pass/fail indicators.

**When should I use LAB instead of OKLCH?**

LAB if you're in a classic print workflow or need ΔE values against a fixed reference (e.g. Pantone matching). For modern web and app design, OKLCH is the better choice: same perceptually-uniform property as LAB but with a clearly defined L axis from 0 to 100% and a hue value in degrees instead of two axes. CSS Color Level 4 specifies all four (Lab, LCH, Oklab, OKLCH) with use-case guidance, not a single preference; browsers support all of them.

**What does 'out of gamut' mean?**

If a LAB or P3 color's values can't be expressed in sRGB, a standard browser on a standard display can't render them faithfully - it has to clip or rescale. The converter shows a badge on the card: 'out of gamut' means the color isn't in sRGB or Display-P3 without clipping - typical for highly saturated Lab values at the edge of XYZ.

**How do I make a complementary color palette?**

In the palette section below, set the mode to 'Complementary'. The function rotates the OKLCH hue by 180° - the clean definition of complementary in a perceptually-uniform space. Triadic rotates by 120°, analogous by ±30°, 'perceptually distinct' uses 30/60/90° hue steps for anchors with similar lightness but different hues.