code
.Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
And... That was it.
“ They’re not efficient, or super intuitive, but there is something downright charming about using these great names. ” - Stranger on the Internet
.el{
color: rgb(255 0 0 / 20%);
}
.el{
color: hwb(270 60 0);
}
White + Black = 100%
Achromatic color/shade of gray, without any hue.
.el{
color: gray(50, 0.9);
}
.el{
color: color-mod(var(--baseColor) s(-10%) w(30%));
}
.el{
color: color-mod(0deg tint(10%));
}
.el{
/* 0% Minimum contrast required by WCAG 2.0 Guidelines */
color: color-mod(purple contrast(30%));
}
.el{
/* Maximum contrast required by WCAG 2.0 Guidelines
Black or White
*/
color: color-mod(purple contrast(100%));
}
HSL, filters and custom properties
JavaScript & a little Math
Controlled environment
Uncontrolled environment
<body style="--hue: 35">
...
</body>
body{
--bgHue: hsl(var(--hue), 80%, 40%);
--darken: hsl(var(--hue), 90%, 20%);
--lighten: hsl(var(--hue), 90%, 80%);
background-color: var(--bgHue);
}
.menu-list_link{
color: #fff;
background-color: var(--darken);
}
Check out final demo
.content-img::after{
content: "";
background-color: var(--bgHue);
opacity: 0.3;
...
}
.content-img{
/* Not available in Firefox */
filter: hue-rotate(calc(var(--hue) * 1deg));
}
/* Not available in Firefox */
--bgInvert: hsl(calc(var(--hue) + 180), 70%, 60%);
What if the brightness is unknown?
Background-color & text color
And black or white text*
*Or vice versa.
Apply .dark or .light accordingly
brightness = (color.r * 299 + color.g * 587 + color.b * 114 ) / 1000
rgb(40, 230, 30)
(40*299 + 230*587 + 30*144) / 1000 = 151.29
if(brightness > 128){
// Apply #000 text color
el.classList.add("light-background");
} else {
// Apply #FFF text color
el.classList.add("dark-background");
}
rgb(71, 170, 22) (Green)
(71*299 + 170*587 + 22*144) / 1000 = 124.18
Between values 115 and 135
if (brightness >= 115 && brightness <= 135){
// Turn lightness down a 20%
el.style.backgroundColor = getHslDarken( originalBackgroundStyle );
// Apply #FFF text color
el.classList.add("dark-background");
} else if (brightness < 115) {
// Apply #FFF text color
el.classList.add("dark-background");
} else if (brightness > 135) {
// Apply #000 text color
el.classList.add("light-background");
}
// Turn lightness down a 20%
lightness = Math.floor(l * 100 - 20);
// Apply color
result = "hsl(" + hue + ", " + saturation + "%, " + lightness + "%)";
return result;
Text color & background-color