Procedural Color Algorithm

A Popular Color Theorem

If you change from traditional paintings methods to a digital one you would realize that more freedom and ease of access in your choice of color doesn't equal better color palettes. It was around the time I started with digital painting that I read Color and Light from James Gurney. Gurney’s approach to color theorem is a very simple one. The idea is that you pick a few key colors, and mix the rest of your palette by combining these key colors. In the language of computer graphics this would mean that you cut out a part of the color space, and use only colors which are within that extracted volume in your render/ painting. For simplicity, lets assume the calculations to happen in the Hue Saturation Value color space and all four colors have the same values (darkness). The four points create a quad on the surface of the color wheel. The idea is that if you only use colors on the surface of this quad, you achieve a harmonious color scheme. You could of course do this for any give number of key colors. Though at some point it will become redundant.

In Real Time Application

As we were developing Superflight, one of the main challenges was to create variation in the aesthetic of the procedural levels our level generator made. Varying colors and generating palettes in run time was one of the easiest methods to achieve this. Friedemann who did most of the art direction for the game, wrote an algorithm based on Gurney’s theory to generate harmonious color palettes for each individual level in run time. In each level, the color generator would create four key colors which are passed to the shaders of the geometry. The shaders calculate the color of their fragments by linearly interpolating between the key colors using a predetermined RGB noise, which was projected on top of the geometry using triplanar mapping. This worked really well, and created tons of unexpected color palettes, which I would have never consciously hand picked, because of their unconventional key colors (such as combining magenta, with yellow and cyan). The basic formula was:

Which Color Space?

The question of which color space to use is an important one. In the current version of the algorithm, the RGB color space is used. This is mainly because of performance reasons. I have experimented with using a corrected artist color wheel, which results in a more consistence harmonious color schemes, specially around the hue Green. Consider the following situation. We cut the same triangle out of two different color spaces. The HSV color spaces and the artists color wheel. As you can see the color green takes a huge chunk of the HSV color space, as well as the RGB one. However in the artists color wheel, this has been corrected so that each major hue occupies a similar segment of the circle. So the same cut can give us different palette, in different color spaces.

A Simple Line To Copy

Having explained the idea behind it, here is the line you need to copy in your projects. For more details you can have a look at this shadertoy page , where I use this algorithm to generate endless procedural colors.

Reflection

This is not the only way to get a harmonious color schemes and it is not an iron rule. Using this approach, you will miss on lots of possible amazing color schemes. As an artist the best source for choosing a color scheme is still your experiences as an individual. However for real time procedural graphics, given the variation which this algorithms provides, its consistency makes it really useful. I find my self using it regularly in projects for almost everything.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store