Color Picker

About the Color Picker

What is this color picker?

It's an all-in-one way to choose a color and get its code in every format you might need. Drag around the picker to find the exact shade, or grab a color straight off your screen with the eyedropper or out of an image. The moment you pick, you get the HEX, RGB, HSL, HSB and CMYK values, ready to copy with a click.

It also does the thinking around a color for you: it checks text contrast for accessibility, and builds ready-made shades, tints and color harmonies so you can put together a palette in seconds. Everything runs in your browser — nothing is uploaded.

How to Use This Tool

1. Pick a color. Drag the circle in the big square to set saturation and brightness, and the rainbow slider to set the hue. The alpha slider controls transparency.
2. Or sample one. Use the Eyedropper to grab any pixel on your screen, or upload an image and click on it.
3. Type a value. Paste a HEX code into the box to jump straight to that color (8-digit HEX with alpha works too).
4. Copy what you need. Click any format card, the HEX box, or a swatch to copy its code.

The color formats explained

• HEX: the web standard, like #3B82F6 — add two more digits for transparency.
• RGB: red, green and blue from 0–255, used everywhere in CSS and design apps.
• HSL / HSB: hue, saturation and lightness (or brightness) — intuitive for adjusting a color by feel.
• CMYK: cyan, magenta, yellow and black percentages, used for print.

Common Use Cases

• Web & UI design: grab exact HEX/RGB values for CSS and design tools.
• Accessibility: check that text will be readable on your chosen background.
• Building palettes: use the harmonies, shades and tints as a starting point.
• Matching a color: eyedrop a color from a logo, photo or screenshot.

Want to convert between specific formats? Try the HEX to RGB or HEX to HSB converters, or check pairings with the Color Contrast Checker.

Frequently Asked Questions

Can I pick a color from anywhere on my screen?

Yes, using the Eyedropper button, in browsers that support it (Chrome, Edge and Opera). It lets you click any pixel on screen. In other browsers, upload an image and click on it instead.

Does it support transparency (alpha)?

Yes. The alpha slider sets opacity, and the codes update to rgba(), hsla() and 8-digit HEX automatically.

What are shades, tints and harmonies?

Shades are darker versions of your color, tints are lighter ones, and harmonies (complementary, analogous, triadic and more) are colors that sit at pleasing angles on the color wheel — handy for building a palette.

Are my images or colors uploaded?

No. The picker, the eyedropper and image sampling all run locally in your browser, so nothing you pick or upload ever leaves your device.

Can I share a color?

Yes. The page's address updates with a ?hex= value as you pick, so you can copy the link to share or reopen the exact color later.