The concept of color has been studied by many prominent scientists, including Aristotle and Isaac Newton, for over two millennia. Aristotle developed what we believe to be the first known theory of color, exploring how humans use their senses to experience it. He considered color to be sent from the heavens through celestial rays of light and believed that all colors are a mixture of lightness and darkness, or white and black. It wasn’t until the 17th century when Isaac Newton began to experiment with sunlight and prisms to present the visible spectrum of color or what we now recognize as the visible spectrum present in nature as a rainbow and in the classroom as the color wheel.

Our ability to see color comes from the photosensitive “cone” cells in our eyes, which allow us to see the visible wavelengths of the spectrum using color-detecting molecules. The perception of color based off of these types of cone cells is more complicated than having three types that are more sensitive to Red, Green and Blue. There are different theories regarding how color vision works on a receptor level versus a neural level. For the purposes of our exploration - I’d like to rely on Trichromatic theory, the idea that these three colors can be combined to create all colors that humans are capable of perceiving.

Although the RGB color model and theory predates the digital age, it’s the predominant model we use for displaying color on electronic devices like televisions and computer monitors. The RGB model is unique and can be differentiated by the fact that it is what’s referred to as an “additive color model” as opposed to a “subtractive color model.” It is additive in the sense that we mix different shades of our “Additive Primary Colors” - Red, Green and Blue to create different colors. Using this model, the pixels in the screens on devices we use to interact with the web all start off as black. We use code to express a percentage of Red, Green and Blue to produce the color desired.

We also use the RGB model as the foundation for the two main CSS color specification methods: RGB and Hex Codes. Each of these methods uses different properties to express the intensity of Red, Green and Blue to show a particular color. I’ll illustrate how we can inform the browser we’d like to show Millennial Pink using both of these methods and how they can be converted from Hex Code to RGB values.

RGB

We can begin to understand how our devices interpret color codes through learning how we represent colors in CSS using the RGB technique. Using the RGB method allows us to pass three separate parameters of values between 0 and 255. Each of these values represents the level of red, green and blue light we want returned, which will specify a color. Here is a representation of what this looks like as code:

RGB(redVal, greenVal, blueVal);

If we’d like to show an intense blue we would pass in the lowest value of 0 for our red and green values and the highest value of 255 for our blue value. You can see an implementation of this using this RGB value to return intense blue text in all p tags using CSS shown here:

p {
color: RGB(0, 0, 255);
}

While we are able to create just red, green or blue by passing in the value for one and a value of 0 for the others, we need to mix these in different shades to create other colors. In order to achieve our millennial pink color, we would need to pass through a red value of 251, a green value of 159 and a blue value of 164, like so:

RGB(251,159,164);

Hex Codes

Hex code is short for hexadecimal code and is the most popular method of color specification for developers. We should think of these six alphanumeric characters as three pairs, each of which refers to the shade of red, green and blue in that order. It may be easier to visually conceptualize it in this way:

#RRGGBB

These codes represent specific colors and are an easier-to-understand version of binary. In the same way we use the RGB method, we need to be able to to represent the intensity of red, green and blue using a value between 0 and 255. As you can see from the visual depiction above, we are only given two characters to do so. This is why we are using alphanumeric codes - to be able to express up to three digits. We max out at 99 using the two digit format so we instead begin to use alphabetic characters up to F to express numbers higher than 9 (e.g. A = 10, B = 11...F=15). You may recognize this as what’s called the Base-16 system, which uses 16 characters (0-9 and A-F).

A couple common hex codes developers might recognize are white (#FFFFFF) and black (#000000). From this, we can deduce that hex codes are representing a range of values between 00 and FF, with 00 corresponding to the lowest intensity of color and the FF corresponding to the highest intensity. We can convert hex codes to RGB values and vice versa with this understanding. Let’s take a look at the millennial pink hex code (#FB9FA4) and work our way back to the RGB value we saw before. In this hex code, we have a red value of FB, a green value of 9F and a blue value of A4, or:

#FB9FA4

We will start by calculating our FB red value by assessing the first character F as 15 in the Base-16 system and convert it to decimal because that’s the system RGB uses. We do this by multiplying our F value of 15 by 16 which returns 240and we’re halfway there! We will next assess the second character B, which we know to be equal to 11 in the Base-16 system and add it to 240 for a total of 251.

We can repeat this with our second value 9F by assessing 9 as 9 and multiply by 16 to return a value of 144. We add the hexadecimal value of F or 15 to 144 for a total of 159.

The last value, A4, is evaluated the same way. The hexadecimal value of A or 10 is multiplied by 16 to return a total of 160. We add the 4 for a total of 164. We can see these values (251,159,164) are the same RGB values we used earlier to achieve the same millennial pink.