Skip to main content
Ink·tab
←all tools

hex · rgb · oklch · lab · display-p3

See one color in six formats at once — or paste a CSS file to migrate to Tailwind v4 oklch.

Mode
OKLCH decimals
  • HEX
  • RGB
  • HSL
  • OKLCH
  • LAB
  • display-p3

Everything happens in your browser. Nothing is uploaded.

When you'd use this

Moving a Figma hex into Tailwind v4 oklch(), batch-converting a bundle of design tokens, or flattening a foreign design system's lab/p3 notation back to plain sRGB.

Three modes

  • Single — Shows one color in six formats simultaneously: hex / rgb / hsl / oklch / lab / display-p3. Click any cell to copy.
  • Batch — Paste arbitrary text or a full CSS file. The tool finds every color token via regex and lays them out in a table. Up to 200 per paste.
  • Tailwind v4 — Take a Tailwind v3 config or --color-* CSS declarations and migrate them to oklch(). You get two outputs — inline replacement preserving the original structure, and a separate @theme { } block in the v4-recommended form.

Why OKLCH

It's the CSS Color 4 standard, Tailwind v4's default color space, and — most importantly — has perceptually uniform hue rotation. RGB / HSL hue gaps differ across the wheel, which is why lightening or darkening creates muddy mid-tones. An OKLCH 11-stop scale stays even.

Out-of-sRGB colors

OKLCH and Lab cover the human-visible gamut, which is wider than sRGB. Some colors only exist accurately in display-p3 (P3). In that case:

  • The HEX output is a chroma-clamped sRGB approximation (usually visually close).
  • The P3 RGB column shows the true value.
  • An "Out of sRGB" badge appears.

Modern Macs, iPhones, and iPads with wide-gamut displays show the difference. Most PC monitors are sRGB-only and look identical either way.

Local processing

culori (already used by color-palette and contrast) handles every conversion in the browser. Batch-mode token extraction is also a client-side regex pass. Zero additional dependency cost.

When this isn't the right tool

  • Pantone codes — Pantone data is licensed and not supported here. For print color, use an RGB↔CMYK tool (separate) or your print shop's ICC profile.
  • CMYK conversion — This tool handles screen color spaces only (sRGB / oklch / p3). CMYK requires an ICC print profile and is planned as a separate tool.
  • Other Tailwind v4 changes — Beyond theme.colors → @theme variables, corePlugins and darkMode config also change between v3 and v4. This tool only handles colors.

Color tokens stay on the page

hex · rgb · hsl · oklch · lab · display-p3 conversion all run on culori client-side math. Pasting a full CSS file or Tailwind config only extracts color tokens via regex — nothing is sent to a server.

Frequently asked questions

Why convert to OKLCH?
Tailwind v4 defaults to OKLCH and CSS Color 4 promoted oklch() to a standard. RGB/HSL hue ramps aren't perceptually uniform, which is what causes muddy mid-tones when you lighten or darken — OKLCH avoids that.
How does the Tailwind v3 → v4 migration work?
Paste a CSS file or v3 config. The tool finds --color-* declarations or colors-object hex/rgb tokens via regex and replaces them with oklch(). You get two outputs — the original structure with inline replacements, and a separate @theme '{ }' block in the v4-recommended form. Indentation and comments are preserved.
What does 'out of sRGB' mean?
OKLCH and Lab cover human-visible color, which is wider than sRGB. Some colors are only reachable in display-p3. When that happens, the hex output is a chroma-clamped sRGB approximation, while the P3 RGB column shows the true value. Wide-gamut displays (modern Macs, iPhones) reveal the difference.
How many colors does batch mode handle?
Up to 200 tokens are extracted per paste. Even a 100KB CSS file is fine because only color tokens are scanned. Everything runs in the browser; nothing is sent to a server.