Color Picker
Pick a color, read it in HEX, RGB and HSL, grab matching shades and check text readability — all computed locally in your browser.
How to use
- Use the color picker — or type a HEX / RGB / HSL value into any field.
- All three formats, the preview and the shade cards update together.
- Click Copy next to any value — or on a shade card row — to copy it; the button shows Copied! for a moment.
Frequently asked questions
Which color formats does it output?
HEX (like #3B82F6), RGB (like rgb(59, 130, 246)) and HSL (like hsl(217, 91%, 60%)). All three stay in sync in both directions — edit any field and the others update. Every value has a Copy button next to it, and each shade card can copy all three formats too.
What are the shade swatches below the picker?
Five steps of your color: 40% darker, 20% darker, the original, 20% lighter and 40% lighter — handy for building a quick palette or hover states.
What is the readable-text preview for?
It shows your color as a background with either black or white text on top — whichever has the better WCAG contrast ratio — so you can tell at a glance if text on that color would be legible.
Does the picker upload my colors anywhere?
No. All conversions run locally in your browser; nothing is sent to a server.
Can I paste a color instead of using the picker?
Yes. Type a HEX value (3 or 6 digits, with or without #), an rgb(...) or an hsl(...) expression into the matching field and everything updates.