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;
Color values are calculated in your browser; nothing is uploaded.

How to use the Color Picker

  1. Click the color box to open your system color picker, or type a hex code such as #3B82F6.
  2. Fine tune the color with the red, green and blue sliders if you need an exact value.
  3. Press Copy beside HEX, RGB, HSL or a CSS snippet to put that value on your clipboard.

Features

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