Color Picker

How to use the color picker

1. Pick a colour, click the swatch to open your system colour picker, or drag to the exact shade you want.
2. Or type a HEX code, paste a value like #4F46E5 into the text box and everything snaps to match.
3. Copy what you need, the HEX, RGB and HSL outputs update live, and each Copy button puts that value on your clipboard.

Nothing is uploaded: the colour you pick never leaves your device, so you can experiment freely.

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