Color Palette Generator
Enter a color and generate beautiful palettes using color theory rules. Every swatch includes HEX, RGB, and CMYK — with warnings when colors may not print accurately.
:root {
--color-1: #6D39AC;
--color-2: #AC6D39;
--color-3: #39AC6D;
--color-4: #BD9575;
--color-5: #3A7856;
}Color tools
More free color tools
Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.
- CSS Gradient Generator
Build linear, radial, and conic CSS gradients with live preview. Copy production-ready code instantly.
- WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA. Includes palette matrix mode and auto-fix suggestions.
- Tint & Shade Generator
Turn one brand color into a Tailwind-compatible 50–950 scale with WCAG contrast badges on every swatch.
- Palette from Image
Extract dominant colors from any photo — runs entirely in your browser. Send colors to converters or palette tools.
- Color Blindness Simulator
Preview palettes as seen with protanopia, deuteranopia, or tritanopia. Essential for accessible design.
- Interactive Color Wheel
Drag to pick a hue and see complementary, triadic, and analogous harmonies live — with HEX, RGB, and CMYK values.
- Print Gamut Checker
See exactly how a screen color shifts when printed in CMYK. Side-by-side press preview with shift warnings.
- Compare Colors (Delta E)
Measure the perceptual difference between two colors with ΔE2000 — plus HEX, RGB, CMYK, and HSL values for both.
How to build a brand palette
Start with your primary brand HEX from a style guide or logo file. Triadic is a strong default — three balanced hues that export cleanly to CSS or Tailwind. Switch to analogous for calm cohesion, or complementary for bold contrast against the opposite hue.
Check each swatch's CMYK column before handing colors to a print vendor. Use the HEX to CMYK converter for precise percentages, or open the contrast checker to validate text pairings for accessibility.
Color harmony rules explained
- Triadic — three evenly spaced hues; vibrant but balanced for marketing sites and the default starting point.
- Complementary — base plus its opposite, with tints and shades; high impact for CTAs and hero sections.
- Analogous — neighboring hues; ideal for UI surfaces and soft gradients.
- Monochromatic — one hue at different lightness levels; clean design systems and dashboards.
FAQ
Frequently asked questions
How to use the palette generator for web, brand, and print work.
- What is a color palette generator?
- A color palette generator creates harmonious color combinations based on color theory — complementary, analogous, triadic, and other schemes — from a single starting color.
- Can I export palettes for CSS or Tailwind?
- Yes. Copy your palette as CSS custom properties, a Tailwind
theme.extend.colorsblock, or JSON design tokens. - Why do some colors show a CMYK warning?
- Bright RGB and HEX colors often fall outside standard CMYK print gamuts. The warning means the color may shift when converted for offset or digital print.
- How do I lock a color while regenerating?
- Click the lock icon on any swatch. Regenerate will keep locked colors and vary the rest — useful when you have a fixed brand color.
- Can I share my palette?
- Use the share link to copy a URL with your seed color and harmony rule encoded. Send it to teammates or save it for later.