How to pick a color
- Pick a color with the color input, or click a saved or palette swatch to load it.
- Use the one-click Copy button beside each value to paste it straight into your CSS.
- Check the contrast readout, which shows whether black or white text gives a higher contrast ratio on your color - a quick accessibility check.
Complementary
Analogous
Shades
Save this color
Recent colors
Color Picker
Pick a color and read its HEX, RGB, and HSL values side by side, then explore the complementary, analogous, and shade palettes the tool generates for it - click any swatch to switch the picker to that color.
The palettes it builds for you
Color Picker derives three ready-made swatch sets from the color you chose, each by fixed arithmetic rather than a hand-curated theme, so the same input color always yields the same palette. It is a picker and palette generator only: there is no gradient builder and no image eyedropper to sample a color out of a photo.
| Palette | How this tool builds it |
|---|---|
| Complementary | The opposite color - each red, green, and blue channel is inverted (255 minus the value). |
| Analogous | Two neighboring hues, 30 degrees to either side, keeping the same saturation and lightness. |
| Shades | Five steps of the same hue and saturation, stepping the lightness from dark to light. |
Save and reopen your colors
- Save any color to a favorites list, with an optional name you choose.
- The colors you used recently are remembered for you, so you can step back to one you tried earlier.
- Both lists are kept in this browser's local storage, ready the next time you open the page on this device - they are never synced to a server or another machine.
Your colors and palettes never leave this device
Every HEX, RGB, and HSL conversion, each generated palette, and the contrast readout are computed locally in your browser - there is no upload step and no account to create, so the colors you pick never leave the page.
Why the shades palette never shows a pure black or white swatch
The five Shades swatches land at roughly 17%, 33%, 50%, 67%, and 83% lightness, so even the darkest and lightest of them stop short of true black (0% lightness) and true white (100%). Pick a fully saturated color like pure red and look at the two end swatches: the darkest reads closer to a deep maroon than to black, and the lightest closer to a pale pink than to white. For an actual black or white swatch, use the native color input itself rather than the Shades row.
What the contrast readout's AA pass/fail line actually checks
Below each color, Color Picker's contrast readout compares your pick against both black text and white text and reports the better of the two ratios, then labels it "AA pass for text" once that ratio reaches 4.5:1 - the WCAG 2.1 threshold for normal-size text at level AA. That is the only comparison the readout makes: it does not separately check the AA threshold for large text (3:1) or either AAA threshold (7:1 for normal text, 4.5:1 for large text). In practice the readout will never show "below AA" for any color, because the higher of the black-contrast and white-contrast ratios has a mathematical floor of about 4.58:1, already above the 4.5:1 line it checks. Treat the readout as confirmation that a color clears the normal-text AA bar, not as a full accessibility audit against every WCAG level.
This is one of the developer tools. Once you have a color, drop it into a background with the CSS Gradient Generator, or browse the full set of formatters, minifiers, and converters on the hub.
Read the guide: How to Pick a Color Online - HEX, RGB, and HSL
Frequently Asked Questions
What does Color Picker do?
Choose a color from the native picker and the tool converts it to HEX, RGB, and HSL in the browser, then builds complementary, analogous, and shade palettes you can click to re-select as your next pick.
Can I copy a picked color straight into my CSS?
Yes. Each of the HEX, RGB, and HSL readouts next to the picked color has its own one-click copy button, so you can drop the exact string your stylesheet needs into your code without retyping the channel values by hand.
What else can I do here besides reading a color's HEX, RGB, and HSL?
Beyond reading a picked color's HEX, RGB, and HSL values side by side, Color Picker builds complementary, analogous, and shade palettes you can click to re-select, shows a quick black-or-white contrast check for accessibility, and lets you save colors to a browser-only favorites list with an optional name.
Does saving a color I already favorited create a duplicate?
No. Color Picker matches favorites by the exact color value, so saving a color that is already on your favorites list just updates that entry's name and timestamp instead of adding a second row. The favorites list itself has no maximum length.
What happens to older colors once Recent colors passes 20?
Recent colors is capped at 20 entries. Picking a color already in the list moves it to the front instead of duplicating it, but once you have picked 21 distinct colors, the oldest one is silently dropped to make room.
What happens if the Copy button next to a value does nothing?
Color Picker uses the browser's Clipboard API to copy the HEX, RGB, or HSL value. If your browser blocks clipboard access - for example outside HTTPS or without permission granted - the button does nothing and shows no error, so copy the value manually from the readout text instead.