What is a color picker tool?

An interactive tool for choosing a color visually — drag on a color area or move sliders — and reading off its exact codes in HEX, RGB, HSL, HSV and CMYK.

How do I pick a color for my website?

Choose a hue, then adjust saturation and lightness until it looks right, and copy the HEX or RGB value into your CSS. Check the result against your background with the contrast checker.

Which color format should I use where?

HEX and RGB for CSS and most tools, HSL when you want to tweak lightness intuitively, HSV inside design software, and CMYK only as a rough guide for print.

Does the eyedropper work in all browsers?

The screen eyedropper uses the EyeDropper API, which is supported in Chromium-based browsers (Chrome, Edge). Where it isn't available, the button is hidden and you can still pick or type a color.

Can I use it for print?

You can read a CMYK approximation, but screens are RGB and print is CMYK — for accurate print color, work from your printer's ICC profile.

Is it free? Do I need to sign up?

Yes — it's free with no signup, running entirely in your browser.

Color Picker

Pick any color visually and copy accurate HEX, RGB, HSL and CMYK codes — no signup.

Pick a color

#3B82F6

Hue217°

Alpha100%

Presets

Color shades

Light

#9DC1FB

Base

#3B82F6

Dark

#1E417B

Color formats

HEX

#3B82F6

RGB

rgb(59, 130, 246)

HSL

hsl(217.2, 91.2%, 59.8%)

HSV

hsv(217.2, 76%, 96.5%)

CMYK

cmyk(76%, 47.2%, 0%, 3.5%)

Harmonious colors

Complementary

#F6AF3B

Analogous +30°

#513BF6

Analogous −30°

#3BE0F6

Triadic

#F63B82

Guide

What a color picker is and why accuracy matters

A color picker lets you choose a color visually and read back its exact codes. Accuracy matters because "close enough" colors drift: a brand blue that's a few values off across a site looks sloppy and erodes trust. Picking from a precise tool — and copying the exact value — keeps color consistent everywhere it appears.

How to use this picker

Drag the color field or move the hue and lightness controls.
Adjust the alpha slider for transparency.
Use the eyedropper to sample any pixel on your screen.
Or type a known HEX, RGB or HSL value to load it.
Copy the format you need from the output cards.

HEX vs RGB vs HSL vs HSV vs CMYK — when to use each

Format	Use it for
HEX	CSS and design tools — the common shorthand
RGB / RGBA	Canvas, programmatic color, transparency
HSL	Intuitive lightness and saturation tweaks
HSV / HSB	Design software color fields
CMYK	A rough guide for print (screen approximation)

Using the eyedropper to sample on-screen colors

The eyedropper uses the browser's EyeDropper API to capture the color of any pixel on your screen — a logo, a photo, another app. It works in Chromium browsers (Chrome, Edge); where it isn't supported the button is hidden and you can still pick or type a color.

Why consistent color codes matter for branding and UI

Reusing exact values — ideally as shared tokens — keeps buttons, backgrounds and text aligned across pages and platforms. Once you've picked a color, check it against its background with the contrast checker and build its range with the shade & tint generator.

Learn more

See the MDN <color> reference and WebAIM on contrast.

Frequently asked questions

What is a color picker tool?: An interactive tool for choosing a color visually — drag on a color area or move sliders — and reading off its exact codes in HEX, RGB, HSL, HSV and CMYK.
How do I pick a color for my website?: Choose a hue, then adjust saturation and lightness until it looks right, and copy the HEX or RGB value into your CSS. Check the result against your background with the contrast checker.
Which color format should I use where?: HEX and RGB for CSS and most tools, HSL when you want to tweak lightness intuitively, HSV inside design software, and CMYK only as a rough guide for print.
Does the eyedropper work in all browsers?: The screen eyedropper uses the EyeDropper API, which is supported in Chromium-based browsers (Chrome, Edge). Where it isn't available, the button is hidden and you can still pick or type a color.
Can I use it for print?: You can read a CMYK approximation, but screens are RGB and print is CMYK — for accurate print color, work from your printer's ICC profile.
Is it free? Do I need to sign up?: Yes — it's free with no signup, running entirely in your browser.

Related tools

Color Format Converter

Convert any color between HEX, RGB, HSL, HSV, CMYK and OKLCH instantly — and copy ready-to-paste CSS, SCSS or Tailwind.

Palette Generator

Generate harmonious color palettes from any base color — complementary, analogous, triadic and more, with instant CSS export.

Complementary Color Finder

Find the perfect complementary (180° opposite) color for any shade, with HEX/RGB/HSL and contrast info.

Contrast Checker

Test color contrast against WCAG 2.1 AA/AAA — live pass/fail, font-size rules, and a real component preview.

Image Color Extractor

Upload any image and extract its dominant colors as HEX, RGB and HSL — palettes from photos and artwork in seconds.

Shade & Tint Generator

Generate 10–12 step tints and shades from any color — perfect 50–950 UI ramps with CSS and Tailwind export.