Colour theory lab.
Explore complementary, analogous, and triadic colours with a draggable colour wheel. Build a palette and export CSS.
Created by Navan SamiColour is a relationship.
A hue is a position on a colour wheel. Rotate one colour and the relationships move with it. This lab uses the digital HSL wheel: red at 0°, green at 120°, and blue at 240°. It differs from a traditional paint colour wheel.
Drag a numbered picker to edit its hue. Drag the wheel background to rotate all colours. You can also use the sliders or arrow keys on a picker.
Opposite hues, 180° apart. Try using one as a main colour and the other as an accent.
:root {
--colour-1: #E26A36;
--colour-2: #36AFE2;
}Hue isn’t the whole story.
Saturation controls the intensity of the hue. Lightness moves it toward black or white. Try lowering saturation: the relationship stays the same, but the palette feels different.
Equal HSL lightness does not mean equal perceived brightness. A harmonious palette also needs readable contrast; these relationships alone do not guarantee accessible text.
Read the HSL reference ↗A hue is at 30°. Where is its complement?
Think halfway around the wheel.