Color Palette Generator Online - Free color palette generator for harmonious color schemes.

Free online color palette generator. Create complementary, analogous, triadic, and split-complementary schemes. Export as CSS, Tailwind, or SVG.

Base Color: #6366F1

Mode:

Color Palette

CSS Variables

:root {
  --color-palette-1: #64adf2;
  --color-palette-2: #648af2;
  --color-palette-3: #6467f2;
  --color-palette-4: #8564f2;
  --color-palette-5: #a864f2;
}

#64ADF2

rgb(100, 173, 242)

#648AF2

rgb(100, 138, 242)

#6467F2

rgb(100, 103, 242)

#8564F2

rgb(133, 100, 242)

#A864F2

rgb(168, 100, 242)

How to Use Color Palette Generator

1Pick a base color using the color picker.
2Select a harmony mode (complementary, analogous, triadic, etc.).
3View the generated 5-color palette with HEX and RGB values.
4Export as CSS variables or Tailwind config.

Frequently Asked Questions

What is color harmony?

Color harmony refers to combinations of colors that are visually pleasing. Common harmony modes include complementary (opposite on color wheel), analogous (adjacent), triadic (120° apart), and monochromatic (same hue, different lightness).

How do I export the palette?

Switch between CSS Variables and Tailwind Config tabs in the export section. Click Copy to copy the code to your clipboard for use in your project.

Can I use the palette in my project?

Yes. The generated palettes are free to use in any project. Copy individual colors by clicking them, or export the full palette as CSS variables or Tailwind configuration.

Found a bug or have a suggestion? Report it on GitHub

Learn More

Guide

Color Palette Generator Online - Free color palette generator for harmonious color schemes.

How to Use Color Palette Generator

Frequently Asked Questions

Learn More

Color Palette Guide

Color Harmony Theory

Design Color Systems

The 60-30-10 Color Rule for Web Design: A Practical Guide

Accessibility-First Color Palettes: Designing for WCAG Compliance

Building Accessible Color Palettes

Designing Custom Tailwind Palettes