◐ Web & Design

Color Converter — HEX, RGB, HSL, OKLCH, Lab

Convert any CSS color between HEX, RGB, HSL, HWB, Lab, LCH, OKLab and OKLCH at once, with gamut warnings and the nearest named color.

10 CSS formats OKLCH & gamut mapping Alpha preserved Nearest named color

Loading Color Converter…

What this page sends

  • Your input: Processed in this tab and not sent to a server.
  • Page load: Loading the page requests HTML, scripts and images from ByteKiln, fonts from Google Fonts, and sends Google Analytics page views, tool-usage events and catalog interactions (tool/category IDs, result status and whether a click followed search — never your input, output or search terms). Privacy & sharing

How the Color Converter — HEX, RGB, HSL, OKLCH, Lab Works

Modern CSS gives you ten ways to write the same color, and design tools, legacy stylesheets and Tailwind's v4 theme don't agree on which one to use. A hex code from a Figma handoff, an rgba() in an old stylesheet and an oklch() in a new design token can all describe the same blue — or subtly different ones, if a conversion rounded badly or clipped an out-of-gamut value. This converter reads any CSS color and writes every other format at once, using the definitions from CSS Color Level 4: Lab and LCH relative to the D50 white point, OKLab and OKLCH using Björn Ottosson's matrices, and sRGB channels to 8 bits. It shows the result on light and dark backgrounds, finds the closest CSS named color by CIEDE2000 distance, and writes a CSS custom property in OKLCH, the format Tailwind CSS v4 uses for its palette. When a color can't be shown on an sRGB screen, you get both the clipped value and a properly gamut-mapped one instead of a silently wrong hex code.

Parsing

Input is normalised (case, whitespace, missing # or 0x prefix) and parsed with culori. When parsing fails, the tool reports the part that is wrong: a hex with 5 digits, a non-hex letter, a misspelled function like rbg(), a function with too few values, or a named color that doesn't exist — with a suggestion when one is close.

Conversion

Every conversion goes through one shared color module, so the converter, contrast checker and shade generator always agree. OKLCH/OKLab and Lab/LCH values are verified in the test suite against the independent coloraide library for 50 random colors, to within 0.001.

Gamut mapping

If the color is outside sRGB, the sRGB formats use CSS Color 4 gamut mapping: chroma is reduced in OKLCH, keeping lightness and hue, until clipping the result changes it by less than a just-noticeable difference (ΔEOK < 0.02). The naive per-channel clip is shown separately for comparison.

Named colors

The nearest of the 148 CSS named colors is found with the CIEDE2000 color difference, which tracks how different two colors look far better than distance in RGB. A ΔE below 0.5 is reported as an exact match.

Limitations

  • Values are rounded for display (hex to 8 bits per channel, OKLCH to three decimals), so converting back and forth can drift by one unit.
  • Out-of-gamut colors are gamut-mapped for the sRGB formats; the hex shown is the nearest displayable color, not the original.
  • Named-color matching uses the 148 CSS named colors only, not Pantone, RAL or Tailwind names.
  • Display P3, Rec. 2020 and other color() spaces are accepted as input where culori supports them, but the output list focuses on sRGB-based CSS formats.

FAQ

Short answers for the things developers usually ask before trusting a tool.

Is the color I enter sent anywhere?

No. Parsing and conversion run in your browser with the culori color library. Nothing you type is uploaded.

Which input formats are accepted?

Hex with 3, 4, 6 or 8 digits (with or without #, or with a 0x prefix), rgb()/rgba() with commas or spaces and percentages, hsl()/hsla(), hwb(), lab(), lch(), oklab(), oklch(), and all CSS named colors. Case and extra whitespace don't matter.

What does "out of sRGB gamut" mean, and which HEX value should I use?

OKLCH, Lab and LCH can describe colors that sRGB screens can't display. For those, HEX, RGB, HSL and HWB show the gamut-mapped value — the CSS Color 4 method, which lowers chroma in OKLCH until the difference is imperceptible. The naively clipped HEX is shown too. The mapped one usually keeps the hue closer to what you intended.

Why does OKLCH show "none" for the hue of a gray?

A gray has no hue. CSS Color 4 writes a missing component as the keyword none, so oklch(0.6 0 none) is exact. HSL and HWB output 0 instead because it's more widely supported in older tooling; the result is the same color.

How precise are the values?

HEX and RGB are exact 8-bit values, HSL and HWB use one decimal, OKLCH uses three decimals for lightness and chroma and two for hue, and Lab/LCH use two decimals. The same precision is used by every ByteKiln color tool, and the math is checked against the Python coloraide library.

How is alpha handled?

Alpha is kept in every format: #RRGGBBAA for HEX, rgb(r g b / a) and the slash syntax for the other functions, and rgba() in the legacy comma form.

Related tools

Useful follow-ups when one conversion usually turns into three more.

web-design

Color Palette

Extract color palettes from images or build them manually. Export to CSS variables, Tailwind config, SCSS, or JSON with WCAG contrast grades.

web-design

Contrast Checker

Check the WCAG 2 contrast ratio of text and background colors for AA and AAA, and get the nearest passing color with the same hue.

web-design

Tailwind Shades

Turn one brand color into a Tailwind 50–950 scale in OKLCH, with contrast against white and black, as Tailwind v4 @theme, v3 config, CSS variables, SCSS or JSON.

Want the background and worked examples? There's a longer write-up.

Read the Color Converter guide

Related guides