Pro Palette Extractor — Extract Color Palette in HEX, HSL, OKLCH, CMYK
Extract 3–16 dominant colors from any image and get them in HEX, RGB, HSL, OKLCH and CMYK. Export to CSS, SCSS, Tailwind, JSON or a PNG palette. 100% in your browser.
Pro Palette Extractor — Color Palettes for Designers and Front-End Pros
Drop any image and extract a high-quality color palette of 3 to 16 dominant colors — with every code you need: HEX, RGB, HSL, OKLCH and CMYK. Sort by dominance, lightness or hue, view a percentage bar of how present each color is in the image, optionally show the complementary color for each swatch, and export your palette as CSS variables, SCSS variables, a Tailwind config snippet, JSON, a plain hex list, or a downloadable PNG image.
Five color codes per swatch
Click any code to copy it. HEX is the most common on the web; RGB is the raw 8-bit value; HSL is hue / saturation / lightness, great for creating tints and shades; OKLCH is the modern, perceptually-uniform color space supported by CSS Color Level 4 — perfect for accessible and harmonious palettes; CMYK is the print-design approximation (subtractive model).
Six exports
CSS variables (:root { --color-1: ... }), SCSS variables ($color-1, $color-2…), Tailwind config snippet to paste under extend.colors, JSON with every code and the dominance percentage, plain hex list, and a downloadable PNG palette image at 1200×600 with HEX and RGB labels under each swatch — great for sharing on Dribbble or in design specs.
Sort modes & harmonies
Dominance: most-present colors first — the photographic palette. Lightness: from lightest to darkest — useful for UI value ramps. Hue: in chromatic order red → orange → yellow → green → blue → violet — useful for rainbow swatches and gradient inspiration. The complementary toggle shows a small triangle of the opposite hue at the corner of each chip — perfect for spotting accent-color opportunities.
Tips
For best results use a clear, well-lit photo with strong visual themes. Increase the number of colors when the image is varied; decrease it for a focused, “logo-ready” palette. The dominance bar is computed AFTER the image is downsampled to roughly 200×200 (for speed) and groups pixels into clusters with the Median Cut algorithm — the same method used in classic image quantization.
Privacy
This tool runs 100% in your browser. Your image is read into your browser memory via the FileReader API and is never uploaded to any server. There is no AI, no external service, no library to download — just plain JavaScript math on the image pixels. Nothing is stored; closing the tab clears everything.
Simple and fast lookup? Try the Image Color Extractor