Back to all tools Color Picker

Color Picker & Code Converter

Search a colour, fine-tune it with sliders, then compare a two-colour combination and get advice on what to use where.

Design client-side

Find a colour

Pick a colour here, then adjust it below

Click a colour to adjust it, or use A/B to add it straight to the comparison.

Colour ABackground
#C77800
#C77800 Orange
Colour BButtons & accents
#004BC7
#004BC7 Blue
Pairing style

Shades & tints

Lighter and darker variants of your selected colour
⚙️How it works

Drag the red, green, blue and alpha sliders (or type exact values) to build a colour. The panel updates live with the equivalent HEX, RGBA and HSLA codes, ready to copy into your CSS or design tool.

🔎Search & compare

Type a colour name (or a hex value) to find a match by name, then send any colour to A or B. The combination preview shows how the pair looks on a mock website, and the advice panel reports WCAG contrast ratios and suggests where to use each colour.

🎨Eyedropper

The “Pick a colour” button opens your system colour dialog, which in most modern browsers includes an eyedropper to sample a colour from anywhere on screen.

🔒Privacy

Everything runs in your browser — no colour is ever uploaded and nothing is stored about you.