Image Color Picker

Upload an image to extract its primary colors, build a custom palette, and copy precision HEX, RGB, HSL, and OKLCH color values.

Palette:
Click anywhere on image to pick exact color

Extracted Primary Palette

Click any swatch to inspect and copy color codes

#3B82F6
Inspected Color

Dodger Blue

Luminance: Light•WCAG Ratio: 3.68:1 vs White
HEX Code#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
OKLCH (CSS 4)oklch(0.623 0.188 259.8)

How to Extract Colors from Images

1

Upload Your Image

Drag and drop, browse from your files, or paste directly with Ctrl+V. Supports PNG, JPG, WebP, SVG, and GIF.

2

Extract & Copy Codes

Automatically extract dominant palettes or click anywhere to sample exact pixels, then copy or export HEX, RGB, HSL, and OKLCH codes.

Frequently Asked Questions

Are my uploaded images private and secure?▼

Yes. All image processing and pixel sampling run entirely client-side inside your browser using HTML5 Canvas. Your images are never uploaded to any remote server or third party.

Which color formats can I export?▼

You can copy individual colors in HEX, RGB, HSL, and OKLCH (CSS Color Module 4). You can also export full palettes as ready-to-use CSS custom properties, JSON tokens, or Tailwind CSS theme configurations.

What is OKLCH and why should I use it?▼

OKLCH is a modern perceptually uniform color space supported across modern browsers. It prevents unexpected shifts in perceived brightness and saturation when creating color variations and accessible user interfaces.