Palette Generator

Generate harmonious color palettes from a base color. Pick a harmony, adjust the count, and export in CSS, SCSS, Tailwind, or JSON.

Base color
Single hue, varying lightness and saturation. Cohesive and minimal - great for subtle, elegant designs.
Two hues opposite on the color wheel (180°). High contrast and vibrant - use sparingly to avoid visual tension.
Three adjacent hues (±30°). Naturally harmonious and soothing - ideal for backgrounds and illustrations.
Three hues equally spaced (120°). Balanced yet colorful - works well with one dominant and two accent colors.
One hue plus the two colors flanking its complement (±30°). Softer contrast than complementary, more dynamic than analogous.
Four hues forming two complementary pairs (90° apart). Rich and complex - requires careful balance to avoid clashing.
#08345E
#8AC1F5
#080A5E
Base
#6366F1
#32085E
:root {
  --color-1: #08345e;
  --color-2: #8ac1f5;
  --color-3: #080a5e;
  --color-4: #6366f1;
  --color-5: #32085e;
}

About: Palette Generator

The palette generator builds harmonious colors from a base color using six color-wheel harmonies: monochromatic, complementary, analogous, triadic, split-complementary and tetradic. Lock the colors you like, name them, add notes, reorder them and keep several palettes side by side in tabs. Export to CSS, SCSS, Tailwind or JSON and you get variables ready to paste into a project, a design system or a theme.

Features

  • Six harmonies with a small preview of each before you switch, and 3 to 10 colors per palette.
  • Locked colors: a color you edit or lock stays put when you change the harmony or base color, or hit Random.
  • A name and a note for each color, used in the export: the name becomes the variable, the note a comment.
  • Up to 20 palettes in tabs that you can rename, duplicate or delete; long-press a color to drag it elsewhere.
  • Share links in read-only mode, as an editable copy, or for real-time shared editing with other people.

How to use it

  1. Pick a base color, or click Random to roll one.
  2. Choose a harmony using the previews, then set how many colors you want.
  3. Tweak or lock the colors you want to keep, and give them a name and a note.
  4. Choose an export format, HEX, CSS, SCSS, Tailwind or JSON, and copy the code.

Questions about usage

It pairs two hues opposite each other on the color wheel, 180° apart, such as blue and orange. The contrast is strong, so one hue usually dominates while the other is kept for accents. The tool turns each hue into several lightness steps.

Pick the Tailwind tab in the export panel to get a colors object you can paste into theme.extend.colors in your Tailwind config. The names you gave your colors become the keys, falling back to color-1, color-2 and so on, and notes appear as comments.

Yes. Create a shared editing link: everyone who opens it edits the same palettes in real time. The content is encrypted in your browser before it's sent, so the server can't read it. You can also share a read-only link or an editable copy.