Color Palette Generator
Generate a coherent color palette from a HEX color, or extract the dominant colors from an image — all processed on your device.
How to use the Color Palette Generator
- Choose a mode: "From Color" or "From Image."
- From Color: type or pick a HEX color, then click "Generate palette."
- From Image: drag an image onto the drop zone, or click it to choose a file — the dominant colors are extracted automatically.
- Click any swatch to copy its HEX code.
How it works
In "From Color" mode, the base HEX color is converted to HSL (hue, saturation, lightness), and five variations are derived from it: a lighter tint, a darker shade, its complementary color (180° around the color wheel), and two analogous colors (30° to each side). For example, a teal base like #0B6E64 produces a coral-ish complementary color and two blue-green analogous colors, giving a coherent six-color palette from one input. In "From Image" mode, the image is drawn onto a small canvas (scaled down for speed), and every visible pixel's color is rounded to the nearest color bucket and counted — the most common buckets become the extracted palette, which is why a sunset photo reliably surfaces its oranges and blues rather than every one of the millions of slightly different pixel values it actually contains.
Frequently asked questions
Is my image uploaded to a server?
No. The image is drawn to a canvas and its pixel colors are read directly in your browser tab — the image data never leaves your device.
How is the palette generated from a color?
The base color is converted to HSL, then lighter, darker, complementary, and analogous variations are calculated from it — the same relationships designers use manually, applied consistently to any starting color.
How are colors extracted from an image?
The image is scaled down and its pixels are grouped into similar color buckets; the most frequent buckets become the palette. This is a simple, deterministic approach rather than a scientific clustering algorithm, but it reliably surfaces an image's dominant colors.
What happens with a transparent image?
Fully transparent pixels are skipped when counting colors, so a PNG with transparency still produces a palette based only on its visible content.