Brand PeelBrand Peel (Beta)

Color Palette Generator

Start with one color you like and let harmony do the rest. Pick monochromatic, analogous, complementary, split complementary, triadic or tetradic from a single hex, see shades and tints, then copy CSS variables or Tailwind config.
Open Color Checker
Free Tool Design System
Tools Overview

Color Palette Generator

Start with one color you like, the system does the harmony work. Pick monochromatic, analogous, complementary, split complementary, triadic or tetradic from a single hex, see shades and tints, then copy CSS variables or Tailwind config.

Catalog Context Part of Design System

See how this tool connects to category hubs, workflow paths, starter kits, and adjacent next steps.

Category HubBuild Stack
Adjacent Brand Foundations Brand Governance Developer Marketing
PreviousNext
Next Move - Strong resultDesign System

Recommended: Color Blindness CVD Simulator

Palette is ready. Verify it works for color-blind users next.

Simulate color blindness

Seed color

Pick a base color and harmony rule to build the palette.

Current base

#7C3AED

HSL 262° / 83% / 58%

Generated palette

Click any color to copy its hex code.

Shades

Tints

CSS Variables 

:root {
  --color-1: #7C3AED;
  --color-2: #ACED3B;
}

Tailwind Config 

colors: {
  brand: {
    1: '#7c3aed',
    2: '#aced3b',
  }
}