HLS and HSI color models

Two models that describe color the way people do: by hue, by saturation and by how bright the color is. They disagree on what "bright" means, and that matters more than it seems.

Why hue-based models

The RGB model says how much red, green and blue light to mix. That is natural for a display, not for a person. "How do I make this orange a little paler?" has no simple answer in RGB, because all three components change at once.

HLS, HSI and HSV split a color into three properties:

hue (H): an angle on the color wheel, 0° is red, 120° green, 240° blue,
saturation (S): how far the color is from a gray of the same brightness,
brightness: lightness (L) in HLS, intensity (I) in HSI, value (V) in HSV. This is where the models part ways.

The HLS (HSL) model

HLS and HSL are the same model with the letters in a different order. The space is a double cone: black at the bottom, white at the top, pure hues around the rim of the middle cross-section. Lightness is the average of the largest and smallest RGB component:

max = max(R, G, B), min = min(R, G, B), d = max - min L = (max + min) / 2 S = 0 if d = 0 S = d / (1 - |2L - 1|) otherwise H = 60° · ((G - B) / d mod 6) if max = R H = 60° · ((B - R) / d + 2) if max = G H = 60° · ((R - G) / d + 4) if max = B

R, G and B are in the 0..1 range here (divide 0..255 values by 255). L and S also come out in 0..1, H in degrees.

A key property of HLS: every pure hue has L = 0.5. Red (255, 0, 0), yellow (255, 255, 0) and blue (0, 0, 255) all have the same lightness in HLS, even though the eye sees yellow as far brighter than blue. HLS is convenient for editing, but it does not measure perceived brightness.

The HSI model

HSI comes from image processing and analysis. Intensity is the plain mean of the three components, and saturation measures how little "common gray" the color contains:

I = (R + G + B) / 3 S = 1 - min(R, G, B) / I (S = 0 if I = 0) θ = arccos( ½·[(R - G) + (R - B)] / √[(R - G)² + (R - B)·(G - B)] ) H = θ if B ≤ G H = 360° - θ if B > G

In HSI the hue is computed geometrically, as the angle between the color vector and the red direction on the plane perpendicular to the gray axis. In HLS and HSV the hue is computed "around the hexagon", in linear segments. For colors exactly on the primary and secondary axes both methods agree; elsewhere they can differ by a few degrees.

In HSI the primaries have I = 1/3 and the secondaries (yellow, cyan, magenta) have I = 2/3. That is closer to what the eye sees than HLS, though still far from CIELAB, which models perceived lightness.

Worked example

A brick orange, RGB (200, 80, 40), or #c85028. Divided by 255:

R = 0.7843 G = 0.3137 B = 0.1569 max = 0.7843 min = 0.1569 d = 0.6275

HLS:

L = (0.7843 + 0.1569) / 2 = 0.4706 S = 0.6275 / (1 - |0.9412 - 1|) = 0.6275 / 0.9412 = 0.6667 max = R, so H = 60° · ((0.3137 - 0.1569) / 0.6275) = 60° · 0.25 = 15° HLS = (15°, 47.1%, 66.7%)

HSI:

I = (0.7843 + 0.3137 + 0.1569) / 3 = 0.4183 S = 1 - 0.1569 / 0.4183 = 0.625 numerator = ½ · (0.4706 + 0.6275) = 0.5490 denominator = √(0.4706² + 0.6275 · 0.1569) = √0.3199 = 0.5656 θ = arccos(0.9707) = 13.9°, B ≤ G, so H = 13.9° HSI = (13.9°, 62.5%, 41.8%)

The same color has a hue of 15° in HLS and 13.9° in HSI, saturation of 66.7% or 62.5%, and brightness of 47.1% or 41.8%. Neither is "wrong"; they are different definitions. When moving values between programs, you need to know which model each one uses.

Convert your own color

The calculator shows the same color in every model at once, including HSV, CMYK and CIELAB.

HLS, HSI or HSV?

Model	Brightness	A pure hue has	Typical use
HLS / HSL	(max + min) / 2	L = 0.5	CSS (`hsl()`), color pickers
HSV / HSB	max	V = 1	graphics software, color pickers
HSI	(R + G + B) / 3	I = 1/3 or 2/3	image analysis and segmentation

All three are transformations of RGB, so they inherit its device dependence: the same HLS value looks different on different screens. When colors need to be compared the way people see them, CIELAB or CIELUV is the better choice.