When to use each format
All four formats describe the same color, but each is handier for a given task. HEX is the most compact and the de-facto standard for pasting a color into CSS or sharing it. RGB is useful when you need to manipulate the red, green and blue channels separately, for example in canvas or image processing. HSL and HSV separate hue from brightness, so they are ideal when you want to lighten, darken or desaturate a color intuitively.
How to read RGB and HEX
RGB combines three channels from 0 to 255: red, green and blue. rgb(255, 0, 0) is pure red. HEX is exactly the same, but in base 16: #FF0000, where FF is 255. A 3-digit HEX like #f00 is shorthand for #ff0000 (each digit is doubled). That is why both notations describe the same color.
- #FF0000 = rgb(255, 0, 0) = pure red.
- #00FF00 = rgb(0, 255, 0) = pure green.
- #0000FF = rgb(0, 0, 255) = pure blue.
- #000000 = rgb(0, 0, 0) = black; #FFFFFF = white.
The intuition behind HSL
HSL breaks a color into three ideas that are easy to picture. Hue (H) is an angle from 0 to 360 degrees on the color wheel: 0 is red, 120 green, 240 blue. Saturation (S) goes from 0% (gray) to 100% (vivid color). Lightness (L) goes from 0% (black) to 100% (white), with the pure color at 50%. To lighten a color in CSS you raise L; to desaturate it you lower S, without touching the hue.
HSL vs HSV
HSV (also called HSB, for brightness) is similar to HSL but defines the lightness axis differently. In HSV, value (V) at 100% is the brightest possible color, and lowering V moves it toward black; saturation at 100% is always the purest color. In HSL, by contrast, the pure color sits at L = 50%, and raising L moves it toward white. That is why #FF0000 is hsl(0, 100%, 50%) but hsv(0, 100%, 100%). HSV is the typical model behind the color pickers in Photoshop and other graphics tools.
Common colors in every format
Reference table of frequent colors and their exact equivalence:
| Color | HEX | RGB | HSL |
|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Brand blue | #3498DB | rgb(52, 152, 219) | hsl(204, 70%, 53%) |
Transparency and the alpha channel
All four formats in this tool describe solid colors. For transparency, CSS adds a fourth value: rgba(52, 152, 219, 0.5) or hsla(204, 70%, 53%, 0.5), where the last number (0 to 1) is the opacity. There is also 8-digit HEX (#3498db80), where the last two digits are the alpha in hexadecimal. Alpha is independent of the base color, so you can convert the color here and add opacity separately.