Design & Layout

Color Picker

An eyedropper for the web. Hover any element to read its exact colour and copy it as HEX, RGB or HSL.

When you'd use it

• Grab the exact brand colour from a client's existing site
• Confirm a button matches the hex in the design file rather than eyeballing it
• Collect colours from a site you admire while researching a palette
• Read the true colour of text that a screenshot would slightly shift

How to use Color Picker

1. Open Color Picker from the popup.
2. Hover any element to see its colour and code.
3. Click to copy the value straight to your clipboard.
4. Switch between HEX, RGB and HSL in the panel.

Color Picker FAQ

Why not just screenshot and use an image editor?

Screenshots can shift colour through compression or colour-profile conversion. Reading the computed value gives you the exact colour the browser rendered.

Can it pick colours from images?

It reads colours from element styles. For a full palette including imagery, use the Color Palette tool.

Works well with