Color converter

How do you write a color as HEX, RGB or HSL?

Pick or type any color and copy it as HEX, RGB, HSL, HWB or OKLCH, with its nearest CSS name.

Color

A name, hex, rgb(), hsl(), hwb() or oklch(), as in CSS.

HEX

#2563eb

Closest CSS color name: royalblue (#4169e1).

The same color in other formats

RGB: rgb(37 99 235)
HSL: hsl(221.2 83.2% 53.3%)
HWB: hwb(221.2 14.5% 7.8%)
OKLCH: oklch(54.61% 0.2152 262.88)

Tints and shades

Lightness 95%: #e6efff
Lightness 85%: #b4ceff
Lightness 75%: #82adff
Lightness 65%: #4f89ff
Lightness 55%: #2664ec
Lightness 45%: #0543ca
Lightness 35%: #002b93
Lightness 25%: #00185c
Lightness 15%: #00062a

How to use

Type a color in any CSS form, such as tomato, #1a73e8, rgb(26 115 232) or oklch(60% 0.2 260), or tap the swatch to pick one.
Copy the format you need. HEX is shown first, with RGB, HSL, HWB and OKLCH below it.
Use the row of tints and shades to find lighter and darker versions of the same color.

Common CSS colours in HEX and RGB

CSS name	HEX	RGB
black	#000000	rgb(0 0 0)
white	#ffffff	rgb(255 255 255)
red	#ff0000	rgb(255 0 0)
lime	#00ff00	rgb(0 255 0)
blue	#0000ff	rgb(0 0 255)
yellow	#ffff00	rgb(255 255 0)

How it works

A screen makes a color by mixing red, green and blue light. RGB and HEX write that mix directly: HEX is the same three amounts in base 16, so #1a73e8 means red 26, green 115, blue 232. HSL and HWB describe the same color the way people think of it, as a hue on the color wheel plus how pale, dark or gray it is.

OKLCH is a newer description in which lightness is close to what the eye sees: two colors with the same lightness look equally light, which sRGB-based HSL does not guarantee (CSS Color Module Level 4; Ottosson, 2020). The tints and shades keep the hue and the chroma and change only the OKLCH lightness, so the row looks evenly stepped. Where a color cannot be shown at that lightness, the chroma is lowered until it fits.

The nearest CSS name is the one of the 148 named colors with the smallest difference in OKLab, a space built so that equal distances look equally different. A color given outside the ordinary screen range (sRGB) is shown as the closest color that fits.

Frequently asked questions

What does the 8-digit hex code mean?

The last two digits are the opacity, from 00 (invisible) to ff (solid). A color with less than full opacity is written with them, and its swatch sits over a checkerboard.

Why can two colors with the same HSL lightness look different?

HSL lightness is a calculation on the screen's red, green and blue values, not on how bright a color looks. Yellow looks much lighter than blue at the same HSL lightness, which is why OKLCH is used for the shades.

Which format should I use in CSS?

Any of them works in current browsers. HEX is the most common and shortest, HSL is easy to adjust by hand, and OKLCH is best for building evenly stepped palettes and can show colors beyond sRGB on wide-gamut screens.

Does the nearest CSS name exactly match my colour?

Not always. The tool distinguishes an exact match from the nearest named colour.

Can it convert paint colours or ICC profiles?

No. It works with CSS colours, not physical paint systems or ICC colour profiles.

More in Web & developer

All 18 utilities in Web & developer