Skip to main content
Logo image

Integers and Modern Applications for the Uninitiated

Sebastian Pauli

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 gives \(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 use the World Wide Web notation for hexadecimal colors. Three two-digit hexadecimal numbers represent a color. Together, they are called an RGB hex triplet. The three intensities for red, green, and blue are each given by one of the two-digit hexadecimal numbers. Each color has exactly 256 possible intensities, from \(0_{16}=0\) to \(\mathrm{FF}_{16}=255\text{.}\) A hash mark, also called a number symbol, goes before the six-digit hexadecimal number to show that it is an RGB hex triplet. We write 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*}
The two-digit hexadecimal number \((r_1 r_2)_{16}\) gives the red intensity, the two-digit hexadecimal number \((g_1 g_2)_{16}\) gives the green intensity, and the two-digit hexadecimal number \((b_1 b_2)_{16}\) gives the blue intensity.
🔗
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\text{.}\)
🔗
We will use this format again below, so we give the primary and secondary RGB colors with their RGB hex triplets in the table in Figure 12.2.3.
🔗
described in detail following the image
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 Shades of Grey

We get greys by setting red, green, and blue to the same intensity. We already have seen that \(\mox{000000}\) gives black and that \(\mox{FFFFFF}\) gives 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 gives \(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.
🔗
described in detail following the image
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\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}\) ?
🔗
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}\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}\) ?
🔗
Solution.
To compare the two greys 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{.}\)
🔗
🔗
🔗
described in detail following the image
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
🔗
described in detail following the image
Not everything is #000000 and #FFFFFF.
🔗
Figure 12.2.7. Two examples of hex triplet color humor.
🔗
🔗

Subsection Darker and Lighter Colors

Now we describe how to make darker and lighter versions of the main colors red, green, and blue. If we set two of the three color values for red, green, and blue to zero and decrease the third color value, we get a darker version of that third color. If we fix one of the three color values and set the two remaining values to the same level, we get a brighter version of the fixed color.
🔗
described in detail following the image
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.8. We demonstrate how darker blues are formulated as RGB hex triplets. The differences in brightness are evident from \(0_{16}\lt 6_{16}\text{,}\) \(6_{16} \lt \mathrm{9C}_{16}\text{,}\) \(\mathrm{9C}_{16} \lt \mathrm{AB}_{16}\text{,}\) and \(\mathrm{AB}_{16}\lt \mathrm{FF}_{16}. \)
🔗
described in detail following the image
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.9. We demonstrate how lighter blues are formulated as RGB hex triplets. The differences in brightness are evident from \(0_{16} \lt 34_{16}\text{,}\) \(34_{16} \lt 80_{16}\) \(80_{16} \lt \mathrm{E1}_{16}\text{,}\) and \(\mathrm{E1}_{16} \lt \mathrm{FF}_{16}\text{.}\)
🔗

Problem 12.2.10. Color given as a RGB hex triplet.

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 Summary

We summarize what we have said about RGB colors in the video in Figure 12.2.11.
🔗
Figure 12.2.11. A Real Life Example of Hexadecimal Numbers (by Frances Clerk)
🔗
🔗
🔗
PrevTopNext