Color

Hex color code

A color written as a # followed by hexadecimal digits. Each pair of digits sets how much red, green and blue the screen shows, from 00 (none) to FF (full).

Reading a code pair by pair

Take #7C3AED. Drop the # and split the rest into pairs: 7C for red, 3A for green and ED for blue. Each pair is a number in base 16, where the digits run 0 to 9 and then A to F for 10 to 15. So 00 is 0 and FF is 255. Red's 7C is 7 sixteens plus 12, which makes 124. Green and blue work out to 58 and 237, so the same color is rgb(124, 58, 237).

Three channels with 256 steps each give 16.7 million possible colors. When all three pairs match, you get a gray: #808080 is rgb(128, 128, 128), #000000 is black and #FFFFFF is white. Letter case doesn't matter, so #7c3aed and #7C3AED are the same color.

Three, four, six and eight digits

CSS takes four lengths:

  • #RGB: three digits, one per channel. Each digit is written twice, so #F09 means #FF0099.
  • #RGBA: the same, with one more digit for alpha.
  • #RRGGBB: the full six-digit form, fully opaque.
  • #RRGGBBAA: the full form plus a pair for alpha.

Alpha is opacity. 00 is fully transparent and FF is fully opaque, and in CSS the alpha pair comes last. #7C3AEDFF is the same color as #7C3AED, and anything between gives a partly transparent one.

Shorthand only works when both digits in every pair match. #FFCC00 shortens to #FC0, but #7C3AED has no short form. The short and long versions are the identical color, so shortening is only about typing less.

What a hex code can and can't say

A hex code names an sRGB color. CSS describes hex notation as a way to specify an sRGB color, and notes that it's shorter than writing the same color with rgb(). Hex, rgb() and hsl() all resolve to sRGB, so they reach exactly the same colors.

Hex to RGB loses nothing, because each channel is a whole number from 0 to 255 in both. Other formats round. #7C3AED is hsl(262, 83%, 58%) in whole numbers, and converting that back gives #7C3BED, a slightly different code.

A hex code can't describe colors outside sRGB. For a wide gamut screen, CSS has the color() function, which names a color space such as display-p3. And even inside sRGB, the same code can look a little different from one display to the next, because each display turns the numbers into light in its own way.

Work it out yourselfOpen the Color Picker

Sources

Back to the glossary