How to use the color picker
- Pick a colour, click the swatch to open your system colour picker, or drag to the exact shade you want.
- Or type a HEX code, paste a value like
#4F46E5into the text box and everything snaps to match. - Or sample from a photo, upload an image and click anywhere on it to read that exact pixel's colour.
- Copy what you need, the HEX, RGB and HSL outputs update live, and each Copy button puts that value on your clipboard.
Experiment freely, changes update instantly.
HEX, RGB and HSL explained
The same colour can be written three common ways, and this picker shows all of them at once so you can grab whichever suits the job.
- HEX (e.g.
#4F46E5), a compact six-character code that pairs red, green and blue. It is the format you reach for most in CSS and design tools. - RGB (e.g.
rgb(79, 70, 229)), the red, green and blue channels written out as numbers from 0 to 255. Handy when you need to read or tweak a single channel. - HSL (e.g.
hsl(244, 76%, 59%)), hue, saturation and lightness. It maps to how we describe colour in plain language, so it is the most intuitive for nudging a shade lighter, darker or more vivid.
All three describe exactly the same colour, just in different units. Designers often think in HSL while picking, then ship the HEX value to code, and developers reach for RGB when a layout needs a quick channel adjustment. Because the picker keeps the formats in sync, you never have to convert by hand.
Frequently asked questions
What color codes does the picker give me?
For any colour you pick it shows the HEX, RGB and HSL codes together, so you can copy whichever format your CSS, design tool or code needs.
Can I type in a HEX code instead of using the picker?
Yes. Type a valid HEX value such as #4F46E5 into the text box and the picker, swatch, RGB and HSL outputs all update to match.
Does it support 3-digit shorthand HEX codes?
Yes. Short HEX codes like #f00 are accepted and expanded to their full six-digit form before the RGB and HSL values are calculated.