Color Picker
Advanced color picker and converter — pick visually, paste any format (HEX, RGB, HSL, HSV, CMYK, named), and get every code at once. Generate harmonies, tints and shades, check WCAG contrast, simulate color blindness, and extract a palette from any image. 100% in your browser.
Color Picker — Find the Perfect Colour Code Instantly
Every design starts with a colour. Whether you are styling a website, creating a logo, building a presentation, or coding a UI, you need the exact hex, RGB, or HSL value. Eyeballing colours or guessing codes wastes time and produces inconsistent results.
Our Color Picker gives you a visual saturation/brightness panel, a hue slider, an alpha slider, and (in supported browsers) an eyedropper that grabs any colour from your screen. Paste a colour in any format — HEX (including 3-, 4- and 8-digit), RGB/RGBA, HSL/HSLA, HSV, or a CSS colour name — and instantly get the HEX, RGB, HSL, HSV, CMYK and LAB codes, each copyable with one click. Then go further: generate colour harmonies, tints and shades, check WCAG contrast, preview how the colour looks to people with colour blindness, and extract a palette straight from an image. No signup, no installation, no cost.
How to Use the Color Picker
Click, drag, or enter values to find the exact colour you need. Copy the code in any format.
1. Pick a Colour
Drag on the saturation/brightness panel and hue slider, use the native picker, or just type a colour in any format.
2. Eyedropper Tool
Pick any colour directly from your screen — a photo, a website, a logo. The tool reads the exact pixel colour.
3. Get Colour Codes
View the colour in HEX, RGB, HSL, and CMYK formats simultaneously. Enter values manually to convert between formats.
4. Copy and Use
One-click copy for any format. Paste directly into your CSS, design tool, or presentation software.
Features for Designers and Developers
Every Colour Format
HEX (3/4/6/8-digit), RGB/RGBA, HSL/HSLA, HSV, CMYK, LAB and the nearest CSS colour name — all shown at once, with full alpha support. Type any one; get all the rest.
Colour Harmonies
Complementary, analogous, triadic, split-complementary, tetradic and monochromatic palettes from any base colour — click any swatch to make it the new base.
Shades and Tints
A ready-made scale of darker shades and lighter tints of your colour — perfect for building consistent UI colour ramps.
WCAG Contrast Checker
See the exact contrast ratio against white and black with AA / AAA pass or fail badges, so your text stays accessible and readable.
Palette from Any Image
Drop in a photo and the real dominant colours are extracted by quantisation (not a muddy average), ready to click, copy as CSS variables or export as JSON.
Colour-Blindness Preview
See how your colour appears with protanopia, deuteranopia and tritanopia — catch accessibility problems before you ship.
Free and Private
No signup, no tracking, and nothing loaded from other servers — every calculation runs on your device.