Skip to content

Instantly share code, notes, and snippets.

@stephencweiss
Last active December 18, 2018 23:37
Show Gist options
  • Save stephencweiss/5ca6045255474083e6f2bc4ba42eb4dc to your computer and use it in GitHub Desktop.
Save stephencweiss/5ca6045255474083e6f2bc4ba42eb4dc to your computer and use it in GitHub Desktop.
Generate a number of complementary colors using the golden ratio
function generateComplementaryColors ( numberToGenerate ) {
/**
* I: Three arguments are the number of complementary colors to generate (integer > 0),
* O: A set of color and pattern
* Credit for the inspiration to use the golden ratio goes to Martin Ankerl who wrote:
* https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
* NB: Definitions of helperfunctions `rgbFromHSL` and `hexFromRGB` can be found here:
* https://gist.github.com/stephencweiss/eab510dabb2ba50652434372e46b5980
*/
const goldenRatio = 1.61803398749895;
const colors = []
const patterns = ['plus', 'cross', 'dash', 'cross-dash', 'dot', 'dot-dash', 'disc', 'ring', 'line', 'line-vertical', 'weave' , 'zigzag', 'zigzag-vertical', 'diagonal', 'diagonal-right-left','square', 'box', 'triangle', 'triangle-inverted', 'diamond', 'diamond-box']
const saturation = 0.8;
const lightness = 0.5;
let hue = Math.random();
for (let i = 0; i < numberToGenerate; i += 1) {
hue = goldenRatio * hue;
hue %= 1;
const huePrime = Math.round(hue * 360)
const [red, green, blue] = rgbFromHSL(huePrime, saturation, lightness)
const color = hexFromRGB(red, green, blue);
const pattern = patterns[Math.floor(patterns.length * Math.random())]
colors.push({ color, pattern })
}
return colors;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment