Color in Numbers
We've touched on this topic, but let's understand the real difference and what to use when.
1. HEX (#RRGGBB)
Most compact format. Perfect when you just copy colors from Figma.
In HEX, you can add transparency by appending 2 more digits at the end: #ff573380 (80 at the end is ~50% transparency). But this is hard to read, better use RGB/HSL.
2. RGB (Red, Green, Blue)
Computer-friendly format. Modern syntax (CSS Color L4) allows writing without commas:
background-color: rgb(255 87 51 / 50%); /* 50% transparency */
3. HSL (Hue, Saturation, Lightness)
Most powerful tool for developers.
- Hue: 0 to 360 (color).
- Saturation: saturation (0% — gray, 100% — vibrant).
- Lightness: brightness (0% — black, 100% — white).
Want to make color slightly darker on hover? Just reduce the last number (Lightness) by 10%. This is much easier than picking a new HEX.
4. Future: OKLCH
Modern color standard. It's " perceived by the eye " uniformly. Unlike HSL where yellow seems brighter than blue at same Lightness, in OKLCH brightness always corresponds to reality.