Ableton Certified Trainer, Music Technologist, Creative Coder, Educator

Create random palettes of colors that will go well together

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.

This is the original thread

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
 * Sketch made by Federico Pepe
 * 27.05.2020

color palette[] = new color[5];

void setup() {
  size(540, 540);
  colorMode(HSB, 360, 100, 100);

void draw() {

void mousePressed() {

void keyPressed() {
  if(key == 's') {

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() {
  rect(0, 0, width/5, height);
  rect(width/5, 0, width/5, height);
  rect(width/5*2, 0, width/5, height);
  rect(width/5*3, 0, width/5, height);
  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:

Non perdere nemmeno un post

Ricevi i nuovi articoli pubblicati direttamente via email

2 responses to “Create random palettes of colors that will go well together”

  1. mosonic avatar

    I really like to thank you for sharing the code. I am curious how I can combine the random palettes with (random) patterns. Or maybe morphing from one palette into the next one :) Not all palettes are beautiful, but some combinations are so strange, so that they are interesting.

    1. Federico avatar

      You might store the random palettes as an array into a variable and do whatever you want with that. Let me know if you need a code example

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.