What are color harmony rules?

Color harmony rules are mathematical relationships on the color wheel that create pleasing color combinations. Complementary colors are opposite each other (180°), analogous are adjacent (30°), triadic are evenly spaced (120°), and split-complementary uses two colors adjacent to the complement.

How do I create a complementary color scheme?

Select a base color, choose 'Complementary' as the harmony type, and click generate. The tool will calculate the color directly opposite on the color wheel (180° hue rotation) which creates high contrast and vibrant combinations.

Can I extract colors from an image?

Yes! Click 'From Image' to upload any image. The tool analyzes the image and extracts the 5 most dominant colors to create a palette. This is perfect for matching website colors to brand photography or creating themed palettes.

What export formats are available?

Export your palette as: Tailwind config (for tailwind.config.js), CSS variables (:root custom properties), SCSS variables ($variable format), JSON (for design tokens), or Figma tokens (compatible with Figma's token system).

How does the accessibility checker work?

The accessibility tab analyzes all possible color combinations in your palette and checks their contrast ratios against WCAG 2.1 standards. It shows which pairs pass AA (4.5:1) and AAA (7:1) requirements for text readability.

Can I lock colors while generating?

Yes! Click the lock icon on any color to keep it fixed while randomizing or generating new palettes. This is useful when you have a brand color that must be included in every palette variation.

AI-Powered

Palette Generator

Create beautiful color palettes with harmony generation, accessibility checking, and export to multiple formats.

#6366F1

indigo-500

#8B5CF6

violet-500

#A855F7

purple-500

#D946EF

fuchsia-500

#EC4899

pink-500

Tailwind

Color Harmony

Base Color

Harmony Type

Accessibility Analysis

1.29:1

AA FailAAA Fail

1.27:1

AA FailAAA Fail

1.22:1

AA FailAAA Fail

1.20:1

AA FailAAA Fail

1.14:1

AA FailAAA Fail

1.13:1

AA FailAAA Fail

1.12:1

AA FailAAA Fail

1.07:1

AA FailAAA Fail

1.05:1

AA FailAAA Fail

1.02:1

AA FailAAA Fail

Contrast Grid

BG↓

—

1.1

1.3

1.1

—

1.1

1.2

1.1

—

1.1

1.3

1.2

1.1

—

1.0

1.3

1.2

1.1

1.0

—

≥4.5 (AA)

≥3 (Large)

<3 (Fail)

Color Scale Generator

Base Color

Export Code

1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      colors: {
6        'color-1': '#6366f1',
7        'color-2': '#8b5cf6',
8        'color-3': '#a855f7',
9        'color-4': '#d946ef',
10        'color-5': '#ec4899',
11      },
12    },
13  },
14}

SpaceGenerate

Ctrl+ZUndo

Ctrl+YRedo

Ctrl+SSave

Color Harmony Wheel

Create harmonious color schemes

Gradient Generator

Build beautiful CSS gradients

Palette Generator

You might also like

Color Harmony Wheel

Gradient Generator