Color Palette Generator

Overview

Generates five-color palettes from a seed color using six classical harmony rules — complementary, analogous, triadic, split-complementary, tetradic and monochromatic — then grades every swatch for WCAG contrast against black and white and exports the set as CSS custom properties, a Tailwind config fragment or JSON.

How It Works

Set the seed color with the color picker or by typing a six-digit hex (the text field validates the format before accepting it), or press Random for a random mid-saturation seed. Pick a harmony from the dropdown and five swatches appear, each showing its hex, its HSL values, a WCAG grade badge and the better of its black-on or white-on contrast ratio. Below, a contrast matrix scores sample text pairs from the palette against each other. Choose an export format — CSS, Tailwind or JSON — and copy the block with one click.

Step-by-Step Usage Guide

1. Choose a seed color via the picker, a typed hex, or the Random button.
2. Select a harmony — start with Complementary for maximum contrast or Analogous for a calm scheme.
3. Read each swatch's WCAG badge and ratio to decide whether black or white text belongs on it.
4. Pick CSS, Tailwind or JSON in the export row and click Copy to take the palette into your project.

Technical Specifications & Standards

All color math runs through HSL, the space where harmony rules are one-line rotations of hue: complementary adds 180 degrees, triadic 120 and 240, split-complementary 150 and 210, tetradic 90, 180 and 270, while analogous steps 15 and 30 degrees and monochromatic moves lightness from minus-30 to plus-30 with saturation fixed. The generator adds deliberate variety beyond the pure rule: the complementary palette also includes two analogous neighbours and a lighter tint of the seed, so results are usable rather than mechanical. Each swatch is graded with the real WCAG relative-luminance formula — sRGB linearisation with the 0.04045 threshold and the 0.2126/0.7152/0.0722 coefficients — against both black and white, and the better ratio earns the grade: AAA at 7:1, AA at 4.5:1, AA Large at 3:1. That answers the practical question 'what text color goes on this swatch' with numbers instead of squinting. Export is equally specific: CSS emits :root custom properties, Tailwind emits a palette object at 100-step intervals (palette.100 through palette.500), and JSON preserves seed, harmony and swatches for reuse.

Targeted Use Cases

• Starting a new site or app theme from a brand color with mathematically consistent supporting hues.
• Building a dark-mode-friendly palette by checking each color's contrast against black and white before committing.
• Producing a Tailwind color config or CSS custom properties block without hand-computing hex values.
• Teaching color harmony rules, since every generated swatch is traceable to its hue rotation.

Notes & Gotchas

• Check the WCAG badge before using a swatch as a text background; a 3:1 grade supports only large text.
• Anchor palettes on a mid-lightness seed (40-60 percent lightness, like the Random button produces) so both tints and shades have room.
• Use the contrast matrix for pairs you will actually combine, not just swatch-on-black.
• Export as CSS custom properties so one palette edit propagates through your stylesheet.

Frequently Asked Questions