Image Color Palette Extractor

Extraction runs entirely on a downscaled copy of your image: the source is drawn onto a canvas capped at 100x100 pixels (scaled to fit the longer edge) before any sampling, which keeps even multi-megapixel photos fast but means very small accent regions can disappear before they are ever counted. Every opaque pixel (alpha below 128 is skipped) is then quantized by flooring each RGB channel to the nearest multiple of 10 and tallied in a frequency map, so near-identical shades collapse into the same bucket. Because that map only ever holds distinct quantized colors, asking for more colors than the image actually contains does not pad the result with duplicates - a two-tone logo simply returns the two or three buckets it has, so you may get fewer swatches than the slider value you set.

The four extraction modes are not different algorithms so much as different sort/filter passes over that same frequency map. Dominant sorts purely by pixel count (most common first), which is why a large flat background tends to win even if it is not the visually interesting color. Vibrant keeps only colors with HSL lightness between 15 and 85 and ranks them by saturation multiplied by frequency; Muted keeps lightness 20-80 and scores by (100 - saturation) times log(count + 1), favoring desaturated-but-still-present tones; Balanced filters lightness 10-90, then sorts colors into five lightness buckets (0-20, 20-40, ... 80-100) and pulls from each so the result spans dark to light rather than clustering in one tonal band. You can request anywhere from 2 to 16 colors via the slider (presets at 3, 5, 8, and 12), and locking a swatch (the padlock icon) pins it in place so a Refresh re-extracts only the unlocked positions.

Each swatch reports HEX, RGB, and HSL (the HSL conversion is what powers the approximate color names like "Dark Blue" or "Muted Green", derived from hue bands plus lightness/saturation thresholds), and clicking a color copies any of the three formats. Export covers CSS custom properties (--color-1...), SCSS variables ($color-1...), a Tailwind theme.extend.colors block, JSON carrying hex/rgb/hsl per color, and a GIMP .gpl palette; you can also download a PNG strip of 100px swatches with hex labels burned in. Two honest caveats: the "Adobe ASE" export option is listed in the format menu but the export switch has no ASE case, so it falls through to the default branch and saves a plain newline-separated .txt file rather than a real binary .ase swatch exchange; and the per-color "Dark text / Light text" badge is a quick perceived-brightness check (0.299R + 0.587G + 0.114B over 255, thresholded at 0.5), not a true WCAG contrast ratio, so use a dedicated contrast checker before relying on any text/background pairing.