Skip to main content

Section 12.2 Colors

There are different models for describing color. In the RGB ( Red Green Blue ) color model, colors are additively mixed from the colors red, green, and blue (thus the name), see Figure 12.2.1 . By varying the intensity of the three colors all colors can be mixed this way. On the World Wide Web (WWW) the intensity of each of the three colors is represented two digit hexadecimal number which yields \(16\cdot 16=256\) different intensities for each of red and green and blue. In total \(256^3\) distinct colors can be represented this way.

Figure 12.2.1. Primary and secondary RGB colors. Mixing blue and green yields cyan. Mixing blue and red yields magenta. Mixing green and red yields yellow. Mixing blue, green, and red yields white.

The intensities of each of the three colors red, green, and blue are represented by numbers from 0 to 255. Where 0 stands for no contribution of a color and 255 the strongest possible contribution.

We denote hexadecimal colors in the notation used on the World Wide Web. Color are represented by three two digit hexadecimal numbers, called an RGB hex triplet . The intensity each of the three colors red, green, and blue is represented by one of thesetwo digit hexadecimal numbers. This exactly yields the 256 intensities from \(0_{16}=0\) to \(\mathrm{FF}_{16}=255\) . To indicate that the six digit hexadecimal number should be interpreted as a RGB hex triplet it is prefixed by a hash mark (also called number symbol). That is we represent colors in the form

\begin{equation*} \xx\underbrace{r_1 r_2}_{\text{ red } }\underbrace{g_1 g_2}_{\text{ green } }\underbrace{b_1 b_2}_{\text{ blue } }\text{,} \end{equation*}

where the two digit hexadecimal number \((r_1 r_2)_{16}\) represents the intensity of red, the two digit hexadecimal number \((g_1 g_2)_{16}\) represents the intensity of green, and the two digit hexadecimal number \((b_1 b_2)_{16}\) represents the intensity of blue.

In Figure 12.2.2 you can try yourself which color you obtain when you change the intensity of red, green, and blue in a color.

Figure 12.2.2. Move the sliders to change the brightness of red, green, and blue in the RGB color of the block on the bottom. You can choose the brightness of each of red, green, and blue between \(0\) and \(\mathrm{FF}_{16}=255\) .

As we will use this format again below, we present the primary and secondary RGB colors with the corresponding RGB hex triplets in Figure 12.2.3 in a table.

hex triplets and the colors they represent: #000000 represents black, #FF0000 represents red, #00FF00 represents green, #0000FF represents blue, #FFFF00 represents yellow, #FF00FF represents magenta, #00FFFF represents cyan, #FFFFFF represents white,
Figure 12.2.3. Colors represented by hex triplets, compare Figure 12.2.1 .

Subsection 12.2.1 Shades of Grey

We obtain greys by setting red, green, and blue to the same intensity. We already have seen that \(\mox{000000}\) yields black and that \(\mox{FFFFFF}\) yields white.

Consider a hex triplet of the form \(\xx a_1 a_2 a_1 a_2 a_1 a_2\) where \((a_1 a_2)_{16}\) is a two digit hexadecimal number with sixteenth digit \(a_1\) and ones digit \(a_2\) . This yields \(256\) different levels of grey, one for each two digit hexadecimal number between \(00_{16}=0\) and \(\mathrm{FF}_{16}=255\) , between the darkest shade of grey \(\mox{000000}\) (black) and the lightest shade of grey \(\mox{FFFFFF}\) (white). In general the higher the value of \((a_1 a_2)_{16}\) the lighter the grey will be.

hex triplets and the shades of grey that they represent. #000000 represents black, #404040 represents a grey, #4D4D4D represents a slightly lighter grey, #808080 represents a lighter grey, #E1E1E1 represents an even lighter grey, #FFFFFF represents white
Figure 12.2.4. Six shades of grey. The differences in brightness are evident from \(0_{16}\lt 40_{16}\lt \mathrm{4D}_{16}\lt 80_{16}\lt \mathrm{E1}_{16}\lt \mathrm{FF}_{16}.\)

Strategy 12.2.1. Comparing Shades of Grey.

When comparing the two shades of grey given by the hex triplets \(\xx a_1 a_2 a_1 a_2 a_1 a_2\) and \(\xx c_1 c_2 c_1 c_2 c_1 c_2\) we first compare the first digits, that is the sixteens. If \(a_1>c_1\) then the shade of grey represented by \(\xx a_1 a_2 a_1 a_2 a_1 a_2\) is lighter than the shade of grey represented by \(\xx c_1 c_2 c_1 c_2 c_1 c_2\) . If \(a_1<c_1\) then the shade of grey represented by \(\xx a_1 a_2 a_1 a_2 a_1 a_2\) is darker than the shade of grey represented by \(\xx c_1 c_2 c_1 c_2 c_1 c_2\) .

If \(a_1=c_1\) we compare the ones digits \(u\) and \(v\) . If \(a_1=c_1\) and \(a_2>c_2\) then the shade of grey represented by \(\xx a_1 a_2 a_1 a_2 a_1 a_2\) is lighter than the shade of grey represented by \(\xx c_1 c_2 c_1 c_2 c_1 c_2\) . If \(a_1=c_1\) and \(a_2<c_2\) then the shade of grey represented by \(\xx a_1 a_2 a_1 a_2 a_1 a_2\) is darker than the shade of grey represented by \(\xx c_1 c_2 c_1 c_2 c_1 c_2\) .

Is the shade of grey given by \(\mox{A2A2A2}\) darker than or lighter than the grey given by \(\mox{474747}\) ?

Solution.

To compare the two greys we only need to compare one of the three two digit hexadecimal colors. So we compare \(\mathrm{A2}_{16}\) and \(47_{16}\) . In this example the sixteens (\mathrm{A} and \(4\) ) differ so determining which of these is larger yields the solution. We have \(\mathrm{A}_{16}>4_{16}\) . So \(\mathrm{A2}_{16}>47_{16}\) which means that the grey given by \(\mox{A2A2A2}\) is lighter than the grey given by \(\mox{474747}\) .

Is the shade of grey given by \(\mox{ABABAB}\) darker than or lighter than the grey given by \(\mox{AEAEAE}\) ?

Solution.

To compare the two Grey's we only need to compare one of the three two digit hexadecimal colors. So we compare \(\mathrm{AB}_{16}\) and \(\mathrm{AE}_{16}\) . In this example the sixteens (\mathrm{A} for both colors) are the same, we need to consider the ones to determine which is the lighter shade of grey. We have \(\mathrm{B}_{16}\lt E_{16}\) . So \(\mathrm{AB}_{16}\lt \mathrm{AE}_{16}\) which means that the grey given by \(\mox{ABABAB}\) is darker than the grey given by \(\mox{AEAEAE}\) .

In each line determine whether the color on the left is darker than, lighter than, or the same as the color on the right.

[Hint: All colors in this problems are shades of grey]

\(\#\mathtt{9E9E9E}\)

  • select

  • is darker than

  • is lighter than

  • is the same as

\(\#\mathtt{939393}\)

\(\#\mathtt{868686}\)

  • select

  • is darker than

  • is lighter than

  • is the same as

\(\#\mathtt{888888}\)

\(\#\mathtt{777777}\)

  • select

  • is darker than

  • is lighter than

  • is the same as

\(\#\mathtt{555555}\)

\(\#\mathtt{FFFFFF}\)

  • select

  • is darker than

  • is lighter than

  • is the same as

\(\#\mathtt{141414}\)

\(\#\mathtt{666666}\)

  • select

  • is darker than

  • is lighter than

  • is the same as

\(\#\mathtt{888888}\)

Answer 1.

\(\text{is lighter than}\)

Answer 2.

\(\text{is darker than}\)

Answer 3.

\(\text{is lighter than}\)

Answer 4.

\(\text{is lighter than}\)

Answer 5.

\(\text{is darker than}\)

Fifty shades of grey: #050505, #0A0A0A, #0F0F0F, #141414, #191919, #1E1E1E, #232323, #282828, #2D2D2D, #323232, #373737, #3C3C3C, #414141, #464646, #4B4B4B, #505050, #555555, #5A5A5A, #5F5F5F, #646464, #696969, #6E6E6E, #737373, #787878, #7D7D7D, #828282, #878787, #8C8C8C, #919191, #969696, #9B9B9B, #A0A0A0, #A5A5A5, #AAAAAA, #AFAFAF, #B4B4B4, #B9B9B9, #BEBEBE, #C3C3C3, #C8C8C8, #CDCDCD, #D2D2D2, #D7D7D7, #DCDCDC, #E1E1E1, #E6E6E6, #EBEBEB, #F0F0F0, #F5F5F5, #FAFAFA
Not everything is #000000 and #FFFFFF.
Figure 12.2.8. Two examples of hex triplet color humor.

Subsection 12.2.2 Darker and Lighter Colors

We now describe how darker and lighter versions of the principal colors red green blue are obtained. If we set two of the three colors red, green, and blue to zero and decrease the third color we obtain darker versions of the that third color. Fixing one of the three colors red, green, and blue and setting the two remaining intensities to the same level yield brighter versions of the color that we fixed.

hex triplets and the shades of blue represented by them. #0000FF represents blue, #0000AB represents a darker blue, #00009C represents an even darker blue, #000006 represents a very dark blue, almost black, #000000 represents black
Figure 12.2.9. We demonstrate how darker blues are formulated as RGB hex triplets. The differences in brightness are evident from \(0_{16}\lt 6_{16}\) , \(6_{16} \lt \mathrm{9C}_{16}\) , \(\mathrm{9C}_{16} \lt \mathrm{AB}_{16}\) , and \(\mathrm{AB}_{16}\lt \mathrm{FF}_{16}.\)
hex triplets and the shades of blue represented by them. #0000FF represents blue, #3434FF represents a lighter blue, #8080FF represents an even lighter blue, #E1E1FF represents a very light blue, #FFFFFF represents white
Figure 12.2.10. We demonstrate how lighter blues are formulated as RGB hex triplets. The differences in brightness are evident from \(0_{16} \lt 34_{16}\) , \(34_{16} \lt 80_{16}\) \(80_{16} \lt \mathrm{E1}_{16}\) , and \(\mathrm{E1}_{16} \lt \mathrm{FF}_{16}\) .

Which color best describes \(\mox{A1FFA1}\) ?

  1. a grey

  2. light green

  3. dark red

  4. red

  5. cyan

  6. blue

Solution.

In \(\mox{A1FFA1}\) the strongest of the three colors is green. The other two are at the same medium level. This makes for a lighter color than green. Thus light green is the correct solution.

Subsection 12.2.3 Summary

We summarize what we have said about RGB colors in the video in Figure 12.2.12 .

Figure 12.2.12. A Real Life Example of Hexadecimal Numbers (by Frances Clerk)

Check whether you have understood how RGB colors working by answering the questions in Checkpoint 12.2.13 and Checkpoint 12.2.14 .

Select the colors that best describe the colors represented by the RGB hex triplets.

  1. \(\displaystyle \#\mathtt{111111}\)

  2. \(\displaystyle \#\mathtt{A0A0A0}\)

  3. \(\displaystyle \#\mathtt{00FFFF}\)

  4. \(\displaystyle \#\mathtt{FFFFFF}\)

Select the RGB hex triplets that correspond to the given colors.

  1. \(\color{black}{\blacksquare}\) black

  2. \(\color{red}{\blacksquare}\) red

  3. \(\color{cyan}{\blacksquare}\) cyan

  4. \(\color{yellow}{\blacksquare}\) yellow