How it works
RGB is how a screen stores colour: amounts of red (R), green (G) and blue (B), each 0 to 255. Great for computers, awkward for people: from 30, 111, 217 it is hard to tell what the colour is or how to make it "a bit lighter".
HSV (HSB in Photoshop) describes colour the way we think about it: H (hue) is an angle on the colour wheel, 0–360° (0° red, 120° green, 240° blue); S (saturation) goes from grey at 0% to pure colour at 100%; V (value) goes from black at 0% to full brightness at 100%.
HSL is similar, but uses L (lightness) instead of value: 0% is black, 50% is the pure colour, 100% is white. CSS understands it: hsl(214, 76%, 48%).
HEX is the same three RGB numbers in hexadecimal: #1e6fd9 = 0x1e, 0x6f, 0xd9. The short form #rgb doubles every digit: #f80 = #ff8800.
Edit any field and the others update instantly. H/S/V/L are kept to 0.1 precision, so RGB → HSV → RGB gives back exactly the original colour.
RGB → HSV formula (R, G, B divided by 255):
max = max(R, G, B), min = min(R, G, B), d = max − min
V = max
S = max = 0 ? 0 : d / max
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
(if d = 0 the hue is undefined, H = 0)
Where it is used
- Building palettes — shades of one hue come from changing S and V/L; analogous and complementary colours from rotating H by 30°, 120°, 180°.
- UI states — a hover colour slightly darker, a disabled one less saturated: in HSL that is one number, not three.
- Photoshop, Figma, GIMP colour pickers — the square with a hue slider is HSV/HSB; the converter helps move the values into code.
- Computer vision — in OpenCV colour segmentation (find all red or green objects) is done in HSV because hue depends little on lighting. Note: OpenCV uses H = 0–179 (degrees divided by 2), S and V = 0–255 — shown below the form.
- LED strips and RGB lighting — rainbow and colour-fade effects are easiest to drive by H, then sent to the controller as RGB.
- Games and shaders — hue shift, tinting and colour grading are done via HSV.
- CSS —
hsl()is handy for themes and variables: change only the lightness to get light and dark variants.