Color Palette Balance AI Calculator

Harmony rules are angular offsets on a hue circle. HSL models colour as a cylinder where hue is an angle from 0 to 360 degrees, saturation is distance from the neutral axis, and lightness is height. Complementary pairs sit 180 degrees apart, analogous sets cluster within about 30 degrees, triadic sets divide the circle into thirds at 120 degrees, split complementary uses 150 and 210 degrees to soften the opposition, and tetradic uses two complementary pairs at 90 degree spacing. These offsets are geometric conventions inherited from the painter's colour wheel rather than perceptual measurements, which is the key caveat: equal angular steps in HSL are not equal perceptual steps. Yellow near 60 degrees appears far lighter than blue near 240 degrees at identical lightness values, so a palette that is numerically even can look badly unbalanced. The balance scores here use lightness spread as a proxy for usable contrast. Distributing lightness across roughly 25 to 85 percent gives a palette enough range to build a type and surface hierarchy, and a spread of 50 points or more generally means some pair in the set will clear accessibility thresholds. That is only a proxy. The Web Content Accessibility Guidelines define contrast as a ratio between relative luminance values, requiring at least 4.5 to 1 for body text and 3 to 1 for large text at 18 point or 14 point bold, and relative luminance is a weighted function of gamma corrected red, green, and blue in which green contributes about 72 percent. Two colours with identical HSL lightness can therefore have very different luminance. Any palette intended for production should be checked pair by pair against the actual contrast ratio formula, and against colour vision deficiency simulation, given that roughly 8 percent of men of northern European descent have some form of red green deficiency.

The circular arrangement of hues begins with Isaac Newton, who bent the refracted spectrum into a closed circle in his optical work of the 1660s and published the diagram in Opticks in 1704, joining the extreme red and violet ends that do not actually meet in the spectrum. Moses Harris produced the first full colour printed wheel in The Natural System of Colours around 1770, and Johann Wolfgang von Goethe published Zur Farbenlehre in 1810 with a strongly perceptual and psychological reading of colour pairs. Michel Eugene Chevreul, working as director of dyes at the Gobelins tapestry works, published his law of simultaneous contrast in 1839 after investigating complaints about dye quality that turned out to be perceptual interactions between adjacent threads; his work gave complementary pairing an empirical basis and directly influenced the Impressionist and Neo-Impressionist painters. The move from art theory to measurable systems came with Albert Munsell, an American painter and teacher who published A Color Notation in 1905 and the Atlas of the Munsell Color System in 1915, separating colour into hue, value, and chroma along perceptually spaced steps. That three axis structure is the direct ancestor of HSL and HSV. Alvy Ray Smith described HSV for computer graphics in a 1978 SIGGRAPH paper, and the closely related HSL model entered mainstream web work through the CSS Color Module Level 3, which reached Recommendation status at the W3C in 2011 and gave designers the hsl notation used in this tool. Accessibility requirements arrived alongside: WCAG 2.0 became a W3C Recommendation in December 2008 and set the 4.5 to 1 contrast threshold, extended by WCAG 2.1 in 2018.