liveBook · Manning

Hexadecimal number

As explained in Web Design Playground, Second Edition

A hexadecimal number is a numeral written in base 16 using digits 0 through 9 and letters A through F.

A hexadecimal number is written in base 16. It uses 0–9 for the first ten values and A–F for 10–15—six extra symbols, because apparently ten digits were not enough. section 17.4

Read hexadecimal place values like this:

  • A two-digit hexadecimal number has a sixteens place on the left and a ones place on the right. section 17.4
  • Hex 10 means one sixteen and zero ones, so it equals decimal 16. section 17.4
  • Hex 5C means five sixteens plus C, or twelve, ones: 5 × 16 + 12 = 92 decimal. section 17.4

Hexadecimal becomes especially useful in CSS color codes. An RGB hex code begins with # and gives two-digit hexadecimal values for red, green, and blue: #rrggbb. Each component ranges from 00 to ff. section 17.5

Purple in CSS

The decimal value 128 equals hexadecimal 80, so equal red and blue components with no green produce purple: h1 { color: #800080; }. The shorter form #36c is equivalent to #3366cc because each component repeats its character. section 17.5

Figure 17.9 You can specify a color by using the code #rrggbb, where rr is the hex value for the red component, gg is the hex value for the green component, and bb is the hex value for the blue component.

Visualizes the #rrggbb structure by assigning hexadecimal pairs to the red, green, and blue components. section 17.5

How Web Design Playground, Second Edition covers it

How deep it goes
Explains base-16 symbols, two-digit place values, conversions, RGB structure, alpha notation, and shorthand without pursuing broader number-system theory.
Examples
Uses 10 hex, 5C hex, purple #800080, common color codes, and shorthand #3366cc/#36c.
What it assumes
Assumes familiarity with ordinary decimal numbers and introduces hexadecimal symbols and place values before applying them to CSS.
What you can do after
Apply hexadecimal values to write CSS RGB color codes and recognize equivalent three-digit shorthand.
How it connects
Connects hexadecimal numbers with CSS colors, RGB, HSL, alpha channels, and color chooser tools.

Also explained in

Compare how 5 books explain hexadecimal number →

Related concepts

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