← Back to all tools

Color Picker

Extract vibrant colors from your images and generate professional palettes instantly.

Color picker workspace

Free · private · in-browser

Eyedropper, magnifier, and palette math in one 1024×768 stage

Upload a single photo, hover for a circular magnifier with crosshair detail, click to lock HEX/RGBA/HSL/HSV, then spin up monochromatic through tetradic palettes with exportable CSS variables and labeled PNG strips—no server upload for the workflow.

Saved palettes live in your browser storage so you can copy, delete, or re-export later. One image at a time keeps memory predictable; sample thumbnails match our other native tools for a consistent sidebar rhythm.

How to use Color Picker

Load one image

Upload a file or tap a sample. Only one image is active at a time to keep the canvas focused.

Hover & click

Use the magnifier to aim, then click to pick. The sidebar bar and formats update immediately.

Build & export

Choose a harmony, set the swatch count, then export CSS, PNG, or save the palette for later.

Supported file formats

Load JPG, PNG, or WebP. Exports include CSS :root variables and raster palette strips.

  • PNG
  • JPEG / JPG
  • WebP

Key features

Magnifier, pick markers, five harmony models, 2–10 swatches, CSS + PNG export, saved history.

  • Live magnifier

    A zoomed disc follows the cursor with a crisp crosshair so you can target single pixels.

  • Pick markers

    Each click drops a plus badge on the canvas so you remember where a sample came from.

  • Multi-format readout

    Copy HEX, RGBA, HSL, or HSV independently with one tap beside each row.

  • Palette generator

    Monochromatic through tetradic recipes adapt to your anchor color and chosen swatch count.

  • Exports & history

    Download CSS variables, PNG strips with labels, or stash palettes in Saved colors for later.

  • Local-only processing

    Sampling and file generation stay on your device until you explicitly download.

Common use cases

  • Brand & UI tokens

    Sample a logo swatch, export :root variables, and hand engineers a ready-made token list.

  • Social avatars & headers

    Pull the dominant hue from a portrait, then explore complementary palettes for text overlays.

  • Print & packaging

    Capture spot colors from a reference photo before moving to CMYK in desktop apps.

  • Learning color theory

    Switch palette modes to hear analogous vs triadic relationships from the same picked anchor.

Pro tips

  • Zoom the browser if you need finer picks—the magnifier reads native pixels, not screen DPI tricks.
  • Start with Monochromatic for neutrals, then flip to Complementary when you need a punchy accent pair.
  • Saved colors persist per browser; clear site data if you want a fresh vault.
  • PNG strips embed HEX labels—great for mood boards or Slack references.

Frequently Asked Questions