<div class="color-palette">
<div class="primary-color">primary-color</div>
<div class="primary-color--light">primary-color--light</div>
<div class="primary-color--dark">primary-color--dark</div>
<div class="primary-color--complement">primary-color--complement</div>
<div class="primary-color--triada1">primary-color--triada1</div>
<div class="primary-color--triada2">primary-color--triada2</div>
<div class="primary-color--analogous1">primary-color--analogous1</div>
<div class="primary-color--analogous2">primary-color--analogous2</div>
</div>
<div class="color-picker">
<label>Select primary-color:</label>
<input type="color" id="colorPicker" value="#40bf8c">
</div>
:root {
--primary-color-h: 156;
--primary-color-s: 50%;
--primary-color-l: 50%;
--primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
/* lighten */
--primary-color--light: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 15%));
/* darken */
--primary-color--dark: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - 15%));
/* complement */
--primary-color--complement: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), var(--primary-color-l));
/* triad */
--primary-color--triada-1: hsl(calc(var(--primary-color-h) + 120), var(--primary-color-s), var(--primary-color-l));
--primary-color--triada-2: hsl(calc(var(--primary-color-h) + 240), var(--primary-color-s), var(--primary-color-l));
/* analogous */
--degree: 15;
--primary-color--analogous-1: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), var(--primary-color-l));
--primary-color--analogous-2: hsl(calc(var(--primary-color-h) - var(--degree)), var(--primary-color-s), var(--primary-color-l));
}
.primary-color {
background: var(--primary-color)
}
.primary-color--light {
background: var(--primary-color--light)
}
.primary-color--dark {
background: var(--primary-color--dark)
}
.primary-color--complement {
background: var(--primary-color--complement)
}
.primary-color--triada1 {
background: var(--primary-color--triada-1)
}
.primary-color--triada2 {
background: var(--primary-color--triada-2)
}
.primary-color--analogous1 {
background: var(--primary-color--analogous-1)
}
.primary-color--analogous2 {
background: var(--primary-color--analogous-2)
}
html {
font-family: sans-serif;
font-size: 0.625rem;
}
.color-palette div {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px;
margin: 10px;
box-sizing: border-box;
color: hsl(0, 100% ,100%);
width: 100px;
height: 100px;
border-radius: 50%;
}
.color-picker {
margin: 2em 0;
}
const root = document.documentElement;
const colorPicker = document.querySelector('#colorPicker');
function setTheme(color) {
// Convert hex to RGB first
let r = 0,
g = 0,
b = 0;
if (color.length == 4) {
r = "0x" + color[1] + color[1];
g = "0x" + color[2] + color[2];
b = "0x" + color[3] + color[3];
} else if (color.length == 7) {
r = "0x" + color[1] + color[2];
g = "0x" + color[3] + color[4];
b = "0x" + color[5] + color[6];
}
// Then to HSL
r /= 255;
g /= 255;
b /= 255;
let cmin = Math.min(r, g, b),
cmax = Math.max(r, g, b),
delta = cmax - cmin,
h = 0,
s = 0,
l = 0;
if (delta == 0) h = 0;
else if (cmax == r) h = ((g - b) / delta) % 6;
else if (cmax == g) h = (b - r) / delta + 2;
else h = (r - g) / delta + 4;
h = Math.round(h * 60);
if (h < 0) h += 360;
l = (cmax + cmin) / 2;
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);
root.style.setProperty(`--primary-color-h`, h);
root.style.setProperty(`--primary-color-s`, s + "%");
root.style.setProperty(`--primary-color-l`, l + "%");
}
colorPicker.addEventListener("change", watchColorPicker, false);
function watchColorPicker(event) {
setTheme(event.target.value);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.