- What is a color palette generator?
- A color palette generator is an online tool that creates a coordinated set of colors (typically 3-10) you can use in your designs. It generates palettes based on color theory (complementary, analogous, triadic harmony), random generation, or image extraction — providing developers and designers with ready-to-use color schemes.
- Is this color palette generator free?
- Yes, 100% free with no signup, no ads, and no daily limits. You can generate unlimited palettes, extract colors from unlimited images, and export in any format without ever creating an account.
- How do I extract a color palette from an image?
- Click the 'From Image' tab, then upload any image (JPG, PNG, GIF, WebP). The tool uses canvas-based color quantization to extract the most prominent colors — typically 5 by default, adjustable from 2 to 10. Processing happens entirely in your browser, so your images never leave your device.
- What are color harmony modes?
- Color harmony modes are rules from color theory that create visually balanced palettes. This tool supports 7 modes: Complementary (opposite colors on the wheel, high contrast), Analogous (neighboring colors, harmonious), Triadic (3 evenly spaced), Tetradic (4-color square), Split-Complementary, Monochromatic (single hue, varied lightness), and Random.
- What does the lock icon do?
- Locking a color preserves it when you regenerate the palette. This lets you build a palette iteratively — lock the colors you love, then regenerate until the remaining slots are also perfect. Press spacebar to regenerate only unlocked colors.
- Is my palette WCAG accessible?
- The tool shows WCAG contrast ratios in real time for every selected color against white and black backgrounds. You'll see grades like AAA (7:1 ratio), AA (4.5:1), AA Large (3:1), or Fail. Use colors with AA or AAA ratings for body text to ensure accessibility.
- Can I export the palette to CSS or Tailwind?
- Yes. The tool supports 5 export formats: CSS custom properties (variables), Tailwind config (ready to paste into tailwind.config.js), SCSS variables, JSON (with HEX/RGB/HSL), and a plain hex list. Copy to clipboard or download as a file.
- What does the spacebar do?
- Press spacebar anywhere on the page (except while typing in an input) to instantly regenerate unlocked colors. This keyboard shortcut is the fastest way to iterate through palette options — no need to click the Generate button every time.
- How many colors can I have in a palette?
- You can generate palettes from 2 to 10 colors. Use the 'Colors' dropdown to change the count. Most brand palettes use 4-6 colors; design systems often use 8-10 to cover primary, secondary, accent, and neutral tones.
- Can I edit individual colors manually?
- Yes. Click any color swatch to select it, then use the color picker or type a hex code directly in the input field. You can also click the lock icon to preserve a color and regenerate the rest around it.
- What's the difference between complementary and analogous colors?
- Complementary colors sit opposite each other on the color wheel (e.g., blue and orange) — they create high contrast and make each other pop. Analogous colors are neighbors on the wheel (e.g., blue, blue-green, green) — they create harmony and are easy on the eyes, often used for natural scenes or calm designs.
- Is my data private?
- Yes. This tool runs 100% in your browser. Images you upload are processed locally via HTML5 Canvas — they're never uploaded to any server. Generated palettes also stay on your device until you explicitly copy or download them.
