BYTETOOLS

CSS Color Format Converter

Turn one colour into every modern CSS syntax at once: hex, rgb, hsl, hwb, lab, lch, oklab, oklch and display-p3, each with its own copy button.

Colour

Preview

#3b82f6
0.1880
OKLCH chroma
0.2038
Max chroma here
Inside
sRGB gamut

Every modern CSS colour syntax

HEX
#3b82f6
Universal support
rgb()
rgb(59 130 246)
CSS Color 4 space-separated syntax
rgb() legacy
rgb(59, 130, 246)
Comma syntax for older tooling
hsl()
hsl(217.22 91.22% 59.8%)
Hue, saturation, lightness
hwb()
hwb(217.22 23.14% 3.53%)
Hue plus whiteness and blackness
lab()
lab(55.632% 17.551 -64.42)
CIELAB, D65 white point
lch()
lch(55.632% 66.768 285.24)
CIELAB in polar form
oklab()
oklab(62.308% -0.0332 -0.1851)
Perceptually uniform Cartesian
oklch()
oklch(62.31% 0.188 259.81)
What Tailwind v4 emits
color(display-p3 …)
color(display-p3 0.3047 0.5035 0.9338)
Same colour, addressed in the wider P3 space
color(srgb …)
color(srgb 0.2314 0.5098 0.9647)
Explicit sRGB coordinates

What is the CSS Color Format Converter?

CSS now has far more ways to write a colour than it used to, and different tools want different ones.

  • Eleven output syntaxes from a single input colour
  • Per-format copy buttons plus a copy-everything option
  • Exact CSS Color 4 matrices, so white converts to lab(100% 0 0)
  • Reports the chroma headroom left before you leave sRGB
  • Accepts hex shorthand, full hex and rgb() triples
  • 100% client-side — colours never leave your machine

How to use the CSS Color Format Converter

  1. 1

    Enter a colour as a hex value or an rgb() triple, or pick one with the swatch.

  2. 2

    Check the preview swatch and the sRGB gamut read-out at the top.

  3. 3

    Scroll the list of syntaxes and press Copy beside whichever one your tool needs.

  4. 4

    Use Copy all formats to grab the whole set as a reference block.

About the CSS Color Format Converter

CSS now has far more ways to write a colour than it used to, and different tools want different ones. Figma exports hex, a design system might store hsl, Tailwind v4 emits oklch, and a wide-gamut photo pipeline wants display-p3. This converter takes one colour and produces every one of those syntaxes side by side.

The conversions go through the proper chain rather than a lookup table: sRGB is linearised, multiplied by the CSS Color 4 matrix into CIE XYZ at the D65 white point, then transformed into Lab, LCH, OKLab, OKLCH or Display P3 as needed. The matrices are the exact ones browsers use, so pure white lands on lab(100% 0 0) rather than something a fraction off.

All the maths happens locally in your browser. Nothing you paste is sent to a server, and the tool keeps working with no connection once the page has loaded.

Frequently asked questions

What is the difference between lab() and oklab() in CSS?

Both are perceptual spaces, but oklab() is a newer model tuned to fix a known weakness in CIELAB: blues shift hue as you change lightness. If you are building a ramp of tints and shades, oklab and oklch will hold the hue steadier. For simple colour matching, either works.

When should I use color(display-p3 …)?

Use it when you want a colour more saturated than sRGB can produce on displays that support it. Note that converting an sRGB colour to display-p3 does not make it more vivid — it is the same colour, addressed in a wider coordinate system.

What is hwb() and why would I use it?

HWB describes a colour as a hue plus how much white and how much black are mixed into it, which is close to how people mix paint. It is often the most intuitive syntax for hand-tuning tints and shades of a single hue.

Are these CSS color functions safe to use in production?

hex, rgb and hsl are universally supported. hwb, lab, lch, oklab and oklch have been supported across current Chrome, Edge, Safari and Firefox since 2023. If you need to support older browsers, put the hex value first as a fallback declaration.

Why do rgb(59 130 246) and rgb(59, 130, 246) both appear?

CSS Color 4 introduced the space-separated form, and every current browser accepts it. The comma form is still valid and is what a lot of older tooling and preprocessors expect, so both are offered.

Related tools