HEX, RGB, HSL

Designers hand you a hex code, your CSS needs an rgba() with opacity, and your design system wants HSL so you can generate consistent tints and shades. This just converts between the three with a live swatch so you can eyeball it before committing.

Three formats, three mental models

• HEX (#RRGGBB) — the compact form everyone pastes around. Six hex digits, two per channel. Shorthand works when each pair repeats: #FF5500 can be written #F50.
• RGB — the same three channels as plain decimal 0–255, which is what a screen actually understands at the hardware level. Add an alpha channel for rgba() when you need transparency.
• HSL — hue/saturation/lightness is the one that actually maps to how people think about colour. Want the same colour but darker? Drop the lightness. Want a complementary colour? Add 180 to the hue. This is why design systems are usually built in HSL even though the browser gets fed hex or rgb at the end.

Contrast isn't optional

WCAG 2.1 sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against its background — and this isn't a nice-to-have, it's the line between "readable" and "fails an accessibility audit." Light grey text on white looks fine on your calibrated monitor at your desk and is genuinely unreadable on a phone in direct sunlight. If you're not sure a pairing passes, check it before it ships, not after a user complains.

A habit worth building

Define your palette once as CSS custom properties and reference the variables everywhere instead of hardcoding hex values through your stylesheet. It turns a rebrand or a dark-mode pass from "find and replace across forty files" into "edit one block of variables." Pair it with a prefers-color-scheme media query and dark mode becomes a second set of variable values rather than a parallel stylesheet.