Introduction to Color

Last week, we introduced and discussed the background() function. We have also looked at how you can color shapes using the fill() and stroke() functions. Now that you have had some practice using these, and specifying color using “named color strings”, let’s talk a little more specifically about how you can specify colors in p5.

Specifying Color

As you saw from the background() function documentation page, there are numerous ways to specify color. We have already presented one; “Named Color Strings”. Now let’s look at three more possibilities;

• Grayscale
• RGB
• hex values

Grayscale

Grayscale includes colors that are ‘white’, ‘black’, and any shade of gray in between.

To specify a grayscale color value in p5, the developer needs to provide a single value, as a parameter to any of the color-based functions we have looked at, between 0 (black) and 255 (white). This is for a total of 256 grayscale color values.

In a 0-based system, ‘0’ counts as a value.

256 values is no coincidence. This represents 8 bits (i.e. 8, 1’s or 0’s - 0000 0000).
2 to the power of 8 equals 256. (2⁸ = 256)

Since computers store data in some number of bits, you will often see max numbers, or number ranges, that correspond to some number of 2^{number of bits}.

RGB

RGB and Hex provide developers with a lot more variation and specificity in color selection over “named color strings” or a simple grayscale number. Both of these color systems work by specifying some amount of red, green, and blue that are combined to make the resulting color.

Like grayscale, each color has a possible range of 256 values (0-255).

In RGB, each of these three color values is represented as an integer-based number, comma separated. In p5 we can provide RGB values as a function, wrapped in quotes (i.e. 'rgb(rrr, ggg, bbb)').

For example, in the first code demo, the background is colored orange-ish by using the rgb() function as a input parameter to the background() function.

Each of the color types shown on this page can be used as input parameters to any p5 function that adjusts color in a sketch. i.e.;

• background()
• fill()
• stroke()

Many functions that take color values in p5, will also, more simply, accept three integers as input parameters, representing the RGB value.

The below code achieves the same as above, without the use of the additional 'rgb()' function.

{ TODO: } Replace one of the integer values in the below code example. Remember to use integers between 0-255.

As a reminder, to play with code on this website, simply change the values in the code below and look to the result section to see the difference.

Hexadecimal

Hexadecimal (or hex) values, are written as a single string (characters surrounded by double or single quotes), prepended with a number sign, with 2 characters representing each color. #RRGGBB

THE MAJOR DIFFERENCE is that you can represent 256 values with a two-bit hexadecimal number. In hexadecimal numbering, each digit has 16 values (0-f). And, 16 * 16 = 256.

If we were to translate this to binary;

So, in hex, we write the value;

• 000 as 00
• 010 as 0a
• 015 as 0f
• 016 as 10
• 017 as 11
• 031 as 1f
• 032 as 20
• 050 as 32
• 100 as 64
• 150 as 96
• 200 as c8
• 250 as fa
• 255 as ff

{ TODO: }

For more information on hexadecimal numbering, read;

• Hex Number System
• Math is Fun: Hexadecimal Numbers
• Decimal to Hex Converter

In p5

To use a hexadecimal color value in p5, we supply it to the function in question, surrounded in quotes. (i.e. #ff00ff)

{ TODO: } Try changing any of the characters after the #. Remember to keep them values between 0-f. [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f]

Red, Green, or Blue

So, to specify a color of full red in either system, we set the first number to 255, and the other two to 0.

• RGB: rgb(255, 0, 0);
• Hex: #ff0000;

Likewise, to specify a color of full green or full blue, use a value of 255 for the color in question, and 0 for the others.

• RGB: rgb(0, 255, 0);
• Hex: ##00ff00;

• RGB: rgb(0, 0, 255);
• Hex: ##0000ff;

White & Black

We know from color theory, that white is the presence of all colors and black is the absence of all colors. Knowing this, we can deduce that black would be all 0’s and white would be all full value.

Black:

• rgb(0, 0, 0);
• #000000;

White:

• rgb(255, 255, 255);
• #ffffff;

Following from this principle, to get any color within the grey scale, we simply need to provide the same value for each color.

Complementary Colors

When we start to mix the ratios of red, green, and blue, we come up with the rest of the colors of the spectrum. Some of the first colors we should consider are the complementary colors of red, green, and blue. To get the complementary color for red, we use full green and blue. This creates Cyan.

Cyan:

• rgb(0, 255, 255);
• #00ffff;

Likewise, to get the complimentary colors for green and blue, which are magenta and yellow, respectively, we boost the values of the two other colors.

Magenta:

• rgb(255, 0, 255);
• #ff00ff;

Yellow:

• rgb(255, 255, 00);
• #ffff00;

Other Colors

Others colors are obviously some combination of these values.

For more information on RGB colors, please read the corresponding Wikipedia Article.

Atom Tips:

If you are using atom, there are two packages you may want to consider installing.

1. Color Picker. The atom color picker lets you inspect colors, as any value type (rgb, hex, hsl, etc.), and navigate a color “picker” so that you can insert any color value. Once, installed, you can pull up this package with the “atom command palette” by typing color.

2. Pigments. The atom pigments package highlights color values in your code. This can make it easier to visually see in atom, while developing the colors that will appear.

{ TODO: }

• Read the “7 step guide to understanding color theory”.