Skip to content
Design

Color Picker

Pick a color from an uploaded image, from your screen with the EyeDropper, with the native picker, RGB/HSL sliders, or by pasting a hex. See HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK and OKLCH at once, plus the nearest CSS color name, contrast vs black/white and full harmony palettes.

#2563eb · royalblue
Pick from image
RGB sliders
R37
G99
B235
A1.00
HSL sliders
H221°
S83%
L53%
Values (click any to copy)
Contrast (WCAG)
vs white5.17:1 · AA
vs black4.06:1 · Fails
Tints (lighter)
Shades (darker)
Monochromatic
Complementary
Analogous
Triadic
Tetradic
Split-complementary
Presets

Images and color values are processed in your browser. Nothing is uploaded to a server.

How to use this color picker

  1. Pick a color with the native picker, paste a hex, or use the RGB/HSL sliders.
  2. Upload, drag-and-drop or paste an image — then click any pixel to grab its color.
  3. On supported browsers, click 'Pick from screen' to use the EyeDropper API.
  4. Click any value (HEX, RGB, HSL, HSV, CMYK, OKLCH) to copy it.
  5. Browse tints, shades, monochromatic, complementary, analogous, triadic, tetradic and split-complementary palettes.
  6. Save colors to recent — they persist in your browser via localStorage.

Frequently asked questions

Can I pick a color from an image?

Yes. Upload an image, drag-and-drop it, or paste it from the clipboard. Hover to preview the pixel color, then click or tap to pick it. Everything stays in your browser.

What is OKLCH and why use it?

OKLCH is a perceptual color space (Lightness, Chroma, Hue) that gives more uniform color steps than HSL. CSS supports it natively as `oklch()` since 2023.

Does the EyeDropper work in all browsers?

It works in Chromium-based browsers (Chrome, Edge, Opera) on desktop. The button only appears when supported.

How accurate is CMYK here?

It's a screen approximation (no ICC profile). For print work always use a real CMYK profile in your design app.

Are my images or colors uploaded?

No. Images are read into a local canvas and never leave your browser. Recent colors are stored in localStorage on your device only.