RunLocalTools

Color Picker Online — Sample, Extract Palettes & Check Contrast (Free)

Pick colors from any image or your screen, extract a dominant palette, check WCAG contrast, generate shades and harmonies, and simulate colorblindness — all free, all in your browser.

What it does

Drop in an image (or pick straight off your screen in Chrome and Edge) and click anywhere to sample the exact pixel color underneath your cursor. Every color you sample gets added to a collected-colors tray, where you can reorder, favorite, and export it in whatever format you need — hex, RGB, HSL, or CSS variables. Beyond simple sampling, it pulls a dominant palette straight out of an image, checks WCAG contrast between any two colors, generates a full range of shades and tints, builds color harmonies, and shows you the nearest common color name for anything you pick.

How it works

Dominant-palette extraction uses a median-cut algorithm — the same family of technique used by real image-editing software — to group an image’s pixels into representative clusters rather than just returning the most frequent raw pixel value, which tends to produce a much more useful palette from a photo. Colorblindness simulation runs a standard color-transform matrix for protanopia, deuteranopia, and tritanopia directly on the sampled color, so you can sanity-check a palette without special software; the simulation is visual only and clicking always samples the real, unaltered pixel underneath. On browsers that support it (Chrome and Edge), the “Pick from screen” button uses the native EyeDropper API to sample any pixel anywhere on your screen, not just inside the loaded image. Your loaded image and collected tray are saved to this browser automatically so a refresh doesn’t lose your work, and everything runs client-side — nothing you upload ever leaves your device.

How to use it

  1. Drop an image on the upload area, or click “Pick from screen” (Chrome/Edge) to sample a color from anywhere on your screen without uploading an image at all.
  2. Click anywhere on the loaded image to sample that pixel — it’s added to your color detail panel with hex, RGB, HSL values, the nearest named color, and a WCAG contrast checker.
  3. Use “Dominant palette” to automatically pull the image’s most representative colors, sorted by dominance or hue.
  4. Build out shades, tints, and harmonies from any sampled color in the Color detail panel.
  5. Collect the colors you want to keep in the tray — reorder them, star your favorites, and each row shows at a glance whether it passes contrast against white and black text.
  6. Export the whole tray as hex, RGB, HSL, or a CSS custom-properties block, or send it straight to another tool with “Send to.”

FAQ

Does the image ever get uploaded anywhere? No — sampling, palette extraction, and everything else happens entirely in your browser. Nothing is sent to a server, and your image is only cached locally on your own device so a refresh doesn’t lose it.

What’s the difference between “Pick from screen” and clicking on the image? Clicking on the loaded image samples a pixel from that specific image using canvas data. “Pick from screen” uses your browser’s native eyedropper to sample a pixel from anywhere on your entire screen — another app, a different browser tab, your desktop — not just the loaded image. It’s currently supported in Chrome and Edge; the button is hidden automatically in browsers that don’t support it.

How accurate is the colorblindness simulation? It applies a standard simulation matrix used widely for quick accessibility checks, but it’s an approximation for reference, not a clinical or diagnostic tool. Use it as a sanity check on a palette, not a substitute for real accessibility testing.

What does the W / B badge on each tray color mean? It’s a quick pass/fail against the WCAG AA contrast threshold (4.5:1) for that color used as text against a white (W) or black (B) background, so you can scan your whole tray for accessibility issues at a glance instead of checking pairs one at a time.

Can I send my extracted palette to another tool? Yes — the “Send to” button sends your tray as a table of names and hex values to any other shipped tool that accepts a table handoff, so you don’t have to retype colors by hand.

What if I want to build a CSS gradient or work in OKLCH instead of hex? This tool covers sampling, palettes, shades, harmonies, and contrast — for a dedicated gradient builder, use the CSS gradient generator; for OKLCH conversions, use the OKLCH converter. Need a Tailwind-ready palette instead? Try Tailwind colors, or generate a color at random with the random color tool.