Colors

Colors
//From Dr. Meyer's website, the Processing website// - @http://processing.org/learning/color/ //and the W3Schools website// http://www.w3schools.com/html/html_colors.asp

Grayscale Color
In the digital world, when we want to talk about a color, precision is required. Saying "Hey, can you make that circle bluish-green?" will not do. Color, rather, is defined as a range of numbers. Let's start with the simplest case: black & white or grayscale. 0 means black, 255 means white. In between, every other number - 50, 87, 162, 209, and so on - is a shade of gray ranging from black to white.



//Does 0-255 seem arbitrary to you?// Color for a given shape needs to be stored in the computer's memory. This memory is just a long sequence of 0's and 1's (a whole bunch of on or off switches.) Each one of these switches is a bit, eight of them together is a byte. Imagine if we had eight bits (one byte) in sequence - how many ways can we configure these switches? The answer is (and doing a little research into binary numbers will prove this point) 256 possibilities, or a range of numbers between 0 and 255. We will use eight bit color for our gray-scale range and 24 bit for full color (eight bits for each of the red, green, and blue color components).

Additive Color
Processing uses Additive Color. This means that we will indicate what color we want to use by specifying how much red, green and blue we need to use to make that color. If we add the maximum amount of all 3 colors in equal amount we will get WHITE.

The maximum amount of red, green and blue you can add is 255. Take a look at these examples (using the background function). The

background(255,255,255); //WHITE// //background( 0, 0, 0);// BLACK background(255, 0, 0); //Bright/Light RED// //background(100, 0, 0);// Dark RED background(255,255,0); //Bright/Light YELLOW// //background(200,200,0);// Dark YELLOW

Picking Colors
Processing has a tool to help you pick colors. Access this via TOOLS (from the menu bar) → COLOR SELECTOR.

You can pick a type of color and how dark or light you would like the color to be and then the tool will tell you the RGB (red, green, blue) values as well as the hexadecimal number of the color that you chose. Note that all hexadecimal color declarations start with the pound sigh (#).



Hexadecimal Color
You are used to decimal notation. In decimal notation each column can hold up to 10 different symbols ( 0,1,2,3,4,5,6,7,8,9 ) and then that column "overflows" into the next column. But their are other ways of representing numbers. These other number systems allow their columns to have more or less than 10 symbols. In the binary number system the columns can only hold one of 2 symbols ( 0, 1 ). In Hexadecimal each column can hold one of 16 different symbols ( 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F ). Each of these number systems can still represent any possible number.

Binary and Hexadecimal notation are both very important in computer science. Hexadecimal notation is often used when picking/specifying colors for computers. Hexadecimal mode is a common color mode working with computer graphics. It’s a very efficient method, using only six digits to identify a single color out of the 16.8 million available on modern computer monitors.

Color Values
@http://www.w3schools.com/html/html_colors.asp