Color & Design · free
Color Picker
Pick a color visually and grab it as HEX, RGB, HSL or a CSS variable-ready value. Copy the format you need in one click.
About the Color Picker
Pick a color visually and grab it as HEX, RGB, HSL or a CSS variable-ready value. Copy the format you need in one click.
Everything runs in your browser — nothing is uploaded.
How to use the Color Picker
- Step 1Type or paste your input.
- Step 2The output updates live as you type.
- Step 3Copy or download the result when ready.
When people reach for this tool
Match a colour from a screenshot or a photograph
Visual matching by eye is unreliable; reading the actual value is not.
Collect colours that genuinely belong together
Sampling a real design is more reliable than inventing hex codes.
Get a value you can paste straight into a rule
Copying the formatted output avoids a typo in a long string.
Practical tips
- Work in a colour-managed environment if exact matching matters. A cheap display will not show the true value.
- Keep a note of the format you copied — the same colour in RGB and HSL is easy to mix up later.
What you get
- Live results while you type
- Runs entirely in your browser
- Copy and download with one click
Color Picker — FAQ
What formats can I copy?
HEX, rgb() and hsl() — pick whichever your CSS or design tool uses.
Which format should I copy?
HEX for stylesheets and most design tools, RGB when a tool works in channels, and HSL when you want to reason about brightness and saturation.
Can I pick a colour from my screen?
The picker works within the page. A browser eyedropper tool, if your browser offers one, is the usual way to sample from anywhere on screen.
More color & design tools
All 6 other tools in this collection — free, no sign-up, nothing uploaded.