0xCONVERTER-HEX

Three bytes, one color

Hex Color Converter

Enter a hex color and read it back as RGB, HSL, individual channels and a contrast ratio.

Hex color in
Or pick

Hex

—

RGB

—

HSL

—

Channels

—

Contrast

—

How a hex color is built

A hex color is three bytes wearing a disguise. Split #1A73E8 into pairs and each pair is one color channel, from 00 (none of that color) to FF (all of it).

#1A73E8
  ┌─┴─┴─ blue   E8 = 232
  │ └── green  73 = 115
  └─── red    1A =  26

  rgb(26, 115, 232)

There is a fuller walkthrough in how hex color codes work. Each channel holds 256 levels, so three channels give 256 × 256 × 256, or 16,777,216 possible colors. That is where "16.7 million colors" and "24-bit color" come from — they are the same fact stated two ways.

Three, six and eight digits

All three forms are valid CSS and all three appear in real stylesheets.

FormExampleMeansColors available
3-digit#1A9Each digit doubled: #11AA994,096
6-digit#1A73E8One byte per channel16,777,216
8-digit#1A73E880Six digits plus alpha16.7M × 256 opacity levels
Why shorthand only works sometimes

#1A9 expands to #11AA99, not #1A0900. Each digit is doubled, so shorthand can only express colors where both digits of every channel match. #1A73E8 has no shorthand form.

Reading a hex color without a tool

You can estimate any hex color by eye once you know two things: the first digit of a pair carries most of the weight, and equal pairs mean grey.

  • Equal channels are grey. #000000 is black, #FFFFFF white, #808080 mid grey. Any #XXXXXX with three identical pairs has no color at all.
  • The largest pair names the hue. If red is highest the color leans warm; if blue is highest it leans cool.
  • All pairs high means pale, all low means dark. #FFDDDD is a pale pink; #330000 is a very dark red.
  • A missing channel saturates. #FF0000 is pure red because green and blue contribute nothing.

Landmark colors

HexRGBColor
#0000000, 0, 0Black
#FFFFFF255, 255, 255White
#808080128, 128, 128Mid grey
#FF0000255, 0, 0Pure red
#00FF000, 255, 0Pure green
#0000FF0, 0, 255Pure blue
#FFFF00255, 255, 0Yellow — red plus green
#00FFFF0, 255, 255Cyan — green plus blue
#FF00FF255, 0, 255Magenta — red plus blue

The last three are worth internalising. Screens mix light, not paint, so red and green make yellow rather than brown. Every secondary color on a display is two channels at full strength.

Contrast, and why the tool reports it

The contrast ratio above compares your color against black and white and reports the better of the two. It follows the WCAG 2.1 formula, which weights the green channel most heavily because human vision is most sensitive to it.

RatioMeetsApplies to
3.0:1AA large text18pt, or 14pt bold and above
4.5:1AA normal textBody copy — the usual target
7.0:1AAA normal textEnhanced accessibility

A color that looks perfectly readable to you can still fail. Pure yellow on white is 1.07:1 and essentially invisible to many people, despite appearing bright.

Alpha, and the eighth and ninth digits

Eight-digit hex adds an alpha pair: 00 fully transparent, FF fully opaque, 80 roughly half. It is supported in every current browser, and it is more compact than rgba() for the same result.

One caveat: alpha changes what the color looks like over its background, so the contrast ratio of a semi-transparent color depends on what sits behind it. The figure above assumes full opacity.

Frequently asked questions

What is a hex color code?

A six-digit hexadecimal number where each pair of digits sets one color channel: red, green then blue, each from 00 to FF.

What does #FFFFFF mean?

White. All three channels are at their maximum of 255, so the screen emits full red, green and blue light.

What is the difference between 3-digit and 6-digit hex?

The 3-digit form doubles each digit, so #1A9 means #11AA99. It can only express colors where both digits of every channel match.

What do the last two digits of an 8-digit hex color do?

They set alpha, or opacity. 00 is fully transparent and FF is fully opaque.

How many colors can hex represent?

16,777,216 with six digits. That is 256 levels for each of three channels, which is what 24-bit color means.

Why does my color fail a contrast check?

Contrast depends on luminance, not brightness as you perceive it. Yellow looks bright but has very little contrast against white.

Hex to RGBSplit hex into channelsRGB to HexPack channels into hexHex to HSLHue, saturation and lightnessColor PickerPick visually, read the codeColor ChartNamed colors and their codesHow hex colors workThe full explanation