HEX vs RGB vs HSL – CSS Colour Format Guide
All three represent the same colours — they're just different notations. The right choice depends on whether you're writing CSS by hand, working with design tokens, or building dynamic colour systems.
Format comparison
| Format | Example | Best for | Alpha support |
|---|---|---|---|
| HEX | #1a73e8 | Design tokens, copy-paste from tools | ✅ #1a73e8ff (8-digit) |
| RGB | rgb(26, 115, 232) | Dynamic JS manipulation, readability | ✅ rgba() |
| HSL | hsl(217, 82%, 51%) | Programmatic colour adjustments | ✅ hsla() |
Use HEX when
- Copying from Figma, Photoshop, or any design tool — they output HEX by default
- Defining static brand colours in CSS variables or Tailwind config
- Communicating colours to developers (short, unambiguous)
Use RGB when
- Manipulating colour channels in JavaScript (e.g. canvas, WebGL)
- Applying opacity with rgba() for overlays
- Blending or compositing operations
Use HSL when
- Building colour palettes programmatically — lighten/darken by changing L%, shift hue by adjusting H
- Creating theme variations (dark mode: reduce L, keep H and S)
- Generating complementary colours (H + 180°)
New in 2026: oklch and lab
Modern CSS supports oklch() and lab() — perceptually uniform colour spaces where equal numeric steps look equally different to human eyes. They're gaining traction for design systems. For now, HEX/RGB/HSL cover 99% of use cases.
Frequently Asked Questions
Which is most readable in code?
HSL wins for understanding what a colour looks like from the code. hsl(0, 100%, 50%) is obviously red; #ff0000 requires memorisation.
Do all browsers support HSL?
Yes — HSL has universal browser support. oklch/lab are supported in all modern browsers but not IE.
How do I convert between formats?
Use Irreva's colour converter — paste any format and get instant HEX, RGB, and HSL equivalents.