Color Converter — HEX, RGB, HSL & OKLCH

What Is a Color Converter?

// sRGB → linear → XYZ D65 → OKLAB → OKLCH
// References: W3C CSS Color 4 §11-15, Ottosson 2020 (https://bottosson.github.io/posts/oklab/)
// Worked example: #3b82f6 (Tailwind blue-500)

const srgb = [0x3b, 0x82, 0xf6].map(v => v / 255); // [0.231, 0.510, 0.965]

const toLinear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const lin = srgb.map(toLinear); // gamma-decoded linear-sRGB

// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const [lr, lg, lb] = lin;
const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;

// XYZ D65 → LMS (Ottosson 2020 matrix), cube-root, → OKLAB
const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;

// OKLAB → OKLCH (Cartesian to polar)
const C = Math.sqrt(a * a + b * b);
const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
console.log(`oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`);
// → oklch(0.629 0.193 263.4)

Key Features

Color Converter Alternatives Compared

Color Conversion Examples

#3b82f6

#FF5733

#FF6347

oklch(0.7 0.25 30)

#767676

#FF6347

hsl(220 70% 50%)

#3b82f6

How to Use the Color Converter

1. 1

   Paste or type any color in any format

   Every one of the 9 format fields (HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, OKLAB, Named) is directly editable — there is no "Convert" button to click. Paste a hex from Figma, type an `oklch()` value from a Tailwind config, drop in a `hsl()` from an old stylesheet, or even type a CSS named color like `tomato`. The tool parses incrementally as you type, so a half-typed value won't blow away the others until you commit a valid format. Invalid input gets a quiet inline error; valid input updates the entire grid.

2. 2

   All 9 formats update instantly

   The internal source of truth is OKLCH (perceptually uniform, gamut-unbounded), and every other format is derived from it on every keystroke. The field you're currently typing in keeps its cursor position untouched — only the *other* eight fields re-render. This means you can edit the L channel of OKLCH directly and watch hex, RGB, HSL, and CMYK all shift in real time without losing your cursor. The conversion math runs entirely in JavaScript using the same OKLAB primitives that ship in modern browsers.

3. 3

   Use the picker for visual exploration

   Below the format grid is a saturation-lightness square (drag anywhere to set S+L for the current hue), a hue slider (drag to rotate around the color wheel), and an alpha slider (drag to set transparency). On Chromium-based browsers (Chrome, Edge, Brave) the **Eyedropper** button activates the native `EyeDropper` API — click anywhere on screen, including outside the browser window, to sample that pixel's color. Safari and Firefox don't yet ship the API, so the button is hidden in those browsers and the SL square + hue slider remain the primary picker.

4. 4

   Check gamut and contrast at a glance

   Three gamut badges (**sRGB**, **Display P3**, **Rec.2020**) show whether the current color falls inside each space's reproducible range — useful when you're working in OKLCH and want to know which displays will render the value accurately. The contrast row shows the WCAG 2.1 ratio against both white and black, plus the APCA Lc score (forward-looking WCAG 3 metric). Pass / fail badges (AA, AAA) appear inline. If a color is out of sRGB gamut, a **Snap to sRGB** button shrinks the chroma until it fits.

5. 5

   Copy in your platform's native syntax

   Each of the 9 format fields has its own **Copy** button — one click, the value lands on your clipboard, the label briefly switches to "Copied!" so you know. Below the picker the **Copy as code** section generates ready-to-paste snippets for five platforms: CSS custom property, Tailwind v4 `@theme` token, SwiftUI `Color(red:green:blue:)` literal, Jetpack Compose `Color(0xFF...)` constant, and Flutter `Color(0xFF...)`. The URL hash (`#hex=...` or `#oklch=...`) also updates so you can share a live link to the exact color.

Common Color-Conversion Mistakes

Assume an HSL palette is perceptually uniform:
hsl(220 50% 30%) → hsl(220 50% 60%) → hsl(220 50% 90%)
On screen these look unevenly spaced.

Use OKLCH for perceptually-uniform ramps:
oklch(0.30 0.10 220) → oklch(0.60 0.10 220) → oklch(0.90 0.10 220)
On screen these look evenly spaced.

Send our CMYK output directly to a press:
hex #FF6347 → cmyk(0%, 61%, 72%, 0%)
Printed result may look muddy or oversaturated.

Send the original hex to the print provider:
hex #FF6347 → let printer ICC-convert against their press
Printed result matches the screen color much more closely.

Pretend Lc 60 = WCAG 4.5:1:
APCA Lc 60 → "this passes AA"
WCAG 2 ratio for the same pair might be 3.8:1 (fails AA).

Check both metrics independently:
WCAG 2 ratio ≥ 4.5:1 for AA body text compliance, AND
APCA |Lc| ≥ 75 for real-world readability.
Both must pass, not one substituting for the other.

Step HSL L for shades:
hsl(220 50% 30%) / hsl(220 50% 60%) / hsl(220 50% 90%)
90% looks washed out; 30% looks much darker than the gap to 60%.

Step OKLCH L for shades:
oklch(0.30 0.10 220) / oklch(0.60 0.10 220) / oklch(0.90 0.10 220)
Each step looks like the same visual gap.

Copy 8-digit hex into a legacy parser:
#FF573380 → parser truncates → #FF5733 (no alpha)
The 50% transparency is silently lost.

Verify target supports 8-digit hex, or use rgba():
for modern CSS: #FF573380 (8-digit hex)
for legacy support: rgba(255, 87, 51, 0.5) (always supported)
Explicit alpha syntax avoids silent truncation.

Snap every OKLCH color to sRGB by default:
oklch(0.7 0.25 30) → snap → oklch(0.7 0.18 30)
P3 displays lose 30%+ saturation for no reason.

Check Display P3 badge first:
if fits-P3: keep the wide-gamut value, add sRGB fallback via @supports
if exceeds P3: then snap to sRGB
Let the wide-gamut hardware do its job.

Who Uses This Tool

Frontend Devs Migrating to Tailwind v4 OKLCH Tokens

Tailwind v4 standardized on OKLCH for its default palette in 2024. Migrating an old HSL- or hex-based design system means converting hundreds of brand colors to OKLCH. Paste each hex, copy the OKLCH output, drop into the `@theme` block. The live gamut badges flag any colors that exceed sRGB so you can decide whether to keep the wider-gamut value for Display P3 displays.

Designers Translating Figma Colors to iOS / Android

Figma exports hex by default, but iOS wants SwiftUI `Color(red:green:blue:)` literals and Android wants Jetpack Compose `Color(0xFF...)` constants. Paste the Figma hex once, copy the SwiftUI snippet for the iOS engineer and the Compose snippet for the Android engineer — both already in the exact syntax each platform expects, with the original hex preserved in a comment for traceability.

Designers Prepping Print Proofs (CMYK Approximation)

When a brand color has to appear on a printed business card, the CMYK approximation gives a quick estimate to share with the print shop before the proper ICC conversion. Paste the brand hex, copy the CMYK percentages, send to the printer for a quick price quote — then defer to the printer's ICC-profile-aware conversion for the final color match against the specific press.

Accessibility Engineers Verifying WCAG and APCA

WCAG 2.1 is the regulatory standard (ADA, EAA, Section 508) today; APCA Lc is the proposed WCAG 3 successor. Both metrics shown side by side means a designer can verify a body-text color hits 4.5:1 WCAG against white, then sanity-check that it also clears APCA Lc 75, in one screen — without bouncing between two separate calculators.

Educators Teaching Color-Space Concepts

The simultaneous nine-field view makes color-space relationships visible. Type an OKLCH value, watch HSL drift because L means different things in each space. Drag the hue slider and watch hex, RGB, and CMYK all update. Show the gamut badges turning red as you push chroma past sRGB. The tool is its own classroom demo for a college-level graphics or HCI course.

Brand Managers Finding the Closest CSS Named Color

When the marketing copy says "a tomato-colored accent" but the actual brand hex is `#FF6347`, the Named field returns `tomato (exact)` because that's literally what `tomato` resolves to in the CSS spec. For near-miss hexes, the field returns the closest named color with the ΔE distance in OKLAB — useful for documentation, prose, and casual color-naming.

Web Devs Converting Legacy HEX Palettes to OKLCH

An older site might have a 50-color brand palette defined in CSS custom properties as hex codes. Modernizing to OKLCH lets the brand team express the same ramps in a perceptually-uniform space. Paste each hex, copy the OKLCH output, swap into the variable definitions. The Tints/Shades panel below verifies the resulting ramp is visually even before shipping.

Open-Source Maintainers Documenting Design Tokens

Design-token documentation usually needs to show the same color in multiple syntaxes — hex for the CSS code block, OKLCH for the spec table, the named color for prose mentions. The simultaneous-field view lets a maintainer copy each in one pass instead of re-running three separate conversions. The shareable URL hash also lets contributors link to the exact color under discussion in a GitHub issue.

Color Conversion Math & Algorithms

OKLCH as Internal Source-of-Truth

The tool holds the canonical color value as an OKLCH triple internally. Every editable field derives its display value from that triple on every keystroke; every user edit updates the triple first, then triggers re-render of the other eight fields. This eliminates the per-step float drift that plagues converters routing through HSL or sRGB as their pivot. The choice of OKLCH over OKLAB is deliberate — the polar form preserves Hue as a stable axis, so dragging the hue slider doesn't accidentally cross-fade through gray. Per Björn Ottosson's 2020 paper, OKLAB's perceptual uniformity is the strongest argument for treating it as the lingua franca of modern color math.

Matrix Sources (W3C CSS Color 4 + Ottosson 2020)

Every conversion matrix in the codebase is cited to its primary source. The sRGB ↔ linear-sRGB piecewise gamma function is W3C CSS Color 4 §11.2 (`v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4`). The linear-sRGB ↔ CIE XYZ D65 3×3 matrix is CSS Color 4 §15.1. The XYZ D65 ↔ LMS matrix and the OKLAB cube-root step are from Ottosson's `https://bottosson.github.io/posts/oklab/` reference implementation, exactly as published. No matrices are recomputed or re-derived — copying them verbatim keeps the output identical to the spec's reference vectors.

Naive CMYK Formula and the ICC Caveat

Our CMYK output uses the standard textbook formula: `K = 1 - max(R, G, B); C = (1-R-K)/(1-K); M = (1-G-K)/(1-K); Y = (1-B-K)/(1-K)` operating on normalized sRGB values. This is a deliberate approximation. Real print accuracy requires an ICC profile conversion against the specific press, ink (e.g., US Web Coated SWOP v2, Fogra39, Japan Color 2011), and paper, which can shift channels by 5-15%. We surface the CMYK field with a visible disclaimer so users don't ship our values directly to a press. Treat the output as a sanity check for quotes, not a deliverable.

Gamut Detection via Channel-Range Check

A color is considered in-gamut for a target space (sRGB, Display P3, Rec.2020) if every channel falls inside `[-ε, 1 + ε]` after conversion to that space's primaries, where `ε = 1e-7` to absorb float-precision noise around boundaries. The gamut badge for each space turns red when any channel exceeds the range. This catches the common case — a wide-gamut OKLCH color like `oklch(0.7 0.4 30)` reports out-of-sRGB but in-P3, telling you which displays will render it accurately. The check runs on every keystroke.

Chroma-Reduction Snap Algorithm

Snap to sRGB uses binary search on the Chroma axis: hold L and H fixed at the current values, search C ∈ [0, currentC] for the largest C whose sRGB conversion stays in-gamut. The search runs at most 30 iterations (precision ~10⁻⁹), which is more than enough for visual accuracy. This matches the informative gamut-mapping algorithm described in CSS Color 4 §13 — preserving lightness and hue while reducing only chroma keeps the snapped color recognizably the same hue family. We don't clip RGB channels directly because that distorts hue noticeably (especially in blues).

Brettel + Machado CVD Matrices

Color-blindness simulation uses two published matrix families. The three dichromacies — protanopia, deuteranopia, tritanopia — use Brettel-Viénot-Mollon 1997 matrices operating in linear-RGB (gamma-decode first, apply matrix, gamma-encode back). The three anomalous trichromacies — protanomaly, deuteranomaly, tritanomaly — use Machado-Oliveira-Fernandes 2009 matrices at severity 0.66, which corresponds to a typical anomalous-trichromacy patient. Achromatopsia and partial achromatomaly use rec601 luminance weights (`0.299R + 0.587G + 0.114B`) for a grayscale projection. All eight simulations render on every color change.

WCAG 2 vs APCA: Which to Use When

WCAG 2.x (current standard) computes a symmetric contrast ratio from relative luminance: `(L1 + 0.05) / (L2 + 0.05)`, target 4.5:1 for normal body text and 7:1 for AAA. It's the legal compliance floor for accessibility audits in 2026. APCA (Accessible Perceptual Contrast Algorithm) is the proposed WCAG 3 successor — polarity-sensitive (light-on-dark scores differently from dark-on-light), better correlated with human-perceived readability, target `|Lc| ≥ 75` for body text. Both metrics shown in one row lets a designer hit WCAG 2 for compliance and APCA for real-world readability without bouncing between two separate calculators.

Best Practices for Color Conversion

Prefer OKLCH for Design-System Tokens; HEX for Legacy

For any new design system shipping in 2025 or later, define brand colors and palette ramps in OKLCH. The L axis gives perceptually-even ramps automatically; the Chroma axis can address wide-gamut colors that hex can't encode. Keep a hex fallback for older browsers via `@supports not (color: oklch(0 0 0))` or build-time PostCSS, but make OKLCH the canonical value in your token store. Legacy systems with thousands of existing hex variables can stay hex until a planned migration — don't churn for its own sake.

Treat CMYK Output as Approximation, Confirm With Print Provider

The CMYK numbers this tool surfaces are a naive sRGB-based formula, not an ICC-profile conversion. Use them for ballpark quotes and internal comps. Before any real print run, send the original hex (not the CMYK approximation) to the print provider and let them run their own ICC conversion against the specific press, ink, and paper. The 5-15% channel shift from a proper conversion can easily turn a sharp red into a muddy orange if the approximation is shipped directly.

Use APCA Lc for Forward-Looking Accessibility

WCAG 2.x will continue to be the regulatory floor for several more years, but APCA is the direction the standard is moving. For new designs, hit `|Lc| ≥ 75` for body text and `|Lc| ≥ 60` for large text alongside the WCAG 2.1 floors. APCA catches readability problems that WCAG 2's symmetric ratio misses — particularly thin-stroke text on bright backgrounds, where the WCAG ratio looks fine but the text actually disappears at normal reading distance.

Run Wide-Gamut Colors Through Display P3 Gamut Check

If you're targeting modern Apple hardware (iPhone, iPad, MacBook from 2017+) or shipping HDR-aware content, define brand colors in OKLCH and use the Display P3 badge to verify they fit P3 even if they exceed sRGB. The wider-gamut colors look noticeably more saturated on P3 displays and degrade gracefully via browser-applied chroma compression on sRGB-only screens. Don't pre-snap to sRGB unless you know your entire audience is on legacy displays.

Pick Perceptually Uniform Shades via OKLCH Tones

When generating a 50/100/200/.../900 ramp for a brand color, use the Tones panel: it steps L in equal increments while holding C and H fixed. The result is a perceptually-even ramp where the visual gap between 400 and 500 looks identical to the gap between 500 and 600. Hand-tuning HSL ramps for the same evenness is a multi-hour exercise per color; OKLCH gives it for free.

Use the Eyedropper Sparingly for Cross-Tab Color Matching

The EyeDropper API (Chromium-only as of 2026) lets you click anywhere on screen — including outside the browser — to sample that pixel's color. Useful for matching a color from a screenshot, a video frame, or another app's UI. Treat the result as a starting point, not the final value — screen rendering applies color management that may differ from the source file. For canonical brand colors, always get the hex from the design source (Figma, Sketch, the brand guidelines PDF) rather than eyedroppering a screenshot.

Bookmark URLs With `#hex=...` for Shareable Palette Decisions

The current color encodes into the URL hash as `#hex=...` or `#oklch=...` automatically. Copy the URL, paste into a Slack thread or a GitHub issue, and anyone who opens it lands on the exact same color. Useful for design-review threads where "the brand blue" needs to mean one specific OKLCH triple. The hash updates on every change, so the URL in your address bar is always the live current color — bookmark it to come back to a specific palette later.

Frequently Asked Questions