Dev Channel
Published in

Dev Channel

CSS Hex Colors Demystified


  • I have to deal with CSS hex color coding all the time, but I don’t really get it.
  • I actually know some hex codes and which colors they represent, but I don’t know why.
  • I can sometimes get the color I want by fiddling with the hex, but I don’t understand how that works.
  • Is it wrong to use a color with a rude-sounding hex code like #BADA55?

Colors in CSS

Oh No, Physics!

If you’re too young to get that joke, tough.


Pigment primary colors
Pigment secondary colors
Dark dark dark really dark gray is about as close to black as we’re going to get


Stay with me here; it might get a tad gnarly
Mind officially blown
So light light light really light everything is just white

Back to CSS

Ways to Specify Colors

A Quick Review

Or “ten”
Digits A-F are pronounced, well, like A-F
Hex addition: 9 + 1 = A
Hex addition: F + 1 = 10
Hex counting, 00 to FF
  • 1F = one sixteen and fifteen ones = 16 + 15 = 31 decimal
  • 2B = two sixteens and eleven ones = 32 + 11 = 43 decimal
  • 41 = four sixteens and one one = 64 + 1 = 65 decimal
  • AA = ten sixteens and ten ones = 160 + 10 = 170 decimal
  • F0 = fifteen sixteens and no ones = 240 + 0 = 240 decimal


Hex black, white, and primary colors
Hex secondary colors
Hex primary and secondary half-light shades

Pop Quiz

Practical Examples

Example 1
Example 2
Example 3
Example 4



Some folks get it… some folks don’t

Resources (sites)



Resources (tools)

Integrated with editors/HATs





Developers Channel - the thoughts, opinions and musings from members of the Chrome team.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dave Gash

Dave is a retired technical publications specialist and has been a frequent speaker at User Assistance conferences around the world since 1998.