Colour wheel generator

colour-wheel-generator.markdown

Colour wheel generator

A Pen by skjnldsv on CodePen.

License.

script.js

function Color(r,g,b) {
	this.r = r;
	this.g = g;
	this.b = b;
}

function stepCalc(steps, ends) {
	var step = new Array(3);
	step[0] = (ends[1].r - ends[0].r) / steps;
	step[1] = (ends[1].g - ends[0].g) / steps;
	step[2] = (ends[1].b - ends[0].b) / steps;
	return step;
}

function mixPalette(steps, color1, color2) {
	var count = steps + 1;
	var palette = new Array();
	palette.push(color1);
	var step = stepCalc(steps, [color1, color2])
	for (i = 1; i < steps; i++) {
		var r = parseInt(color1.r + (step[0] * i));
		var g = parseInt(color1.g + (step[1] * i));
		var b = parseInt(color1.b + (step[2] * i));
			palette.push(new Color(r,g,b));
	}
	return palette;
}

var color1 = new Color(182,70,157);
var color2 = new Color(244,211,94);
var color3 = new Color(0,130,201);
var steps = 6;

var palette1 = mixPalette(steps, color1, color2);
var palette2 = mixPalette(steps, color2, color3);
var palette3 = mixPalette(steps, color3, color1);

palette1.concat(palette2).concat(palette3).forEach(function(color) {
$('body').append('<div style="background:rgb('+color.r+','+color.g+','+color.b+')"></div>')
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

style.css

div {
	width: 50px;
	height: 50px;
}
body {
	display: flex;
}