Color codes: HEX, RGB, HSL
ffffff, rgb(255,255,255), hsl(0,0%,100%): understanding the main color code systems used in design and on the web.
HEX (hexadecimal)
#RRGGBB #FF5733 → red=FF, green=57, blue=33
Each pair of characters (00 to FF, i.e. 0 to 255 in decimal) encodes the intensity of a red/green/blue component. The most common format in CSS and design.
RGB (red, green, blue)
rgb(255, 87, 51) rgba(255, 87, 51, 0.8) → with transparency (alpha)
Same idea as HEX, but as decimal values from 0 to 255 — easier to read when tweaking one specific component.
HSL (hue, saturation, lightness)
hsl(11, 100%, 60%)
| Component | Range | Meaning |
|---|---|---|
| Hue | 0-360° | Position on the color wheel |
| Saturation | 0-100% | Color intensity (0% = grey) |
| Lightness | 0-100% | Brightness (0% = black, 100% = white) |
HSL is often more intuitive for building color variants: keeping the same hue and only varying lightness gives you consistent shades — ideal for a light/dark theme.
Common named CSS colors
| Name | HEX |
|---|---|
| black | #000000 |
| white | #FFFFFF |
| red | #FF0000 |
| tomato | #FF6347 |
| steelblue | #4682B4 |
| gold | #FFD700 |
Contrast and accessibility
The contrast ratio between text and its background should reach at least 4.5:1 (WCAG AA) for standard text to stay readable for most people, 3:1 for large text (18pt+, or 14pt bold).
CMYK: the print system
cmyk(0%, 66%, 80%, 0%) " cyan, magenta, yellow, black
Unlike RGB (additive colors, for a screen that emits light), CMYK is a subtractive system used in printing: you start from the paper's white and subtract light by layering inks. A vivid RGB color on screen doesn't always reproduce faithfully in CMYK — that's why a file meant for print should be prepared in CMYK from the start, not just converted at the end.
Short HEX and alpha
#FFF equals #FFFFFF (shorthand notation, 1 character per component) #FF5733CC HEX with an alpha channel (transparency), last 2 characters = opacity
Converting HEX ↔ decimal in your head
Each hex digit runs from 0 to F (0-9 then A-F for 10-15). FF = 15×16 + 15 = 255 (the maximum), 00 = 0 (the minimum), 80 ≈ 128 (roughly half).
Thanks for the feedback!