JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<span id="inputColor"></span>
<span id="outputColor"></span>

CSS

span {
	display: inline-block;
	width: 4rem;
	height: 4rem;
	margin: 2rem;
}

JavaScript

var input = { h: 270, s: 68, l: 48 };

var gratio = (1 + Math.sqrt(5)) / 2;

var shift = (360 / 2) * (gratio - 1);

var output = Object.assign({}, input, { h: (input.h + shift) % 360 });

inputColor.style.backgroundColor = hsl(input);
outputColor.style.backgroundColor = hsl(output);


function hsl ({ h, s, l }) {
	return `hsl(${h}, ${s}%, ${l}%)`;
}