DevTools Logo

Color Extractor

Color Extractor

Upload an image and extract colors by hovering over pixels

Image Canvas

Upload an Image

Drag and drop or click to select

Supports PNG, JPG, WebP formats

Extracted Color Palette (0)

No colors extracted yet. Click on the image to save colors.

    Examples

    Exact pixel extraction of a Tailwind rose-600

    Input
    Image: tailwind-css-logo.png · Cursor at (120, 200) · Sample size: 1px
    Output
    HEX: #e11d48
RGB: rgb(225, 29, 72)
HSL: hsl(347, 77, 50)
HSV: hsv(347, 87, 88)
CMYK: cmyk(0, 87, 68, 12)
Closest named color: crimson (#DC143C) · Δ15.81

    The HEX is read directly from the canvas pixel at (120, 200); HSL, HSV, and CMYK are produced by the same conversions used in the color-converter tool.

    Averaging a 5×5 patch on a noisy texture

    Input
    Image: fabric-texture.jpg · Cursor at (340, 412) · Sample size: 5px
    Output
    HEX: #0ea5e9
RGB: rgb(14, 165, 233)
HSL: hsl(199, 89, 48)

    When the sample size is greater than 1, the tool averages every pixel in the (sampleSize × sampleSize) square. Use larger sample sizes to smooth out JPEG artifacts and dithered areas.

    Saving the palette to JSON

    Input
    Click the Export icon after extracting 4 colors
    Output
    {
  "image": "design-mockup.png",
  "colors": [
    { "hex": "#E11D48", "rgb": { "r": 225, "g": 29, "b": 72 }, "hsl": { "h": 347, "s": 77, "l": 50 }, "hsv": { "h": 347, "s": 87, "v": 88 }, "cmyk": { "c": 0, "m": 87, "y": 68, "k": 12 }, "namedColor": "crimson", "position": { "x": 120, "y": 200 } },
    { "hex": "#0EA5E9", "rgb": { "r": 14, "g": 165, "b": 233 }, "hsl": { "h": 199, "s": 89, "l": 48 }, "hsv": { "h": 199, "s": 94, "v": 91 }, "cmyk": { "c": 94, "m": 29, "y": 0, "k": 9 }, "namedColor": "dodgerblue", "position": { "x": 340, "y": 412 } }
  ],
  "extracted": "2024-05-15T10:42:08.421Z"
}

    The exported JSON contains every color in every format, plus the (x, y) position the sample was taken at and the source image's original filename.

    About this tool

    The Color Extractor pulls every color out of any image you drop in. Upload a PNG, JPG, or WebP (or drop it onto the canvas), then hover the cursor over the picture to read the exact pixel color at that position — including the average if you raise the sample size.

    Every sampled color is converted in parallel to HEX, RGB, HSL, HSV, and CMYK so it can be dropped straight into CSS, design tokens, or print specs. A palette panel keeps your saved colors in localStorage so a refresh does not erase your work.

    Extraction happens entirely in the browser using the Canvas 2D `getImageData` API. The image and saved palette stay on your device — nothing is uploaded, indexed, or persisted server-side.

    How to use

    1. Upload an image

      Drag and drop a PNG, JPG, or WebP onto the canvas, or click the upload area to pick a file. Images are stored in localStorage so reloading the page keeps your work.

    2. Hover to read a pixel

      Move the cursor over the image to read the pixel currently under the crosshair. The current color updates with HEX, RGB, HSL, HSV, and CMYK values, plus the closest CSS named color.

    3. Tune the sample size

      Drag the Sample Size slider (1–10 px) to average the color over a small square instead of reading a single pixel — useful for textures and gradients.

    4. Save and export

      Click Save Color to add the current color to the palette. Click the Export icon to download the entire palette as a JSON file with HEX, RGB, HSL, HSV, CMYK, and the original (x, y) position.

    Use cases

    Building a palette from a brand screenshot

    Drop a logo or hero image into the tool and sample the dominant colors to seed a brand-style palette in your design system — without re-typing hex values.

    Matching a print color to a screen color

    Use the CMYK conversion to compare screen samples against the printer's color profile, then derive the closest CMYK approximation for press output.

    Identifying an unknown color on a webpage

    Screenshot a region, crop it, drop it into the tool, and hover to find the exact hex used by a third-party design — useful for matching styles in a figma-to-code migration.

    Cleaning up a noisy texture

    Raise the sample size slider to average over a 5–10 px square so JPEG noise and dithering gradients round to a single representative color for the palette.

    Common mistakes

    Mistake:Sampling at sample size 1 on a heavily JPEG-compressed image and getting a different color than the surrounding area.

    Fix:Increase the sample size slider to 3–5 px to average over a small square. The picture has not changed — the noise has, and averaging reveals the underlying color.

    Mistake:Expecting the "Closest named color" to be an exact match.

    Fix:The closest-named-color feature uses Euclidean distance in RGB space, so very saturated values rarely match a CSS named color exactly. Treat the named color as a label, not a substitute for the HEX value.

    Mistake:Refreshing the page and losing the saved palette.

    Fix:The palette is persisted in localStorage under the "color-extractor-colors" key — refresh-safe, but cleared if you click Clear. Use the Export icon to download the JSON as a backup.

    Mistake:Trying to read a transparent pixel and concluding the tool is broken.

    Fix:Transparent pixels are reported as #000000 with no alpha. To read alpha, sample against a known background or export the image with a non-transparent fill.

    Mistake:Dragging a non-image file onto the dropzone and getting a silent failure.

    Fix:The tool validates file.type against the image/* MIME family before reading. Rename the file to a .png extension or convert it to a supported image format and try again.

    Frequently asked questions

    Related guides

    Extracting Dominant Color Palettes from Images in the Browser

    How client-side color quantization algorithms like Median Cut and K-Means extract dominant palettes directly from photos and graphics.

    References & standards

    Related tools

    Color Blindness Simulator

    Simulate color blindness on palettes and images. Compare protanopia, deuteranopia, tritanopia, and more side-by-side.

    Color Contrast Checker

    Advanced WCAG accessibility compliance checker with color blindness simulation, multiple text sizes, and comprehensive analysis features.

    Color Converter

    Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing

    Color Generator

    Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.

    Color Mixer

    Blend two colors together by any ratio. See intermediate steps and copy the result in HEX, RGB, or HSL.

    Color Names Finder

    Look up CSS color names or find the closest named colors to any hex value.