Color Basics ​

On the internet, when we want to represent a color, we need to identify it precisely.
Saying "I wish this circle was moss green" doesn't work. In this tutorial we will explain how colors work in the digital world.

Art Editor ​

In this tutorial we will use the https://editor.p5js.org

It's a free online p5js editor that will work to render almost every code you can make.

Black & White or Grayscale ​

Let's start with the simplest case: Black & White or Grayscale. 0 means black, 255 means white. In between, every other number, and so on—is a shade of gray ranging from black to white.

RGB Color ​

Do you remember finger painting? Through the fusion of three "primary" colors, one could create a myriad of hues. However, blending all colors together often yielded a murky brown shade. The saturation of the paint deepened with each addition.

Digital colors operate on a similar principle of combining three primary colors, albeit with distinct mechanics. In this realm, the primaries are red, green, and blue (known as "RGB" color). Moreover, the blending process differs because it involves light rather than paint, necessitating altered mixing rules.

• Red + Green = Yellow
• Red + Blue = Purple
• Green + Blue = Cyan (blue-green)
• Red + Green + Blue = White
• No colors = Black

This presupposes that all colors are at maximum brightness;

However, there's a spectrum of color available. Thus, a combination of red, green, and blue may result in gray, while a touch of red and blue can produce a dark purple.

Though initially challenging, as you delve into programming and experiment with RGB color, it'll gradually become intuitive, akin to blending colors with your fingers. Moreover, specifying color composition requires precision; you can't simply say "Blend some red with a bit of blue" without providing exact quantities. Similar to grayscale, individual color components range from 0 (none color) to 255 (maximum), listed in the order R, G, and B. Through trial and error, you'll master RGB color blending.

function setup() {
  // Create the canvas
  createCanvas(500, 500);
  background(0, 0, 0, 230);
  noStroke();
}

function draw() {
  // Bright red
  fill(255,0,0);
  ellipse(190,250,50,50);

  // Dark red
  fill(127,0,0);
  ellipse(250,250,50,50);

  // Pink (pale red)
  fill(255,200,200);
  ellipse(310,250,50, 50);
}

Color Transparency ​

In addition to the fundamental red, green, and blue elements of each color, there exists an optional fourth component known as the "alpha" channel. Alpha denotes transparency and proves particularly beneficial when incorporating partially translucent elements atop one another. The alpha values collectively constitute the "alpha channel" of an image.

It's crucial to understand that pixels themselves aren't transparent; rather, this effect is achieved through color blending, creating the illusion of transparency. Behind the scenes, p5.js manipulates color numbers by blending percentages of one with percentages of another, thereby creating the visual impression of blending. (For those interested in programming "rose-colored" glasses, this serves as a starting point.)

Alpha values also span from 0 to 255, where 0 signifies complete transparency (i.e., 0% opaque) and 255 denotes full opacity (i.e., 100% opaque).

createCanvas(100, 100);
  fill(0,0,255);
  rect(0,0,50,100);

  // 255 means 100% opacity.
  fill(255,0,0,255);
  rect(0,0,100,20);

  // 75% opacity.
  fill(255,0,0,191);
  rect(0,25,100,20);

  // 55% opacity.
  fill(255,0,0,127);
  rect(0,50,100,20);

  // 25% opacity.
  fill(255,0,0,63);
  rect(0,75,100,20);