If you have ever looked at a design file and seen #14B8A6 or rgb(20, 184, 166) or hsl(173, 80%, 40%) and wondered what the difference is and when to use which — this guide is for you. All three describe the same teal colour. The format you choose depends on context, tooling, and what you're optimising for.
HEX is the most common colour format on the web. It encodes a colour as three pairs of hexadecimal digits: #RRGGBB. Each pair represents a channel (red, green, blue) on a scale from 0 (00) to 255 (FF).
Examples:
#FFFFFF — white (all channels at max)#000000 — black (all channels at zero)#FF0000 — pure red#14B8A6 — teal (red=20, green=184, blue=166)When to use HEX: In CSS stylesheets, design tokens, and any context where a single short string is convenient. Most design tools export colours as HEX by default. It is compact and universally supported.
Shorthand: When both digits in a pair are the same, you can abbreviate. #FFFFFF becomes #FFF, #336699 becomes #369. Not all pairs are shorthand-eligible.
RGB expresses a colour as three decimal numbers, one per channel: rgb(red, green, blue). Each channel ranges from 0 to 255.
CSS also supports rgba() which adds an alpha (opacity) channel: rgba(20, 184, 166, 0.5) is the same teal at 50% opacity.
When to use RGB: When you need to manipulate individual channels in code — for example, programmatically adjusting brightness or generating colour variations. Also when you need an alpha value, since HEX requires an 8-digit form (#14B8A680) which is less readable.
RGB maps directly to how screens physically work: every pixel is a cluster of red, green, and blue subpixels lit at different intensities.
HSL stands for Hue, Saturation, and Lightness:
When to use HSL: When you want to create colour variations programmatically — making a lighter or darker shade, a more muted version, or a complementary colour. Adjusting lightness in HSL is predictable in a way that RGB adjustments are not. It is also significantly more readable to humans.
Example: creating a button's hover state. If the base colour is hsl(173, 80%, 40%), the hover state might be hsl(173, 80%, 35%) — just reduce the lightness by 5. In RGB or HEX, producing the same visual result requires computing all three channels.
Most CSS projects use a mix of all three. A practical rule of thumb:
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between foreground text and background colour. Poor contrast is one of the most common accessibility failures — affecting roughly 300 million people with some form of colour vision deficiency.
The contrast ratio is calculated using relative luminance — a measure of how much light a colour emits, adjusted for how the human eye perceives brightness. A ratio of 1:1 means no contrast (same colour); 21:1 is the maximum (black on white).
WCAG thresholds:
AA is the minimum requirement for legal compliance in many jurisdictions (UK, EU, and US government websites must meet AA). AAA is recommended for high-stakes contexts like medical information.
Criply's colour picker shows the contrast ratio of any colour you pick against both white and black backgrounds, with the corresponding WCAG grade. This immediately tells you whether your chosen colour is safe to use as text on a white page or as white text on a coloured background.
7 practical ways to work with PDFs faster. Free, instant download.
Use our free Color Picker & Converter tool — works in your browser, nothing to install.
Color Picker & Converter — Free