Random hues that never overlap
Here’s a simple way to pick an arbitrary number of hues that never overlap and maintain a good contrast between each other. Perfect for use in procedural generation.
- Pick a point on the edge of a color wheel.
- Rotate the point around the wheel by
((1.0 + Math.sqrt(5.0)) / 2.0) * Math.PI * 2.0. - Repeat the rotation until you have enough colours.
The result is an infinitely expanding version of what is often called a split-complementary colour scheme. Any two successive hues are almost on the other side of the hue wheel compared to each other, so they have good but not overwhelming hue contrast.
Technically speaking what is being used here is a low-discrepancy sequence of numbers, based on the golden ratio.
We take the fractional part (~0.618) of the golden ratio (~1.618) and multiply it by 360 degrees to the position of our first hue. To get our second hue we simply multiply the previous result by 2, and to get the third multiply by 3, and so on.
As a result we get a sequence of hues that are as far from overlapping each other as possible, without us knowing the total number of hues we might want. That is what makes this technique so good for procedural generation: we don’t have to decide beforehand on a number of hues to generate.
If you take a look at the test bench below, you’ll likely notice the result looks like a flower. That’s not a coincidence. It is my understanding that whatever mechanism that ends up determining the positions of petals, leaves and branches for many plants resembles this technique, specifically using the golden ratio.
Other irrational numbers, like the fractional part of the square root of 2 (~0.414), will also work for this technique, but they produce less even spreads.
When using the golden ratio, the most even spreads occur when we generate a number of hues equal to a number in the Fibonacci sequence: 3, 5, 8, 13, 21…. You can see this by playing with the test bench below.
My original idea was to use this technique just for hues. However when writing this page I discovered that shining a cone of light on the resulting colour wheel looked rather nice. But adding another cone for saturation is what got me excited, producing colour schemes with clear aesthetics to them: cold vs. warm, bright vs. dim.
You can turn the cones using the first two sliders below, and diminish or boost their effects by using the various light and saturation sliders.