Few days ago I was following a thread on twitter by Vegard Myklebust. He was explaining an easy way to create palettes of five different colors picked randomly that will go well together.

This techniques works really well and it’s super easy so I decided to create a small sketch in Processing to generate infinite palettes.

Mini tech art tutorial: How to randomly pick 5 colours that will go well together. 1/9 #gamedev #indiedev pic.twitter.com/s8qSFgBF6h

— Vegard Danger Whatofit Myklebust (@usefulslug) May 27, 2020

Rules for picking colors

These are the simple rules to follow:

1. Work in HSB (hue, saturation and brightness) color space and not in RGB (red, green and blue).
2. The secret is to consider the hue value around a circle so the hue is the angle of the wheel. The values are between 0 and 360. First of all, we have to pick a number randomly.
3. Let’s pick saturation and brightness values randomly as well (usually between 0 and 100).
4. Now we have our first color which is positioned at the centre of our palette.
5. Choose another random number. This techniques works best if we pick between 0 and 180. Then we have to add and subtract this value to the original hue.
6. Now we have the second and fourth color.
7. Add and subtract again the last number we chose to the second and fourth color.
8. To have perfect results, set saturation and brightness randomly for every color.

The processing sketch

/*
 * Create a palette of 5 random colours with a techniques explained
 * here https://twitter.com/usefulslug/status/1265604318016811011
 *
 * Sketch made by Federico Pepe
 * http://www.federicopepe.com
 * 27.05.2020
 *
*/

color palette[] = new color[5];

void setup() {
  size(540, 540);
  
  colorMode(HSB, 360, 100, 100);
  
  noStroke();
  
  createPalette();
  drawPalette();
}

void draw() {
}

void mousePressed() {
  background(0);
  createPalette();
  drawPalette();
}

void keyPressed() {
  if(key == 's') {
    saveFrame("######-palette.png");
  }
}

void createPalette() {
  int hue = round(random(360));
  int r1  = round(random(180));
  palette[0] = color(hue - (r1*2), round(random(100)), round(random(100)));
  palette[1] = color(hue - r1, round(random(100)), round(random(100)));
  palette[2] = color(hue, round(random(100)), round(random(100)));
  palette[3] = color(hue + r1, round(random(100)), round(random(100)));
  palette[4] = color(hue + (r1*2), round(random(100)), round(random(100)));
  
  println("#" + hex(palette[0], 6), 
    "#" + hex(palette[1], 6), 
    "#" + hex(palette[2], 6), 
    "#" + hex(palette[3], 6), 
    "#" + hex(palette[4], 6));
  
}

void drawPalette() {
  fill(palette[0]);
  rect(0, 0, width/5, height);
  fill(palette[1]);
  rect(width/5, 0, width/5, height);
  fill(palette[2]);
  rect(width/5*2, 0, width/5, height);
  fill(palette[3]);
  rect(width/5*3, 0, width/5, height);
  fill(palette[4]);
  rect(width/5*4, 0, width/5, height);
}

The code is quite simple: I created two functions to create and draw the palette on the screen. Colors are saved in an array.

Everytime you click the mouse a new palette is generated. By pressing s on the keyboard the palette is saved as .png file in the sketch’s folder.

The color values are printed in the console as hexadecimal values.

Here’s some examples: