HEX vs RGB — which color notation to use
HEX vs RGB on the web: #rrggbb, rgb(), and when to pick HSL or OKLCH. Converter included.
HEX is shorter in CSS and in Figma specs. rgb() is easier when you drive channels with sliders or set alpha as rgb(255 126 21 / 0.5).
It is the same screen color. HSL is closer to “lighter / more saturated”. OKLCH holds lightness better when the hue changes. The ToolsHelper picker shows all four notations at once.
#ff7e15 and rgb(255, 126, 21) are the same colour in different spellings. Hex is compact in a stylesheet. rgb() is easier to animate as three numbers. The short hex #f70 is #ff7700, not a shorthand of the long orange. Alpha is a fourth channel in both modern forms. This page is the spelling. The converter shows both for the colour you pick.
| Trait | HEX | rgb() |
|---|---|---|
| CSS length | Shorter (#rrggbb) | Longer, channels obvious |
| Alpha | #rrggbbaa | rgb(r g b / a) |
| Design tokens | Common in Figma specs | Handy when mixing three numbers in code |
FAQ
What belongs in a design system?
HEX or OKLCH for tokens. rgb() if you build the color from three numbers in code.