\( \newcommand{\NOT}{\neg} \newcommand{\AND}{\wedge} \newcommand{\OR}{\vee} \newcommand{\XOR}{\oplus} \newcommand{\IMP}{\Rightarrow} \newcommand{\IFF}{\Leftrightarrow} \newcommand{\TRUE}{\text{True}\xspace} \newcommand{\FALSE}{\text{False}\xspace} \newcommand{\IN}{\,{\in}\,} \newcommand{\NOTIN}{\,{\notin}\,} \newcommand{\TO}{\rightarrow} \newcommand{\DIV}{\mid} \newcommand{\NDIV}{\nmid} \newcommand{\MOD}[1]{\pmod{#1}} \newcommand{\MODS}[1]{\ (\text{mod}\ #1)} \newcommand{\N}{\mathbb N} \newcommand{\Z}{\mathbb Z} \newcommand{\Q}{\mathbb Q} \newcommand{\R}{\mathbb R} \newcommand{\C}{\mathbb C} \newcommand{\cA}{\mathcal A} \newcommand{\cB}{\mathcal B} \newcommand{\cC}{\mathcal C} \newcommand{\cD}{\mathcal D} \newcommand{\cE}{\mathcal E} \newcommand{\cF}{\mathcal F} \newcommand{\cG}{\mathcal G} \newcommand{\cH}{\mathcal H} \newcommand{\cI}{\mathcal I} \newcommand{\cJ}{\mathcal J} \newcommand{\cL}{\mathcal L} \newcommand{\cK}{\mathcal K} \newcommand{\cN}{\mathcal N} \newcommand{\cO}{\mathcal O} \newcommand{\cP}{\mathcal P} \newcommand{\cQ}{\mathcal Q} \newcommand{\cS}{\mathcal S} \newcommand{\cT}{\mathcal T} \newcommand{\cV}{\mathcal V} \newcommand{\cW}{\mathcal W} \newcommand{\cZ}{\mathcal Z} \newcommand{\emp}{\emptyset} \newcommand{\bs}{\backslash} \newcommand{\floor}[1]{\left \lfloor #1 \right \rfloor} \newcommand{\ceil}[1]{\left \lceil #1 \right \rceil} \newcommand{\abs}[1]{\left | #1 \right |} \newcommand{\xspace}{} \newcommand{\proofheader}[1]{\underline{\textbf{#1}}} \)

1.6 Application: Representing Colour

The physics behind how we perceive colour is incredibly interesting, but also complex. Humans have developed a broad range of names of colours to identify categories like “red” in everyday language. Although the names we use for colours vary widely from language to language! Yet these categories can be fairly broad and imprecise; useful for everyday communication, but not for computer graphics and design. So in this section, we’ll learn about how computers represent colour data.

color image

Mathematics can help us represent colours by a combination of numbers; the rules for how numbers map to colours is called a colour model. Many colour models exist, but one of the most common is the RGB colour model. At some point in your youth, you may have discovered that mixing two colours together (i.e., with paint, crayons, etc.) produces a different colour. The RGB colour model is based on the same idea: each colour is represented by three numbers, one for the “amount” of red, green, and blue to be mixed together.

A common form of the RGB colour model in a computer is called the RGB24 colour model, and allows for each of the red, green, and blue amounts to be a number between 0 and 255, inclusive. Though RGB24 is quite common, software like Photoshop allow for a larger range of numbers, enabling more granularity it their colour representations. You can look up the term deep colour to find out more about more sophisticated colour models Formally, we can define the set \(S = \{0, 1, \dots, 255\}\) and \(\mathcal{C}\) to be the set of all possible colours in the universe. Then the RGB colour model is a function \(RGB_{24}: S \times S \times S \to \mathcal{C}\) that takes in red, green, and blue values from \(S\) and returns a colour. This \(RGB_{24}\) function is one-to-one, as every combination of (red, green, blue) values produces a different colour.

RGB Value Colour
(0, 0, 0)
 
(255, 0, 0)
 
(0, 255, 0)
 
(0, 0, 255)
 
(181, 57, 173)
 
(255, 255, 255)
 

Colours in Python

The RGB24 colour model translates naturally to Python: we represent a colour value as a tuple of three integers, where each integer is between 0 and 255, inclusive. For example, we can use (0, 0, 0) to represent a pure black, and (181, 57, 173) to represent a shade of purple. Of course, just representing these values as tuples doesn’t automatically make them colours:

>>> (181, 57, 173)  # This tuple evaluates to... itself
(181, 57, 173)

But as you’ll see in your first tutorial this year, we can pass these tuples to operations that expect colour values, and get remarkable results.

Pygame demo of colour gradient

References