🎨

Palette Generator & Contrast Analyzer

Generate harmonious color palettes from a base color using color theory. Includes WCAG contrast analysis for all color pairs.

Color Scheme
Contrast Analysis (WCAG)

All color-pair combinations from your palette checked against WCAG AA.

ForegroundBackgroundRatioAA NormalAA Large

About Palette Generator & Contrast Analyzer

Generate color palettes using proven color theory principles — analogous, complementary, triadic, tetradic, and more. Every generated palette is automatically analyzed for WCAG AA contrast ratios so you can build accessible designs from the start.

Color Scheme Types

Analogous — neighboring hues on the wheel, harmonious · Complementary — opposite hues, high contrast · Triadic — three evenly spaced hues · Monochromatic — variations in lightness of one hue · Shades — tints and shades from white to black

Frequently Asked Questions

Analogous colors sit adjacent to each other on the color wheel (e.g. blue, blue-green, green). They create harmonious, natural-looking palettes commonly used for calm, unified designs like nature photography sites and wellness brands.
Complementary colors are directly opposite on the color wheel (e.g. blue and orange). They create strong contrast and visual tension, making them effective for call-to-action buttons and sports brands.
The WCAG contrast ratio determines whether text is readable against a background color, particularly for users with low vision or color blindness. Using palette colors that pass WCAG AA (4.5:1) ensures your design is accessible and often legally compliant.
Click "Copy CSS Variables" to get a :root { --color-1: #...; } block. Paste it in your CSS file, then reference the colors anywhere with var(--color-1). This keeps your palette centralized and easy to update.

About Color Palette Generator

The Color Palette Generator creates harmonious color palettes from a base color using standard color theory relationships: complementary, analogous, triadic, tetradic, and split-complementary. Get HEX, RGB, and HSL values for each swatch instantly.

How to Use

  1. Choose a Base Color using the color picker or HEX input.
  2. Select a Harmony Type (complementary, analogous, triadic, etc.).
  3. The palette generates instantly with color swatches and their values.
  4. Click any swatch to copy its HEX code.
  5. Click Generate Random for inspiration when you don't have a starting color.

How It Works

Colors are converted to HSL, then the hue angle is rotated by formula for each harmony type. Complementary is 180°. Analogous uses ±30°. Triadic uses ±120°. The resulting hues are converted back to HEX and RGB for display.

Example

Base color: #6366f1 (indigo).
Complementary: the color opposite on the wheel (~#f1a633, amber).
Triadic: two colors 120° apart (~indigo, green, red-orange).

Frequently Asked Questions

The complementary color is directly opposite on the color wheel (180° away in hue). Complementary pairs create high contrast and visual vibration when placed next to each other.
Analogous palettes use colors that are adjacent on the color wheel (e.g. ±30°). They feel harmonious and are found in nature — often used for calm, cohesive designs.
Copy the HEX or HSL values and define them as CSS custom properties (variables). For example: --color-primary: #6366f1; --color-accent: #f1a633; Then reference them throughout your CSS.
Color harmony does not guarantee sufficient contrast for text. Always check your text/background combinations using the Color Contrast Checker tool to ensure WCAG compliance.