The same colour has several correct notations, and which one you want depends on what you are doing. Hex is compact and universal in CSS. RGB is how screens actually work. HSL is the only one you can adjust intuitively, because its three numbers correspond to properties designers actually think in: which colour, how vivid, how light.
Hex and RGB are the same information in different clothing — #FF5733 is simply 255, 87, 51 written in base 16. HSL is a genuine reprojection of the same colour space, and that is what makes it useful.
The formats
| Format | Example | Best for |
|---|---|---|
| Hex | #FF5733 | CSS, design handoff, compact notation |
| RGB | rgb(255, 87, 51) | Screens, canvas and image processing |
| RGBA | rgba(255, 87, 51, 0.5) | Anything needing transparency |
| HSL | hsl(11, 100%, 60%) | Building palettes and adjusting by hand |
| CMYK | 0, 66, 80, 0 | Print — a subtractive process, not screen |
Why HSL is easier to work with
To make a hex colour ten percent lighter you have to adjust three unrelated numbers and hope. In HSL you change one: the lightness. Keeping hue and saturation fixed while varying lightness produces a coherent tint-and-shade scale, which is precisely how design system palettes are built. Rotating the hue by 180° gives the complement; by 120° in each direction gives a triadic scheme. The colour relationships that are arbitrary in hex are arithmetic in HSL.
Contrast and accessibility
- WCAG AA requires a contrast ratio of at least 4.5:1 for body text against its background.
- Large text, meaning 18pt or 14pt bold and above, may go down to 3:1.
- AAA raises the bar to 7:1 for body text — worth targeting for long-form reading.
- Contrast depends on relative luminance, not on how different two colours look. Two vivid colours of similar lightness can fail badly.
- Never use colour alone to convey meaning; around 8% of men have some form of colour vision deficiency.
Why print looks different
Screens emit light and mix red, green and blue additively toward white. Print reflects light and mixes cyan, magenta, yellow and black subtractively toward black. The two gamuts do not overlap fully, and the vivid saturated colours that a screen produces easily — bright oranges, electric blues — are outside what CMYK ink can reproduce. Any conversion to CMYK is therefore approximate, and anything colour-critical should be proofed on the actual press rather than trusted from a screen.
Related tools
- Number Base Converter — hex is base 16
- Percentage Calculator
- Browse all free tools