Colors Wheel and Harmony
The color wheel arranges every hue in a circle from 0 to 360 degrees, and simple angle offsets between hues on that wheel define reliable harmony schemes such as complementary, analogous, and triadic.
The wheel is just the hue value
A traditional color wheel is a circle showing every hue in order: red, orange, yellow, green, blue, violet, and back to red. HSL's hue channel is literally that same circle expressed as a number from 0 to 360 degrees. Red sits at 0/360, yellow near 60, green near 120, cyan near 180, blue near 240, and magenta near 300. Because hue is just a position on a circle, picking a related color becomes simple addition or subtraction, wrapping back around past 360.
A base color
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--base-hue: 200; /* a mid blue */
--base: hsl(200, 65%, 50%);
}
.swatch-base {
background-color: var(--base);
}
</style>
</head>
<body>
<div class="swatch-base">Base</div>
</body>
</html>Complementary: straight across the wheel
A complementary color sits exactly opposite the base hue, 180 degrees away. Complementary pairs create the strongest possible contrast between two hues, which makes them useful for elements that need to stand out from their surroundings, like a call-to-action button against the rest of a page. To compute one, add 180 to the base hue and subtract 360 if the result goes past it.
Complementary pair
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--base: hsl(200, 65%, 50%); /* blue */
--complement: hsl(20, 65%, 50%); /* 200 + 180 = 380 -> 20, a warm orange */
}
.swatch-base {
background-color: var(--base);
}
.swatch-complement {
background-color: var(--complement);
}
</style>
</head>
<body>
<div class="swatch-base">Base</div>
<div class="swatch-complement">Complement</div>
</body>
</html>Analogous: neighbors on the wheel
Analogous colors sit close together on the wheel, typically about 30 degrees apart from the base hue in each direction. Because the hues are near neighbors, analogous palettes feel calm and cohesive rather than contrasty, which is why they show up so often in nature-inspired designs and gradients, think of the blues and teals of a sunset sky.
Triadic: three evenly spaced hues
A triadic scheme picks three hues spaced exactly 120 degrees apart, dividing the wheel into equal thirds. It keeps some of the vibrancy of a complementary pair while adding a third color for balance, which is why it is a common choice for playful, energetic brand palettes.
