Skip to content
SPCXTools

Color Palette Generator

Pick one color and get a harmonious five-color palette based on color theory.

Runs locally — files never leave your device

Loading tool…

How to use Color Palette Generator

  1. 1Choose a base color with the picker, type a HEX/RGB/HSL value, or click Random.
  2. 2Pick a color scheme such as complementary, analogous or triadic.
  3. 3Click any swatch to copy its HEX code.
  4. 4Copy the whole palette as CSS custom properties or JSON.

Build a color palette from one color

Choosing colors that work together is one of the hardest parts of designing a website, app, presentation, logo or poster. Color theory offers proven relationships between colors on the color wheel, and this palette generator applies them for you. Start with one color you like — or your brand color — choose a scheme, and get five harmonious colors ready to copy into your project.

Features

  • Seven schemes: complementary, analogous, triadic, split complementary, tetradic, monochromatic and shades.
  • Any starting color as HEX, RGB, HSL or a CSS color name, or pick a random one.
  • Click to copy any swatch.
  • Export as CSS custom properties or a JSON array.
  • Readable labels that switch between black and white for contrast.

Which scheme to use?

Scheme Feeling Good for
Complementary Bold, high contrast Call-to-action buttons, sports, sales
Analogous Calm, harmonious Nature, wellness, backgrounds
Triadic Lively, balanced Children's products, illustrations
Split complementary Vivid but less tense Websites needing one strong accent
Tetradic Rich, colorful Infographics and charts
Monochromatic Elegant, minimal Corporate sites, portfolios
Shades Systematic Design systems, UI states

From palette to design

Once you have a palette, check that text is readable on every background with the Color Contrast Checker, convert the colors to RGB, HSL or CMYK for print with the Color Converter, and turn two of them into a smooth background with the CSS Gradient Generator.

Frequently asked questions

What is a complementary color scheme?
Complementary colors sit opposite each other on the color wheel, such as blue and orange. The strong contrast makes accents and calls to action stand out. Use one color as the main color and the complement sparingly.
What's the difference between analogous, triadic and tetradic?
Analogous colors are neighbours on the color wheel and feel calm and cohesive. Triadic colors are evenly spaced 120° apart and feel vibrant but balanced. Tetradic (square) palettes use four hues 90° apart and are the most colorful — usually best with one dominant color.
How should I use a five-color palette on a website?
A common approach is the 60-30-10 rule — about 60% neutral background, 30% primary color and 10% accent. Use the darkest color for text and check every text and background combination with a contrast checker.
Can I start from my brand color?
Yes. Enter your brand's HEX code as the base color; every scheme is built around it. To get a brand color from a logo or website screenshot, use the Image Color Picker.
How are the colors calculated?
The base color is converted to HSL (hue, saturation, lightness). Schemes rotate the hue by fixed angles of the color wheel, while monochromatic palettes and shades keep the hue and vary the lightness.

Related tools

Color Contrast CheckerCheck whether your text is readable enough — and get the closest color that passes WCAG.Color ConverterConvert any color between HEX, RGB, HSL, HSV and CMYK, and check its contrast.Image Color PickerClick anywhere on an image to get its exact HEX, RGB and HSL color — plus its main color palette.CSS Gradient GeneratorDesign a gradient background visually and copy the CSS — linear, radial or conic.Box Shadow GeneratorFine-tune soft, sharp, layered or inset shadows with a live preview and copy the CSS.Color Blindness SimulatorPreview your images through the eyes of someone with color vision deficiency to ensure your designs are accessible.