Color Palette Generator
Generate harmonious color palettes from a base color or image.
Local by design · Your image stays on this device.
Choose a base color and explore a palette.
Your palette
Click a color to copy · Press Space outside a control to shuffle
Contrast checker
WCAG normal text · AA ≥4.5:1 · AAA ≥7:1
2.00:1 · AA fail / AAA fail
Harmony alone does not guarantee accessible text. Pass/fail uses the unrounded ratio.
Take your colors with you
Start from an image
JPG, PNG or WebP · up to 20 MB · up to 6 colors
Transparent pixels are skipped; partially transparent pixels are blended over white. Small details may be missed during sampling.
How it works
- 1Choose your starting point. Enter a three- or six-digit HEX value, use the color picker, or select a JPG, PNG or WebP image from your device. You can start with the default indigo palette and change the base color whenever you want.
- 2Explore and check. Choose complementary, analogous, triadic, tetradic or monochromatic colors. Switch between HEX, RGB and HSL values, then select a text color and a background in the contrast checker. A pleasing combination does not automatically provide readable text.
- 3Copy or export. Click an individual color to copy its displayed value, or export the whole palette as CSS variables, JSON or a Tailwind CSS v4 theme. You can edit the export preview before copying or downloading it. Clear removes the current palette so you can start again.
Frequently asked questions
Are my images uploaded to a server?
No. Image decoding, resizing and color sampling happen in your browser. The tool does not send your image or its filename to a server. Keep your original image: extracting a palette does not modify the source file, and the generated colors exist only in this browser tab.
Why does an image return fewer than six colors?
The tool returns up to six sampled dominant colors rather than forcing every image to produce six different swatches. A solid image may produce only one. Fully transparent pixels are skipped, and a fully transparent image has no visible palette. Partially transparent pixels are blended over white.
How accurate is image color extraction?
Images are resized to a maximum edge of 256 pixels, then sampled and grouped into representative colors. This keeps processing small enough for typical phones. Small details can be missed, and clustered colors may differ slightly from individual source pixels. The result is a design starting point, not a complete color inventory.
Does every generated palette meet WCAG contrast requirements?
No. Harmony describes relationships between colors, not text readability. The checker compares your selected foreground and background using the WCAG contrast formula. For normal text, AA requires at least 4.5:1 and AAA requires at least 7:1. Pass or fail uses the unrounded ratio; the displayed ratio is rounded.
What color inputs and exports are supported?
Enter RGB HEX values such as #6366F1 or #63F, with or without the hash symbol. Alpha HEX values are not supported. Copy values as HEX, RGB or HSL. Export CSS custom properties, structured JSON with HEX/RGB/HSL values, or Tailwind CSS v4 @theme color variables.
Why can grayscale palettes contain repeated colors?
White, black and gray have no saturation, so rotating their hue does not necessarily produce a different color. Some harmony schemes can therefore repeat swatches. Monochromatic palettes vary lightness instead. You can choose a more saturated base color or use Random to explore other combinations.