## 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.

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\text{.}\) 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

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.

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.

### 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\text{.}\) This yields \(256\) different levels of grey, one for each two digit hexadecimal number between \(00_{16}=0\) and \(\mathrm{FF}_{16}=255\text{,}\) 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.

#### 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\text{.}\) 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\text{.}\)

If \(a_1=c_1\) we compare the ones digits \(u\) and \(v\text{.}\) 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\text{.}\) 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\text{.}\)

#### Problem 12.2.5. Compare shades of grey.

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

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}\text{.}\) 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}\text{.}\) So \(\mathrm{A2}_{16}>47_{16}\) which means that the grey given by \(\mox{A2A2A2}\) is lighter than the grey given by \(\mox{474747}\text{.}\)

#### Problem 12.2.6. Compare shades of grey.

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

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}\text{.}\) 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}\text{.}\) 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}\text{.}\)

#### Checkpoint 12.2.7. Compare shades of grey.

We want to compute a representation of the word

\(\mathtt{wide}\)

by one integer in decimal representation.

First represent the characters in the word by integers using the encoding function

\(C:\lbrace \mathtt{-},\mathtt{a},\mathtt{b},\dots,\mathtt{z}\rbrace \to \lbrace0,1,2,3,...26\rbrace\) with \(C(\mathtt{-})=0\text{,}\) \(C(\mathtt{a})=1\text{,...,}\)\(C(\mathtt{z})=26\text{.}\)

We obtain

\(C(\mathtt{w}) =\) , \(C(\mathtt{i}) =\) , \(C(\mathtt{d}) =\) , \(C(\mathtt{e}) =\) .

Then we compute the representation as one integer:

\(C(\mathtt{w}) \cdot 27^3 + C(\mathtt{i}) \cdot 27^2 + C(\mathtt{d}) \cdot 27 + C(\mathtt{e}) =\)

### 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.

#### Problem 12.2.11. Color given as a RGB hex triplet.

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

a grey

light green

dark red

red

cyan

blue

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.

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

#### Checkpoint 12.2.13. Match colors to RGB hex triplets.

A word is encoded in the integer:

\(6565771\)

We find the digits of the base 27 representation

\(6565771 =\) \(\cdot 27^4+\) \(\cdot 27^3+\) \(\cdot 27^2+\) \(\cdot 27+\)

Applying the inverse

\(C^{-1}: \lbrace 0,1,2,3,\dots,26\rbrace \to \lbrace \mathtt{-},\mathtt{a},\mathtt{b},\mathtt{c},\dots,\mathtt{z}\rbrace\) with \(C^{-1}(0)=\mathtt{-}\text{,}\) \(C^{-1}(1)=\mathtt{a}\text{,}\) \(C^{-1}(2)=\mathtt{b}\text{,}\) \(\dots\text{,}\) \(C^{-1}(26)=\mathtt{z}\text{,}\)

of the encoding function \(C\) to these integers we obtain the word:

#### Checkpoint 12.2.14. Match RGB hex triplets to colors.

Let the binary operation \(\Box\) (box) on the set \(F=\lbrace\) n, o, p, q, r, s, t, u, v, w\(\rbrace\) be defined by:

\(\Box\) | n | o | p | q | r | s | t | u | v | w |

n | n | n | n | n | n | n | n | n | n | n |

o | o | q | u | r | w | v | t | p | s | n |

p | p | v | r | q | n | p | v | r | q | n |

q | q | r | v | p | n | q | r | v | p | n |

r | r | p | q | v | n | r | p | q | v | n |

s | s | p | t | v | w | r | u | q | o | n |

t | t | r | o | p | w | q | s | v | u | n |

u | u | v | s | q | w | p | o | r | t | n |

v | v | q | p | r | n | v | q | p | r | n |

w | w | n | w | n | w | n | w | n | w | n |

We read o \(\Box\) u as o box u.

Find the following.

o \(\Box\) u =

u \(\Box\) o =

r \(\Box\) o =

o \(\Box\) q =

(r \(\Box\) o) \(\Box\) q =

r \(\Box\) (o \(\Box\) q) =