What color formats does it support?

HEX, RGB, HSL and CMYK — all updated live with one-click copy.

Can I pick a color from my screen?

Yes — in Chrome and Edge the eyedropper button grabs any pixel on screen, even outside the browser.

🫛 toolspea

Home › Color & Design › Color Picker

Color Picker

Pick a color, get every code format — HEX, RGB, HSL, CMYK — plus ready-made shades and tints.

Pick a color

Or type a HEX code

HEX

#16A34A

RGB

rgb(22, 163, 74)

HSL

hsl(142, 76%, 36%)

CMYK

cmyk(87%, 0%, 55%, 36%)

Shades (darker)

Tints (lighter)

Click any swatch to select it · its HEX copies automatically

🔒 Everything runs in your browser

Ad Space · AdSense code goes here later

HEX, RGB, HSL or CMYK — which one do you need?

HEX is the web standard — CSS, design tools and brand guides all speak it. RGB is the same color as numeric channels, handy in JavaScript and image editors. HSL expresses hue, saturation and lightness — the easiest format for humans to reason about ("same color, 20% lighter"). CMYK approximates how the color prints on paper — always confirm with your print shop, since screens and ink never match perfectly. The eyedropper button (Chrome and Edge) lets you grab a color from anywhere on your screen — even outside the browser.

FAQ

Why don't I see the eyedropper button?

The screen eyedropper uses the EyeDropper API, currently available in Chrome and Edge. On other browsers, use the color swatch or type a HEX code.

What are shades and tints?

Shades mix your color with black (darker steps); tints mix it with white (lighter steps). They're perfect for building hover states, backgrounds and consistent palettes from one brand color.

Is CMYK accurate for printing?

It's a standard conversion, but real print results depend on paper, ink and printer profile — treat it as a starting point and proof with your printer.

Color Picker

HEX, RGB, HSL or CMYK — which one do you need?

FAQ

Related Tools