Color Picker: HEX, RGB, HSL, Palettes & WCAG Contrast (Free)

Choosing a color is the easy part. The work is everything around it — getting the HEX and RGB values, building a palette that holds together, and making sure your text is actually readable on the background. A good color picker does all of that in one place. Here's how to use one and what the different color formats are actually for.

HEX, RGB, HSL — which to use when

You'll see the same color written three ways:

• HEX (#3a7bd5) — the compact form you'll paste into CSS most often.
• RGB (rgb(58, 123, 213)) — the same color as red/green/blue channels; needed when you want an alpha channel (rgba).
• HSL (hsl(214, 64%, 53%)) — hue, saturation, lightness. The most human format: nudge lightness to make a tint or shade, shift hue to find a related color. Great for building palettes by hand.

A picker that shows all three lets you grab whichever your tool wants and reason about the color in whichever format makes sense.

How to use the tool

The free Color Picker goes beyond a single value:

1. Open it — no signup.
2. Pick a color; get HEX, RGB, and HSL instantly.
3. Generate color harmonies (complementary, analogous, and so on) for a coordinated palette.
4. Get tints and shades — lighter and darker steps of your color for hover states, backgrounds, and borders.
5. Check WCAG contrast to confirm text is readable on your chosen background.

It runs in your browser — no signup, nothing uploaded.

Don't skip the contrast check

This is the one most people forget. WCAG contrast measures whether text is legible against its background. Low-contrast text looks elegant in a mockup and is unreadable for a real chunk of your audience — and it's an accessibility (and increasingly legal) requirement. The tool's contrast check tells you whether a text/background pair passes, so you catch the problem at design time instead of after launch. Aim to meet the AA threshold for body text.

Building a palette that works

A reliable approach: pick one base color, use harmonies to find coordinating colors, then use tints and shades to generate the lighter/darker variations you need for UI states (hover, disabled, backgrounds). That gives you a full, cohesive palette from a single starting color — and the contrast checker keeps every text pairing readable.

Common questions

What's the difference between HEX, RGB, and HSL? They describe the same color differently — HEX is compact for CSS, RGB exposes channels (and alpha), HSL is intuitive for making tints/shades and palettes.

How do I check color contrast? Use the WCAG contrast check in the color picker — it tells you if a text/background pair is readable enough to pass.

Is it free and private? Yes — no signup, and it runs entirely in your browser.

Related reading: explore the other free tools, including the Unit Converter.

Sovereign Agentics builds free, privacy-first browser tools. Our premium Claude prompt systems fund the free ones.