Color Harmony Tool

The wheel this tool operates on is the HSL hue circle, where hue is an angle from 0 to 360 degrees, saturation is the percent distance from the neutral gray axis, and lightness runs from 0 percent black through 50 percent pure hue to 100 percent white. Every harmony scheme here is literally an angular offset: complementary adds 180 degrees, analogous steps plus and minus 30 degrees, triadic spaces three hues at 120 degrees, split-complementary uses 150 and 210 degrees, and the square and tetradic sets sit at 90 degree intervals. Working ranges practitioners use: 60 to 90 percent saturation for brand and accent colors, 10 to 30 percent for large background fields, and lightness near 45 to 55 percent when you want the purest expression of a hue. The important limitation is that HSL is a geometric re-projection of the RGB cube, not a perceptual model. Equal hue steps are not equal perceived steps: a yellow near hue 55 at 50 percent lightness looks far brighter than a blue near hue 240 at the identical 50 percent lightness, because HSL lightness ignores the fact that the eye assigns roughly 71 percent of perceived brightness to the green channel and only 7 percent to blue. Harmony geometry also says nothing about legibility, since a complementary pair generated at matched lightness can measure close to 1.5 to 1 in contrast and fail the WCAG minimum of 4.5 to 1 for body text.

The idea of bending the spectrum into a closed circle so that red meets violet comes from Isaac Newton, who published his color circle in Opticks in 1704. The decisive practical step came from Michel Eugene Chevreul, director of dyeing at the Gobelins tapestry works in Paris, who was asked to investigate complaints that certain dyed yarns looked dull. He found the cause was not the dye but the neighboring colors, and published De la loi du contraste simultane des couleurs in 1839, together with a 72-part chromatic circle that became the reference chart for a generation of textile and print workers. Albert Munsell, a Boston art teacher, replaced the flat wheel with a three-dimensional solid of hue, value and chroma in A Color Notation in 1905 and the Munsell Book of Color in 1915, giving color relationships measurable coordinates for the first time. Johannes Itten, teaching the preliminary course at the Bauhaus from 1919, codified the twelve-part wheel and named the dyad, triad and tetrad schemes that this tool still generates, work he collected in The Art of Color in 1961. The computational form arrived with Alvy Ray Smith, who described the HSV cylinder in a 1978 SIGGRAPH paper to give computer artists intuitive controls, and hsl notation was written into the W3C CSS Color Module Level 3, which reached Recommendation status in 2011.