Colour wheel · Complementary · Triadic · Tetradic · Analogous · HSL theory
Explore colour harmony schemes on the colour wheel. Complementary (180°), triadic (120°), tetradic (90°), analogous (30°). Understand HSL vs RGB colour spaces and how artists use harmony rules to create visually pleasing palettes.
HSL encodes colour as Hue (0–360° around the colour wheel), Saturation (0–100% grey to vivid), and Lightness (0–100% black to white). It separates the chromatic from achromatic properties, making harmony calculations straightforward: H₂ = H₁ + offset. RGB defines colour by red, green, blue intensities and is used by displays.
Complementary: H±180° — maximum contrast, vibrant. Triadic: H, H+120°, H+240° — balanced and vivid. Tetradic: H, H+90°, H+180°, H+270° — rich variety, harder to balance. Split-complementary: H, H+150°, H+210° — contrast with less tension. Analogous: H±30° — harmonious, natural. Monochromatic: same hue, varied L and S.
Adjacent colours shift each other's perceived hue and brightness (Itten, Albers). A grey square looks different on a red vs blue background. Warm/cool contrast: warm colours (red, orange) appear to advance while cool colours (blue, green) recede. Understanding these effects helps designers choose functional palettes for readability and aesthetic balance.
Click a harmony scheme button, then drag the Hue slider or click directly on the colour wheel to select your base colour. Adjust Saturation and Lightness. The wheel highlights all harmony partner colours as dots connected by lines. Swatches show the exact palette colours with hex codes. The UI mockup at the bottom shows the palette applied to a real interface.