Color extraction tool

Every color,
one click away.

Hover over any pixel. Click. Get the exact code in HEX, RGB, HSL, and OKLCH — no extensions, no installs, nothing to download.

JR AM SL KP DM
★★★★★
Loved by 4,200+ designers & developers
pixelpick.app
HOVER TO PICK
#——————
Hover the canvas to sample
Works with
Figma Tailwind CSS Framer Adobe XD VS Code Webflow Sketch Notion Canva Linear Framer Figma Tailwind CSS Framer Adobe XD VS Code Webflow Sketch Notion Canva Linear Framer
What you get

A whole color toolkit.
Zero setup.

Everything you need to go from inspiration to production, inside a single browser tab.

F·01
🎯

Native Eyedropper

Uses the browser's built-in EyeDropper API to sample from anywhere on screen — not just inside the app. Pick from images, videos, other browser tabs, even system UI.

F·02
🔬

Pixel Magnifier

A 5× zoom magnifier tracks your cursor so you can target single pixels precisely. The exact hex value updates in real time as you move.

F·03
📋

Click to Copy

Tap any format row — HEX, RGB, HSL, or OKLCH — and it's on your clipboard instantly. No modals, no menus, no drag-and-drop theater.

F·04
🎨

Living Palette

Every color you pick lands in a palette grid that persists through the session. Switch between grid and list view, remove colors, re-sample with a click.

F·05
📦

4-Format Export

Export your full palette as CSS custom properties, Tailwind config, SCSS variables, or raw JSON — one click, paste-ready for your project.

F·06

Contrast Checker

Each picked color is instantly checked for WCAG AA and AAA compliance against white. Build accessible palettes without switching tabs.

The workflow

Open. Pick. Export.

The entire flow takes under 30 seconds — even the first time.

Step 01

Open the app and load any site

Paste a URL into the address bar — or use the built-in color canvas with a rich demo palette. The canvas works immediately, no URL needed.

https://stripe.com Go
Step 02

Activate the eyedropper and click

Hit Pick Color — or press P — then click any pixel on screen. The color is captured, displayed, and added to your palette automatically.

🎯
Click anywhere on screen
Step 03

Copy a value or export your palette

Click any color format to copy it instantly. Head to the Export tab to get your full palette as CSS, Tailwind, SCSS, or JSON — with one click.

:root {
  --color-1: #635BFF;
  --color-2: #00D4FF;
  --color-3: #FF6B6B;
  --color-4: #FFE66D;
}
Designers love it

Built for the people
who care about color.

★★★★★

I used to screenshot sites and drag them into Figma just to sample a color. PixelPick cut that whole ritual down to two seconds.

JR
Jamie R.
Product Designer · Figma user
★★★★★

The OKLCH output alone is worth it. I'm building design tokens and getting modern CSS color formats with zero conversion work.

AM
Alex M.
Frontend Engineer · Tailwind CSS
★★★★★

The contrast checker next to the palette is genius. I catch accessibility issues immediately instead of discovering them in review.

SL
Sofia L.
UX Lead · Accessibility-focused
Color formats

Every format
your stack needs.

One click gets you the value. Choose from four industry-standard formats, all computed from the same picked pixel.

HEX
#635BFF
RGB
rgb(99, 91, 255)
HSL
hsl(243, 100%, 68%)
OKLCH
oklch(56% .23 277)
Get started

Stop guessing colors.
Start picking them.

Open PixelPick in a new tab and have your first color extracted in under ten seconds. Secure sign in, no install, no catch.

Works in Chrome, Edge, Arc · Auth gate included · 100% browser-native