Color in the Digital World
Browsers support many ways to describe color. Understanding their differences helps you flexibly manage design.
1. HEX (Hexadecimal Code)
Most common format: #RRGGBB.
#ff0000— red.#ffffff— white.#000000— black.
2. RGB and RGBA
Mixing red, green, and blue (from 0 to 255).
background: rgba(255, 87, 51, 0.5); /* 0.5 — 50% transparency */
3. HSL (Hue, Saturation, Lightness) — Human-Friendly Format
Most intuitive format:
- Hue: 0–360 (position on color wheel).
- Saturation: 0% (gray) — 100% (vivid).
- Lightness: 0% (black) — 100% (white).
4. Modern Formats (Future)
New standards like OKLCH and Display P3 allow displaying brighter and more saturated colors that were previously impossible on the web.
When and What to Use?
| Format | When Best | | :--- | :--- | | HEX | For standard colors from mockups. | | RGBA/HSLA | When transparency is needed. | | HSL | When creating a palette (e.g., making a color slightly darker or lighter by changing only one number). |
In HSL, it's very easy to programmatically change colors. For example, to make the main color (hsl(200, 50%, 50%)) darker for hover state, just decrease lightness: hsl(200, 50%, 30%).