liveBook · Manning

Hexadecimal color notation

As explained in CSS in Depth, Second Edition

Hex color notation is a CSS color notation that encodes color components using hexadecimal digits, optionally including an alpha component.

Hexadecimal color notation gives CSS a compact way to specify a color. A six-digit value contains pairs of red, green, and blue components. Each pair ranges from 00 to FF; hexadecimal uses A–F for values ten through fifteen. section 11.2.2

Read the digits in pairs

#80c090 means 80 red, c0 green, and 90 blue—128, 192, and 144 in decimal. An eight-digit value adds an alpha pair: #80c09088 is semitransparent, with alpha ranging from 00 (fully transparent) to FF (fully opaque). Three-digit shorthand doubles each digit, so #c90 equals #cc9900; four-digit shorthand also includes alpha. section 11.2.2

aside {
  background-color: #333333;     #1
  background-color: #333333aa;         #2
}

The aside first receives an opaque background, then an eight-digit color with partial transparency. A browser that understands both uses the later declaration; one that does not understand eight-digit hex ignores it and keeps the opaque fallback. section 1.5.1

Hex is concise, but a value such as #076448 is difficult to identify by sight. Like rgb(), it represents only colors in the sRGB gamut, not the wider range available through newer color notations. section 11.2.1 section 11.2.2

How CSS in Depth, Second Edition covers it

How deep it goes
Defines component ranges, alpha, shorthand, and fallback behavior; identifies rather than resolves the notation’s wider-gamut limitation.
Examples
Uses #80c090 for component decoding, #c90 for shorthand, and paired aside backgrounds for an eight-digit fallback.
What it assumes
Assumes familiarity with CSS declarations but explains hexadecimal digits and their color-component meanings from the beginning.
What you can do after
Operate/configure CSS colors by reading hex components, using alpha or shorthand, and placing a fallback before an eight-digit value.
How it connects
Connects hex notation to RGB, alpha transparency, the cascade, progressive enhancement, and the sRGB gamut.

Also explained in

Compare how 4 books explain hexadecimal color notation →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.