Color Palette Generator
Generate a color palette from a base color, a harmony rule, or a local image, then copy HEX, RGB, HSL, CSS, or Tailwind.
What is a color palette generator?
A color palette generator creates a coordinated set of colors from a base color, a color harmony rule, random generation, or an image. This tool lets you generate palettes, lock colors, copy HEX/RGB/HSL values, export CSS/Tailwind values, and work locally in your browser.
How to use this color palette generator
- Choose a base color or generate a random palette.
- Select a harmony type such as complementary, analogous, triadic, or monochromatic.
- Lock colors you want to keep and regenerate the others.
- Inspect HEX, RGB, and HSL on each swatch.
- Export CSS, Tailwind, JSON, or SCSS.
- Upload an image if you want colors extracted from a photo.
Color harmony types
- Complementary — opposite hues (about 180°).
- Analogous — neighbors of the base hue (±30° here).
- Triadic — three hues 120° apart.
- Monochromatic — one hue, stepped lightness.
- Split complementary — base plus the two hues beside its complement (150° and 210°).
- Tetradic — a rectangle on the wheel (60° / 180° / 240°).
- Square — four hues 90° apart.
Generate a color palette from an image
Drop a photo into the image section. The browser draws a small canvas, groups pixels into 16-level RGB buckets, and keeps the most common buckets. You can ignore near-white, near-black, or low-saturation pixels. The file never leaves the tab.
HEX, RGB, and HSL color formats
HEX is the usual CSS token. RGB is the same color as channels. HSL is what this generator uses for hue rotation. Copy whichever format your stylesheet needs.
How contrast is calculated here
Harmony starts in HSL: convert the base color, rotate hue for the selected rule, then add lighter or darker steps until the swatch count is filled. Image extraction is frequency of RGB buckets after downsample—not k-means, not a model. Each swatch also reports contrast versus white and black using WCAG relative luminance. That is a hint. For a pair-level WCAG 2.2 check use the Color Contrast Checker.
How to choose colors for a website
Keep one strong brand hue, a quiet background, and a text color that actually passes contrast. Add one semantic color for errors or success. Then send the pair to the contrast checker instead of guessing. If you need a wash, take a swatch into the CSS Gradient Generator.
Common color palette mistakes
- Too many competing accent colors.
- Insufficient contrast between text and background.
- No hierarchy—every swatch at the same saturation.
- Poor text/background pairing on cards and buttons.
- Ignoring hover, focus, and disabled states.
Real examples
- #3B82F6 as a SaaS primary: analogous mode gives neighboring blues for surfaces and a darker text companion.
- #E11D48 for a landing page: complementary or split complementary adds a cooler opposite without inventing a second brand.
- A product photo: extract 5–6 colors, lock the two you want as brand and surface, then regenerate the rest.
Color palette vs color scheme
The palette is the swatch list. The scheme is the job each color gets in the UI. This page builds the list. Contrast, type, and spacing still need their own tools.
Frequently asked questions
What is a color palette generator?
It creates a coordinated set of colors from a base color, a harmony rule, random generation, or a local image so you can copy HEX, RGB, HSL, CSS, or Tailwind values.
How do I generate a color palette?
Set a base color, pick a mode, then press Generate or Random. Spacebar also randomizes when you are not typing in a field.
What is the difference between a color palette and a color scheme?
A palette is the list of swatches. A scheme is how those swatches are assigned—background, text, accent, border—in a UI.
What is a complementary color palette?
Complementary hues sit about 180° apart on the color wheel. This tool then fills extra swatches with lighter or darker steps.
What is an analogous color palette?
Analogous hues sit next to the base color, here at ±30°. They usually feel closer than a complementary pair.
What is a triadic color palette?
Triadic hues are spaced 120° apart. The generator keeps the base and adds the two other points, then tints if you ask for more colors.
Can I generate a palette from an image?
Yes. Upload or drop a JPG, PNG, or WebP. The canvas is processed locally with RGB buckets. Nothing is sent to a server.
Can I copy HEX, RGB, and HSL values?
Yes. Copy one swatch or the whole list, plus CSS variables, Tailwind, JSON, and SCSS.
Can I use the colors in CSS or Tailwind?
Copy CSS Variables for --color-1 style tokens, or Copy Tailwind for a palette object you can paste into a config.
How many colors should a website color palette have?
Most sites work with 4–6: background, surface, text, primary, and one semantic accent. This tool allows 3–8 so the set stays usable.
How do I choose colors for a website?
Start with one brand hue, keep a quiet background and a dark text, and test contrast. Link the Color Contrast Checker for pair-level WCAG 2.2 checks.
Is this color palette generator free?
Yes. There is no signup and no paid export wall on this page.
Is the tool browser-based?
Yes. Harmony math, exports, and image extraction run in your browser.
Are uploaded images sent to a server?
No. The file is read with a local canvas, then discarded. Share links store only HEX values in the URL hash.