0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
Configuration
Convert colors between all formats: HEX, RGB, HSL, HWB, HSV, LAB, LCH, OKLab, OKLCh, XYZ D50/D65, Display P3, A98, ProPhoto, Rec. 2020, and CMYK. Includes an interactive visual selector.
#3b82f6
HEX, rgb(), hsl(), oklch(), color(), etc.
Results
Basic
#RRGGBB
#RRGGBBAA
rgb(r g b)
CSS Level 3
hsl(h s% l%)
CSS Level 4
hwb(h w% b%)
lab(l a b)
lch(l c h)
oklab(l a b)
oklch(l c h)
color(xyz-d50 x y z)
color(xyz-d65 x y z)
color()
color(display-p3 r g b)
color(a98-rgb r g b)
color(prophoto-rgb r g b)
color(rec2020 r g b)
Other
hsv(h s% v%)
Printing
cmyk(c% m% y% k%)

How it works

The same color can be written in many ways. HEX (#RRGGBB) and RGB describe the mix of red, green, and blue; HSL and HSV describe it by hue, saturation, and lightness, more intuitive for choosing variants; and CMYK targets printing.

This tool takes a color in HEX, RGB, or HSL and instantly translates it to all formats, including modern CSS Level 4 spaces such as HWB, LAB, LCH, OKLab, OKLCh, and the color() functions (Display P3, Rec. 2020, ProPhoto).

The visual picker and the numeric controls let you adjust the color and see how all values change simultaneously. Everything is computed in your browser.

Examples

#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)Pure red: maximum in the red channel, zero in green and blue.
#3b82f6rgb(59 130 246)Each pair of hexadecimal digits (3b, 82, f6) is the 0-255 value of a channel: 59, 130, and 246.
#ffffffrgb(255 255 255) · hsl(0 0% 100%)White has all three channels at maximum; in HSL, lightness 100%.

Use cases

  • Convert a design guide's HEX color to the RGB or HSL format your CSS or framework requires.
  • Get the CMYK equivalent of a screen color to prepare a print material.
  • Explore modern color spaces (OKLCh, Display P3) when tuning a wide-gamut palette.

Frequently asked questions

What is the alpha channel and how is it written in HEX?

Alpha is the opacity, from 0 (transparent) to 100%. In HEX it is added as a pair of digits at the end: #RRGGBBAA. For example, #ff000080 is red at 50% opacity.

What is the difference between HSL and HSV?

Both use hue and saturation, but the third axis differs: HSL uses lightness (where 100% is white) and HSV uses value or brightness (where 100% is the most intense color). HSL is usually more convenient for generating tints and shades.

Why do OKLab and OKLCh exist?

They are perceptually uniform spaces: equal distances between values correspond to similar visual differences. They produce more natural gradients and lightness adjustments than HSL, and CSS supports them since Level 4.

Is the CMYK it shows accurate for printing?

It is an approximate reference conversion. The actual printing result depends on the color profile, the ink, and the paper, so for professional work it is best to use the print shop's ICC profile.

See also