0.5.1 Hexadecimal Web Colors

Hexadecimal Can Represent Color

You have already used hexadecimal as a compact way to represent binary values.

Web pages provide a familiar place where hexadecimal appears visually: color values.

A hexadecimal web color commonly uses six hexadecimal digits after a # symbol.

For example:

#3366CC

The six digits are grouped into three pairs:

33 66 CC

Those pairs represent the red, green, and blue parts of the color.

RGB Means Red, Green, and Blue

Screens create many colors by combining different amounts of:

• red;
• green;
• blue.

A six-digit hexadecimal color can be read as:

#RRGGBB

where:

• RR controls red;
• GG controls green;
• BB controls blue.

Each pair ranges from hexadecimal:

00

through:

FF

That corresponds to decimal values from 0 through 255.

00 Means None of That Color Component

Consider:

#000000

The groups are:

Red   = 00
Green = 00
Blue  = 00

With all three components at zero, the result is black.

Now consider:

#FFFFFF

Each component is at its maximum hexadecimal value:

FF

The result is white.

Pure Red, Green, and Blue

A strong red value can be represented as:

#FF0000

That means:

Red   = FF
Green = 00
Blue  = 00

A strong green:

#00FF00

A strong blue:

#0000FF

The position of the hexadecimal pair matters.

The same symbols in a different position describe a different mixture.

Mixed Values Produce New Colors

Consider:

#FFFF00

The color contains maximum red and maximum green, with no blue.

That produces yellow.

Another example:

#00FFFF

contains green and blue at maximum values.

That produces cyan.

The goal is not to memorize a huge color chart.

The important idea is that one written hexadecimal value encodes three numeric color components.

Connect Each Pair to Binary

Because one hexadecimal digit corresponds to four bits, one two-digit color component corresponds to eight bits.

For example:

FF

maps to:

11111111

and:

00

maps to:

00000000

So:

#FF0000

can be understood as three groups of eight bits:

11111111 00000000 00000000

The web color is another real example of hexadecimal acting as a shorter human-readable representation of binary-oriented information.

The # Is Part of the Web Color Notation

When a color appears in HTML or CSS, you may see:

#3366CC

The # helps indicate that the following characters form a hexadecimal color value.

The hexadecimal digits themselves are:

3366CC

CSS Can Apply the Color

A small CSS example is:

h1 {
    color: #3366CC;
}

Read it as:

Display h1 heading text using the color represented by hexadecimal #3366CC.

You do not need to master CSS yet.

For now, notice the connection:

hexadecimal representation → digital color → visible result on a webpage

Uppercase and Lowercase Hex Digits Represent the Same Values

These two values represent the same color:

#3366CC

and:

#3366cc

Hexadecimal digits A through F are not changed in value by letter case.

A project may still use one style consistently for readability.

Short Hexadecimal Color Notation Exists

You may encounter a three-digit form such as:

#36C

In CSS, this expands each digit:

#36C

to:

#3366CC

The six-digit form makes the red, green, and blue pairs easier to see while you are learning the representation.

Color Is a Good Example of Representation

The visible color is not stored on the page as a painted square.

It is represented by data.

For example:

#3366CC

is text that represents three numeric color components.

The browser interprets those values and displays the resulting color.

That follows an idea you have seen throughout FIT:

digital systems use representations that software interprets to produce meaning or behavior.