Color Picker & Palette

About the Color Picker & Palette

The Color Picker and Palette tool lets you pick any color, generate harmonious palettes, check contrast for accessibility, and export the values as HEX, RGB, HSL, or ready-to-use CSS — perfect for designers and developers.

Check contrast before you build, not after

This is the step people skip and regret. The contrast checker scores foreground-on-background pairs against the WCAG thresholds: 4.5:1 for normal body text to pass AA, 3:1 for large text, and 7:1 for AAA.

Mid-grey text on white — the look every minimal design tutorial pushes — routinely lands near 3:1 and fails outright. It looks elegant on a good monitor in a dim room, and becomes unreadable on a phone in daylight, which is where a large share of your visitors are. Finding that out after you've built twelve components is a redesign. Finding out now is a nudge on a slider.

Accessibility is the headline reason, but it isn't the only one. Low-contrast text also fails on cheap laptop screens, on projectors, in bright rooms, and for anyone over about forty. It's a robustness problem as much as a compliance one.

Choosing a harmony

• Analogous — neighbours on the wheel. Calm and cohesive, nothing competes. A sound default for content-led sites.
• Complementary — opposites. Use when you need exactly one thing to pop, like a single call-to-action on an otherwise quiet page.
• Triadic — three evenly spaced hues. Energetic, and effective when you have genuinely distinct sections to separate and the discipline to keep it restrained.
• Monochromatic — one hue at varying lightness. Almost impossible to make ugly, and the safest choice when the imagery is doing the visual work.

Export as CSS custom properties and paste the block straight into your stylesheet at the start of the project. Having the palette as variables from minute one is what prevents six near-identical blues accumulating in your CSS by the end of the week. HEX, RGB and HSL are all available because different tools want different formats — and HSL is worth learning to read, since adjusting lightness while holding hue is exactly how you build a scale.

Works well with

Once the palette passes, fill the layout with deliberately uneven Lorem Ipsum to stress-test it, and check your metadata lengths in the Word Counter. The shipping a small website guide runs the whole sequence in order and explains why contrast comes first.

Frequently Asked Questions