On the web, the same colour can be written in several ways. All three main formats — HEX, RGB and HSL — are supported in every modern browser and CSS preprocessor. The choice is a matter of convenience and team conventions.
HEX
Most popular
#c8002a · #C8002A · #f00 = #ff0000
Hexadecimal encoding of three bytes: #RRGGBB. Each pair is a channel value from 00 to FF. Short form #RGB expands to #RRGGBB. Case-insensitive. Supports transparency: #RRGGBBAA.
RGB
For JS & Canvas
rgb(200, 0, 42) · rgba(200, 0, 42, 0.5)
Three channels Red / Green / Blue, each 0 to 255. The rgba() form adds a fourth parameter — opacity 0 (transparent) to 1 (opaque). Convenient for calculations and animations in JavaScript.
HSL
For designers
hsl(348, 100%, 39%) · hsla(H, S%, L%, a)
Hue — angle on the colour wheel 0–360°. Saturation — 0% grey, 100% pure. Lightness — 0% black, 50% colour, 100% white. Easy to create light/dark variants — just change L.
When to use what
Practice
design system → HSL · Figma → HEX · JS → any
HEX — the standard for design handoff, copied from Figma. RGB — for dynamic styles in JS, Canvas, SVG filters. HSL — for design tokens where you manage variants like --color-500, --color-600.