What is a colour picker?
A colour picker lets you choose a colour visually and gives you the codes to use it in CSS, design tools and documents. Designers and developers use it to match a brand colour, build a palette, or translate between the formats different tools expect.
This picker shows HEX, RGB, HSL, HSV and CMYK together, generates nine tints and nine shades, suggests four classic colour harmonies, and checks the contrast of white and black text against the colour. Clicking any swatch makes it the working colour, and the link remembers it.
How to use the Colour Picker
1.Pick a colour
Use the picker, or type a HEX, rgb() or hsl() value.
2.Copy a code
Each format has its own Copy button.
3.Build a palette
Click a tint, shade or harmony to make it the main colour; the link keeps your choice.
Example: #2547d0
The default blue in every format:
- RGB
- rgb(37, 71, 208)
- HSL
- hsl(228, 70%, 48%)
- CMYK
- cmyk(82%, 66%, 0%, 18%)
- Complementary
- #d0ae25
- White text contrast
- 7.26:1 (passes AAA)
Its complement is a warm gold, opposite on the colour wheel.
Tints, shades and harmonies
Tints mix the colour with white and shades mix it with black, in 10% steps, which is a quick way to build hover states, borders and backgrounds from one brand colour. Harmonies rotate the hue around the colour wheel: complementary is opposite (180°), analogous sits either side (±30°), triadic spreads three colours 120° apart.
The text suggestion uses WCAG contrast: it picks whichever of white or black gives the higher ratio against the colour, a good starting point for buttons and badges.
Frequently asked questions
What's the difference between HEX and RGB?
They're the same colour written differently: #2547d0 is rgb(37, 71, 208), with each pair of hex digits being one channel from 0 to 255.
Why use HSL?
Hue, saturation and lightness are easier to adjust by hand: change only lightness to get a lighter or darker version of the same colour.
Is CMYK accurate for printing?
It's a straight mathematical conversion. Printers use colour profiles, so ask for a proof for brand-critical work.
Can I pick a colour from my screen?
Some browsers' colour pickers include an eyedropper for anything on screen; click the colour box to see if yours does.
Related tools
HEX ↔ RGB ↔ HSL Converter
Convert a colour between HEX, RGB, HSL, HSV and CMYK, with alpha.
Colour Contrast Checker (WCAG)
Check text and background colours against WCAG AA and AAA.
JSON Formatter & Validator
Pretty-print, minify, sort and validate JSON with line-numbered errors.
JSON ↔ CSV Converter
Convert JSON arrays to CSV and CSV back to JSON.
JSON to TypeScript Interface Generator
Generate TypeScript interfaces or types from a JSON sample.
JSON ↔ YAML Converter
Convert JSON to YAML and YAML to JSON.