Rgb Hsl Hsv Converter

HSL and HSV are not independent color spaces; they are cylindrical re-projections of the same RGB cube, computed from just three quantities: the largest channel, the smallest channel, and their difference. Hue is the angle around the cylinder from 0 to 360 degrees, derived from which channel is largest and how far the other two sit from it, so red is near 0, green near 120 and blue near 240. The two models diverge on the vertical axis. HSV sets value equal to the maximum channel, so 100 percent value means the brightest form of that hue at its current saturation. HSL sets lightness to the midpoint of maximum and minimum, so 50 percent lightness is the pure hue while 100 percent is always white regardless of hue. Saturation is scaled differently in each, which is why the same color reports different saturation percentages in the two rows above. The accessibility figures follow a separate path. Relative luminance is not the L in HSL: it linearizes each sRGB channel by undoing the transfer curve, then weights the results 0.2126 for red, 0.7152 for green and 0.0722 for blue, coefficients taken from the ITU-R BT.709 primaries and reflecting the eye's peak sensitivity in the green region. The WCAG contrast ratio is computed as the lighter luminance plus 0.05 over the darker plus 0.05, giving a range from 1:1 to 21:1, with Level AA requiring 4.5:1 for body text, 3:1 for large text at 18.66px bold or 24px regular, and Level AAA requiring 7:1. The main caveat is perceptual: HSL lightness and hue are not uniform, so two colors at the same lightness can look very different in brightness. For perceptually even palettes use CIELAB or OKLab rather than HSL.

Describing color by hue, a saturation-like attribute and a brightness attribute predates computing. Albert Munsell published his color system in 1905 organizing color into hue, value and chroma along a three-dimensional solid built from perceptual matching experiments rather than from ink or light mixtures, and that mental model carried into graphics decades later. The specific transforms used on this page were formalized at the 1978 SIGGRAPH conference, where Alvy Ray Smith presented HSV in the paper Color Gamut Transform Pairs and George Joblove and Donald Greenberg described a closely related lightness-based variant now known as HSL, both motivated by the difficulty of asking artists to pick colors by adjusting red, green and blue sliders. Standardization of the underlying RGB space came much later. Hewlett-Packard and Microsoft proposed sRGB in 1996 to define a default monitor color space for the web, and it was published as IEC 61966-2-1 in 1999, which is what makes the linearization constants and luminance weights in the contrast calculation well defined. CSS gained hsl() notation in the CSS Color Module Level 3 work that reached Recommendation in 2011, and CSS Color Level 4 later added wider-gamut and perceptual notations. On the accessibility side, W3C published WCAG 2.0 in December 2008 with the 4.5:1 and 7:1 contrast thresholds, and WCAG 2.1 followed in June 2018; those ratios have since been written into procurement rules and accessibility legislation in numerous jurisdictions.