Color Picker
Pick a color visually or type a hex code, then copy its HEX, RGB and HSL values.
Pick a color
#3B82F6
HEX#3B82F6
RGBrgb(59, 130,
246)
HSLhsl(217, 91%,
60%)
CSSbackground-color:
#3B82F6;
Custom property--color:
#3B82F6;
How to use the Color Picker
- Click the color box to open your system color picker, or type a hex code such as #3B82F6.
- Fine tune the color with the red, green and blue sliders if you need an exact value.
- Press Copy beside HEX, RGB, HSL or a CSS snippet to put that value on your clipboard.
Features
- Native color picker plus manual hex entry
- Red, green and blue sliders for fine tuning
- HEX, RGB and HSL values with one click copy
- Ready made CSS snippets and custom properties
Advertisement
Frequently Asked Questions
Common questions about the free online color picker.
Click the color box, choose a shade, and the HEX, RGB and HSL values appear immediately in
the results panel.
It shows HEX, RGB and HSL, plus CSS snippets for background-color and a custom property.
Yes. Type a three or six digit hex code in the text field and the color updates as you type.
Yes. Changing one control updates the others, so you can start visually and then fine tune
the numbers.
Every row has its own Copy button, so you can copy just the HEX code or a whole CSS
declaration.
HSL stands for hue, saturation and lightness. It is often easier to reason about than red,
green and blue values.
Yes, the tool is fully responsive and the native picker works on phones and tablets.
No. All color conversions happen in your browser, so nothing is uploaded.
Yes, the color picker is completely free and needs no account.
Last updated: October 10, 2026