Color Picker & Palette
Pick a color and get HEX, RGB, HSL — plus tints, shades and harmonies.
How to use Color Picker & Palette
-
Choose your color
Click the swatch to open your system color picker, or type any value in the text field — HEX, rgb()/rgba() and hsl() are all parsed live as you type.
-
Copy the format you need
Read the same color back as HEX, RGB, HSL and HSV, and hit Copy on any row to drop that exact value into your CSS or design tool.
-
Build a palette
Scan the strip of tints and shades and the complementary, analogous and triadic harmonies — click any swatch to copy its HEX in one tap.
-
Check it’s readable
Glance at the WCAG AA badges to see whether your color has enough contrast against white and black before you ship it as text.
Key features
- Pick from a native swatch or type HEX, RGB, RGBA or HSL — parsed instantly
- See HEX, RGB, HSL and HSV side by side, each with one-click copy
- Auto-generated tints and shades, plus complementary, analogous and triadic harmonies
- Built-in WCAG AA contrast check against white and black
- Sample any pixel on screen with the eyedropper, where your browser supports it
- Runs entirely in your browser — free, no sign-up, no limits
About Color Picker & Palette
Pick any color with a native swatch, type a value in HEX, RGB, RGBA or HSL, or sample a pixel straight from your screen with the eyedropper. Instantly read it back as HEX, RGB, HSL and HSV — each in a one-click-copy field. Generate a strip of tints and shades, explore complementary, analogous and triadic harmonies, and check WCAG AA contrast against white and black. Everything runs client-side, so your colors never leave your device.
Last updated 24 May 2026.
Frequently asked questions
- What color formats can I use?
- You can type HEX (3- or 6-digit), rgb(), rgba(), hsl() or hsla(), and the tool reads the color back as HEX, RGB, HSL and HSV. Any alpha you include is accepted but dropped, since the picker works in opaque color.
- What are tints and shades?
- A tint is your color mixed gradually toward white, and a shade is it mixed toward black. They give you a ready-made light-to-dark range built from a single base color.
- What do complementary, analogous and triadic mean?
- They’re harmonies based on hue: complementary is the color directly opposite yours on the wheel, analogous are its close neighbours either side, and triadic is three colors spaced evenly around the wheel. They’re handy starting points for a balanced palette.
- What does the WCAG AA contrast check tell me?
- It shows the contrast ratio between your color and white and black, and whether each pair passes WCAG AA for normal text (a ratio of at least 4.5:1). It’s a quick way to confirm your color is legible before you use it for text.
- How does picking a color from my screen work?
- The “Pick from screen” button uses your browser’s EyeDropper API to grab the color of any pixel you click, anywhere on screen. The button only appears in browsers that support it — Chrome and Edge do, while Safari and Firefox currently don’t.
- Does it work on a phone?
- Yes — the picker, text input and swatches are fully responsive and work in any modern mobile browser. The screen eyedropper is a desktop-only browser feature, so that button simply won’t show on mobile.