Color Palette Generator
Pick a base color to instantly generate a full color palette with CSS variable codes.
:root {
--color-1: #9ec1fa;
--color-2: #3c83f6;
--color-3: #0846aa;
--color-4: #fad79e;
--color-5: #f6af3c;
}How to use Color Palette Generator
Generate harmonious color palettes from a base color using color theory rules: complementary, analogous, triadic, tetradic, split-complementary, and monochromatic schemes. Each palette is displayed as swatches with HEX and HSL values ready to copy. Perfect for establishing a project's color system before choosing design tokens.
- Enter a base color in HEX, RGB, or HSL, or pick it visually.
- Select a harmony type: complementary, analogous, triadic, tetradic, or monochromatic.
- Review the generated swatches in the palette preview.
- Click any swatch to copy its HEX value.
- Export the full palette as a JSON file, CSS variables, or a PNG swatch sheet.
Your data never leaves your device — 100% private processing.
Color harmony types explained
Complementary colors sit opposite each other on the color wheel (180° apart) and create maximum contrast — ideal for call-to-action buttons against a brand-colored background. Analogous colors are 30° apart and naturally harmonious — used for backgrounds, hero gradients, and illustration palettes. Triadic schemes use three equally spaced hues (120° apart) for vibrant, balanced palettes. Tetradic (rectangular) schemes use four colors and offer the most variety but require careful balance to avoid visual chaos. Monochromatic schemes vary only lightness and saturation of a single hue for a sophisticated, cohesive look.
| Harmony | Hue spacing | Best use |
|---|---|---|
| Complementary | 180° | CTA buttons, high-contrast pairs |
| Analogous | 30° | Backgrounds, illustrations, gradients |
| Triadic | 120° | Vibrant, balanced three-color systems |
| Tetradic | 90° | Rich four-color marketing palettes |
| Monochromatic | Same hue | Sophisticated, cohesive UI themes |
From palette to design token system
A typical design token system derives 10 shades per hue (50, 100, 200, 300, 400, 500, 600, 700, 800, 900 — like Tailwind CSS) from the base palette colors. Semantic tokens map these to roles: --color-primary = brand-500, --color-primary-hover = brand-600, --color-text = neutral-900, --color-background = neutral-50. This separation allows dark mode by swapping the neutral scale while keeping brand hues consistent. Export this palette to JSON and feed it into your CSS variable generation script or Figma token plugin.
Glossary
- Color wheel
- A circular arrangement of colors based on their relationships in the visible spectrum, used to identify harmonious combinations.
- Complementary
- Two colors directly opposite each other on the color wheel, producing maximum contrast.
- Triadic
- Three colors equally spaced 120° apart on the color wheel, forming a balanced high-contrast triad.
- Design token
- A named variable representing a color, spacing, or typography value in a design system.
Related reading
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use Color Palette Generator?
- Converts between HEX, RGB, HSL, HSV, and CMYK instantly
- Accessibility contrast checker built in
- Generates harmonious palette variations from a single colour
- Export-ready CSS variables and design tokens
Common use cases
- Pick brand colours that meet WCAG accessibility standards
- Generate a complementary palette from a logo colour
- Convert Figma HEX codes to CSS rgb() for developers
- Create a gradient from two brand colours
- Verify sufficient contrast for text on coloured backgrounds
Related Color & Design
Color Converter
Convert colors between HEX, RGB, HSL, and HSV formats. See live color previews and copy any value instantly — perfect for design and CSS work.
CSS Gradient Generator
Create beautiful CSS gradients with live preview. Generate linear and radial gradients with multiple color stops.
Color Contrast Checker
Check color contrast ratios for WCAG 2.1 AA and AAA compliance. Ensure your website colors are accessible to all users.
Color Picker & Converter
Pick a color and instantly convert between HEX, RGB, HSL, HSB, and CMYK. Generate tints, shades, and color palettes.
CSS Gradient Generator
Create beautiful CSS linear, radial, and conic gradients online. Get the CSS code instantly with a live preview.
Color Contrast Checker
Check color contrast ratio for WCAG AA and AAA accessibility compliance. See if your text and background colors meet accessibility standards.
Explore all Color & Design.