Color & Design Tools
Pick, convert, pair and check colors for real interfaces.
Coming soon
The first tools in this category are in development. In the meantime, browse everything that is already live.
About Color & Design Tools
Color work involves a lot of translation. A brand guide specifies hex, CSS wants HSL so you can adjust lightness programmatically, a design tool exports RGB, and an accessibility audit wants a contrast ratio you cannot eyeball.
These tools cover picking and converting between color formats, generating palettes and consistent shade ramps, building CSS gradients, extracting colors from an image, and checking contrast against the WCAG accessibility thresholds.
The contrast checker deserves particular attention. Roughly one in twelve men and one in two hundred women has some form of color vision deficiency, and a far larger group is simply reading your interface on a phone in direct sunlight. WCAG sets a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text — thresholds that a great many otherwise well-designed sites quietly fail, usually in placeholder text, disabled states, and light grey captions.
Working in HSL rather than hex makes systematic color work substantially easier. Once you understand a color as hue, saturation and lightness, generating a coherent set of tints and shades becomes a matter of adjusting one number rather than guessing at hex values, which is exactly what the shade generator automates.
Why HSL beats hex for real work
A hex code is three numbers describing how much red, green and blue light to emit. That is how a screen works, and it is almost useless for reasoning about color. Nothing about #2347CE tells you whether it is light or dark, how saturated it is, or what its relationship is to #1B37A6 — you have to render both to find out.
HSL describes the same color as hue, saturation and lightness, which map to how people actually think. A darker version of a color is the same hue and saturation with lower lightness. A muted version drops saturation. A complementary color is the hue plus 180 degrees. This turns building a coherent palette from a guessing game into arithmetic, and it is why design systems are usually defined in HSL even when they ship as hex.
Where contrast quietly fails
Contrast failures cluster in predictable places. Placeholder text inside form fields, which designers lighten to distinguish it from entered text. Disabled buttons. Grey captions and timestamps. Text placed over a photograph, where contrast varies across the image. White text on a mid-tone brand color, which frequently lands just under the threshold.
The ratio also depends on both colors, not just the text — which means checking a palette pair by pair rather than assuming a color is safe. Note too that WCAG's thresholds are a floor, not a target: 4.5:1 is the minimum for body text at AA, and comfortable reading in bright conditions generally wants considerably more.
Frequently asked questions
What contrast ratio do I actually need?
WCAG AA requires 4.5:1 for normal body text and 3:1 for large text — 18pt and above, or 14pt bold. AAA raises these to 7:1 and 4.5:1. Interactive elements and meaningful graphics need at least 3:1 against their background. Treat these as minimums rather than goals; text that only just passes is often still uncomfortable to read on a phone outdoors.
What is the difference between HEX, RGB and HSL?
They describe the same colors in different ways. HEX and RGB both specify amounts of red, green and blue — HEX just writes them in hexadecimal. HSL describes hue, saturation and lightness instead, which is far easier to reason about when you need a darker or less saturated version of a color. All three convert between each other exactly, with no loss.
How do I build a palette that looks coherent?
Start with one base color and derive the rest rather than picking each independently. Keep hue and saturation fixed while varying lightness for a shade ramp, and shift hue by fixed intervals for accent colors. Coherence in a palette comes from consistent relationships between colors, which is what the palette and shade generators produce automatically.
Can I pull the colors out of an image?
Yes. The image color extractor analyses an image on your device and returns its dominant colors as a palette, which is useful for matching an interface to a photograph or logo. Like every tool here, the image is processed in your browser and never uploaded.