Converting hex, RGB and HSL without losing your mind
I still default to hex when I'm skimming a stylesheet, because six characters fit in my head. But hex is a dead end if you want to nudge a color — you can't just "make this 10% lighter" without a calculator. That's what the other two formats are for.
RGB is what most image editors and canvas APIs actually store internally, so it's worth knowing even if you never type it by hand. HSL is the format for editing: hue, saturation, lightness, three sliders that match how you'd describe a color to a colleague. Bounce between formats with the Hex to RGB Converter, the RGB to HSL Converter, or the HSL to Hex Converter. Need to see a color in all three formats side by side instead of converting one at a time? The Color Picker does that.
Contrast ratios, and where they quietly fail
WCAG's numbers are specific: 4.5:1 for normal body text at AA, 3:1 for large text, 7:1 if you're chasing AAA. Nothing ambiguous about it. Run any two colors through the Color Contrast Checker and it'll tell you flatly which level you cleared, if any.
Where this bites people: light grey placeholder text on a white input, or a pale brand color used for body copy. Both routinely land around 2.5:1 — nowhere close. You almost never have to abandon the brand color to fix this. Keep the original for headings and backgrounds, then generate a darker step of the same hue for actual reading text with the Color Tint & Shade Generator. Check the result against the Color Picker before you ship it.
Building a palette that doesn't fall apart
Pick one color first. Everything else should be derived from it, not chosen separately — that's the difference between a palette that feels designed and one that feels assembled from swatches you liked individually.
The Complementary Color Finder gives you the hue sitting directly across the wheel. Good for a single accent or a call-to-action button. Bad for anything covering more than about 10% of the screen — it's too loud at that scale.
For most interfaces, one hue plus a neutral gets you further, with lightness doing the work of variation. That's the job of the Color Tint & Shade Generator. If you'd rather browse options than build from scratch, the Color Palette Generator throws out harmonious combinations you can pick from and adjust. And once you've settled on colors for a background, the CSS Gradient Generator writes the linear-gradient CSS so you don't have to.
Frequently asked questions
- How do I convert a hex color to RGB?
- Break the six-digit code into three two-digit pairs and convert each pair from hex to decimal — you'll land somewhere between 0 and 255 for each. As an example, #FF8800 works out to rgb(255, 136, 0).
- What contrast ratio do I need to pass WCAG?
- For AA it's 4.5:1 on normal text and 3:1 on large text (that's roughly 18pt, or 14pt if it's bold). AAA bumps the normal-text requirement to 7:1. One more number worth knowing: UI components and graphical objects only need 3:1.
- What's actually different between RGB and HSL?
- RGB is three light channels — red, green, blue — mixed together, which is close to how a screen physically works but not how anyone thinks about color. HSL splits it into hue, saturation and lightness instead. Same colors, different math. The practical upside of HSL is that you can lighten or darken a color by touching a single number instead of recalculating three.
- How do I make a lighter or darker version of my brand color?
- Convert to HSL first, then move only the lightness value and leave hue and saturation alone. If you instead mix white or black into the RGB values directly, the hue tends to drift a little, and suddenly your "lighter blue" looks slightly teal.
- What counts as a complementary color?
- Two hues sitting exactly opposite each other on the color wheel, 180 degrees apart — blue and orange is the classic pairing. They produce about as much contrast as two colors can, which is great for a button that needs to get noticed, but overwhelming if you use both across large areas next to each other.