HEX, RGB and HSL: Three Languages for the Same Colour
Every colour on the web is the same colour written in three different languages. HEX (like #1a73e8) compresses red-green-blue values into hexadecimal — the most common notation in CSS and design tools. RGB spells out the same three channels as 0–255 numbers and becomes essential when you need transparency (rgba). HSL describes colour closest to human perception: hue (0–360 degrees), saturation and lightness — making a colour lighter or more muted means changing just one value.
Enter a colour in any of the three formats — including the short #abc notation — and you get all three back, plus a 10-step tint/shade scale and a WCAG contrast check against white and black text.
How to Use It
- Type your colour code: #1a73e8, rgb(26, 115, 232) or hsl(217, 82%, 51%) — whichever you have.
- Click convert: all three formats are listed ready to copy.
- Explore the scale: a 10-step palette from five light tints to four dark shades, ready for hover and background variations.
- Check the contrast badges: see whether white or black text on your colour passes the WCAG AA/AAA thresholds.
Practical Use Cases
- Design-to-code handoff: convert the HEX from a design file into the RGB/HSL you prefer in CSS variables.
- Button states: use one step darker for hover and one lighter for disabled — the palette stays coherent.
- Extending a brand palette: derive background, border and accent tones from a single brand colour.
- Accessibility review: verify text readability on your buttons and badges before shipping.
How to Read a HEX Code
The six digits of a HEX code are really three pairs: the first pair writes the red channel's 0–255 value in hexadecimal, the second green, the third blue. In #1a73e8, 1a (26) is little red, 73 (115) medium green and e8 (232) high blue — a vivid blue. #ffffff is white with every channel maxed, #000000 black with all at zero. When each pair repeats its digit, the short form applies: #ffcc00 can be written #fc0, and the tool recognises that notation too. Knowing this lets you roughly guess a colour's family the moment you see its code.
Why WCAG Contrast Matters
The WCAG guidelines require a contrast ratio of at least 4.5:1 between text and its background (level AA). The stricter AAA level requires 7:1, and large text passes at 3:1. This is not only about visually impaired users — it matters for anyone reading a phone screen in bright sunlight. Low-contrast interfaces increase form abandonment and hurt conversion. The badges show instantly whether your colour passes those thresholds with white and black text; note that no colour-blindness simulation is performed — the value is the contrast ratio based on the WCAG 2.x relative luminance formula.
Tips
- Beware mid-greys: a grey around 40–60% lightness contrasts poorly with both white and black; avoid it as a text colour.
- Systematise with HSL: define theme colours as HSL variables and deriving a dark theme becomes a one-line lightness change.
- Save the scale: add the 10 steps to your design system as "primary-50 … primary-900" so the whole team uses the same tones.
- Never rely on colour alone: pair error and success states with icons or text — the accessibility step after picking colours.
- Try the 60-30-10 rule: a palette feels balanced when 60% of the interface is neutral ground, 30% a secondary colour and 10% an accent; the light tints suit backgrounds while the original colour works as the accent.
- Soften tones in dark mode: saturated light-theme colours "glow" on dark backgrounds and tire the eye; pick tones one or two steps lighter and less saturated for dark themes.
A consistent palette is the cheapest building block of a professional look. To build a complete visual identity for your brand, see our corporate identity service; to turn the palette into a living interface, see our web design service.