CSS Colors and Hexadecimal

What it is

CSS has many ways of representing colors, but it is most commonly done with hexadecimal.

Why it matters

Understanding number systems like binary and hexadecimal are valuable because they are central to how a computer actually works. They come up all over the place, especially in the context of computer networks where data has to be serialized into a stream of ones and zeros to be sent across a wire.

We aren't broaching how computers work at the moment, but it makes sense to learn this now because CSS primarily represents colors in hexadecimal. Being able to read hex will make working with colors much easier.

What you'll learn

How binary and hexadecimal work, how computers use numbers to represent information, and how to use them to represent colors in CSS.

How to learn it

In the CSS basics lesson, I explained that there’s no need to memorize specific rules of CSS because you are bound to end up looking them up anyway. There’s one notable exception: the syntax used for representing colors.

If you look at the W3Schools intro to CSS colors, they mention that colors are specified using hexadecimal, but they gloss over what exactly that means. It's worth dwelling on it because hex will come up all over the place.

Hexadecimal is a number system. If you’ve never heard of it, work through the first bit of the Khan Academy lesson on number systems. Pro tip: set the Youtube speed to 2x and you’ll save lots of time.

Do you understand how FF in hexadecimal is the same as 255 in decimal, and 11111111 in binary? What would 128 be in each?

Hexadecimal, decimal and binary are three ways to represent the same number in different number systems. As you're aware, computers internally represent everything in ones and zeros, so understanding binary is particularly important.

A single binary value of 0 or 1 is called a bit. 8 binary digits, representing 0 to 255 (in decimal) is called a byte. Fun trivia: 4 bits, representing 0-15 in decimal or a single hexadecimal digit, is cheekily called a ‘nibble’.

Back to colors

The process of converting information, in our case a color, to a number is called encoding. We encode a color with 3 bytes representing the red, green and blue content respectively.

Armed with this understanding, take another look at W3Schools and learn the three ways of representing a color in CSS.

Red, Green and Blue are mixed in order to represent the final color. Go play with the sliders and get an intuition for how this blending works. How would you represent White? Dark grey? Yellow? Somebody figured out you can spell lots of words with hex codes. What color is #c0ffee?

There’s loads of great tools online for helping you choose hex colors. Google "#700cf4” (the violet color used on Developer Atlas), and go check out cool sites like color-hex.com and colorhexa.com. We’ll discuss color theory later on, but here’s a sneak peek at some useful tools for choosing color palettes.

Encoding

All information in a computer, not just colors, is encoded as a number. Text, for instance, is encoded using unicode, which can represent every symbol from every written language in the world and extras like emojis.

The most common symbols, aka the alphabet, are commonly encoded using ASCII, pronounced "askey." ASCII and unicode are essentially the same thing: ASCII is a subset of unicode. Every character is represented by one byte, aka a number between 0 and 255. “A” is 65 and “B” is (you guessed it) 66. The Youtube channel 'Numberphile' has a nerdy video about unicode if you want more detail.

You could encode the string “hello” into ASCII as "104 101 108 108 111” in decimal, or "01101000 01100101 01101100 01101100 01101111” in binary.

There’s no need to memorize ASCII, but it is good to keep in mind because its guaranteed to come up later. In fact, it already has. One job of an HTML document is to define how the letters on the page are encoded, and will include a line like this:

<meta charset="UTF-8”>

UTF-8 is the character encoding the page will use, and its just another name for unicode.

Binary solo!

Comprehension

• What is binary?
• How would you represent the decimal number 9 in binary? 13?
• There’s only 10 kinds of people, those that understand binary and those who don’t. Get it?
• What is hexadecimal?
• What is 11 in hexadecimal? 33?
• What is the number after F in hexadecimal?
• What is a bit? A byte?
• How does CSS encode colors in hexadecimal?
• What is the hex code for black? light green? Try and guess.
• What color is #0000FF? #CCCCCC? #FF00FF?
• How would you make an HTML tag in red in CSS using the rgb() syntax instead of the hex #FF0000 or word ‘red’?
• What are the 140 colors you can specify in CSS by name? What awful designer chose these?
• What is colorhexa.com?
• What is encoding? What do you think decoding is?
• What is unicode?
• What is ASCII?
• What is UTF-8?

Tasks

On paper, convert the color #E62E50 to the rgb() syntax. Google it to check your work.

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.