Palette Generator

Palette Generator

Harmony wheel, quick generation, theme tokens, contrast checks, and export-ready palettes in one workflow.

Drag the primary handle to rotate the palette. In linked harmonies, the other points move with it. Switch to free mode to edit each color independently.
Brand Accent
Palette Generator
Live preview of buttons, inputs, surfaces, and accent usage in a product-like interface.
Surface
Analytics Card
Cards, badges, form fields, and charts update from your generated tokens.
Accent

How the Palette Generator Works

Create harmonious color palettes using color theory. Harmony wheel, quick presets, contrast checks, and export in any format.

Color Wheel Harmonies

Select a base hue and generate complementary, analogous, triadic, split-complementary, and tetradic palettes based on color theory principles.

Quick Generation

Get a production-ready palette in one click. The generator creates a balanced set of primary, secondary, accent, and neutral colors.

Contrast Checks

Built-in WCAG contrast checking shows which color combinations meet AA and AAA accessibility standards. Design beautiful palettes that are also accessible.

Export & Save

Export palettes as CSS variables, Tailwind config, SCSS, or JSON. Save palettes to your library for later use or share them via URL.

Frequently Asked Questions

Color harmonies are combinations of colors based on their positions on the color wheel. Complementary colors sit opposite each other and create high contrast. Analogous colors sit next to each other and feel cohesive. Triadic colors are evenly spaced and offer balanced variety.

A typical design palette needs 5-8 colors: a primary brand color, a secondary color, an accent for CTAs, a success/error/warning set, and 2-3 neutral grays. The generator helps you build all of these from a single base hue.

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background. AA requires 4.5:1 for normal text; AAA requires 7:1. Meeting these standards ensures your content is readable by people with visual impairments.

Yes. Enter any HEX, RGB, or HSL value as the base color and the generator will build harmonies around it. This is useful when you already have a brand color and need to expand it into a full palette.