🎨 Colour Harmony — Complementary, Triadic & HSL Theory

RGB describes a colour as intensities of red, green and blue light, which is how monitors work but has no direct relationship to the concept of "hue angle." There is no simple formula in RGB that expresses "add 120 degrees of hue." HSL (Hue, Saturation, Lightness) maps colour onto a cylinder where hue is an angle from 0 to 360 degrees, so any harmony rule becomes straightforward modular arithmetic: partner hue = (H + offset) mod 360. The simulation computes entirely in HSL and converts to RGB and hex only for display, which is why dragging the hue slider produces perfectly consistent harmony colours regardless of saturation or lightness.

Simultaneous contrast, documented by Michel Eugène Chevreul in 1839 and explored at the Bauhaus by Josef Albers, is the phenomenon where adjacent colours alter each other's perceived hue and brightness. A neutral grey square looks greenish on a red background and reddish on a green one. This means even a mathematically correct complementary pair can appear unbalanced in a real layout if area proportions are wrong. Designers typically use one dominant colour occupying roughly 60 percent of the composition, a secondary colour at 30 percent, and an accent at 10 percent to counteract this effect.

Isaac Newton bent the visible spectrum into a circle in his 1704 work "Opticks" so that the violet end could be shown adjacent to red, reflecting their perceptual similarity. Johann Wolfgang von Goethe published a rival theory of colour emotion in 1810. The systematic application of colour wheels to art education began with Johannes Itten at the Bauhaus in the 1920s, whose book "The Art of Color" (1961) codified the complementary, triadic and tetradic schemes still used today. Josef Albers further developed the study of colour interaction in "Interaction of Color" (1963).

Colour harmony rules are embedded in virtually every visual design discipline. Brand identity systems define primary, secondary and accent colours using complementary or triadic relationships to ensure visual cohesion across media. Web and app UI toolkits derive their colour tokens from analogous or split-complementary palettes for readability. Film and television use complementary colour grading — the iconic orange-and-teal look applies a complementary scheme to skin tones and backgrounds. Interior designers use the 60-30-10 rule anchored in analogous or complementary selections, and fashion designers use seasonal palettes built on analogous harmonies.

Yes — tetradic (also called square or double-complementary) places four colours at 90-degree intervals, giving the richest variety of hues but also the highest risk of imbalance. Because all four hues are equally spaced and all create contrast with each other, it is easy to produce a busy or chaotic result. The practical advice from colour theory is to let one of the four colours dominate in area and use the others as accents; reducing saturation on some colours also helps. Simpler schemes like analogous or split-complementary are generally safer starting points for most design projects.

A monochromatic scheme uses a single hue throughout but varies its saturation and lightness to create tonal variation. This produces the most cohesive, restrained palettes possible because there is no hue contrast at all — only value and chroma contrast. In this simulation, monochromatic mode keeps the hue fixed and applies lightness offsets of plus or minus 15 and 20 percent to generate the partner colours. Monochromatic palettes are widely used for minimalist design, luxury branding and interfaces where calm and focus are priorities.

WCAG (Web Content Accessibility Guidelines) require minimum contrast ratios between text and background — 4.5:1 for normal text and 3:1 for large text. These ratios are calculated from relative luminance, which depends on lightness rather than hue. This means a complementary pair can be harmonically perfect yet fail accessibility checks if both colours share similar lightness. Modern design systems therefore treat harmony as a starting point and then adjust the lightness axis to meet contrast requirements, using tools like the APCA contrast algorithm for finer perceptual accuracy.

Yes. The standard HSL and RYB (red-yellow-blue) wheels used in art education are perceptually non-uniform — equal angular steps do not produce equally different-looking colours. Perceptually uniform colour spaces such as CIELAB, CIELCH and the newer Oklab correct for this by mapping colours so that equal numerical distances correspond to equal perceived differences. Harmony tools built on Oklab or CIELCH produce palettes that feel more balanced across hue families. The Munsell colour system, developed in 1905, was an early attempt at perceptual uniformity and is still used in paint standardisation. Current research in computational colour harmony also incorporates preference data from large-scale human studies.