Color Palette Generator
Create a harmonious five-color palette from one seed color. Your work stays on this device whenever possible.
How to use Color Palette Generator
- Choose a starting color with the "Seed Color" picker or type six hex digits into "Hex Value"; a leading # is added for you, and shorter codes are ignored.
- Select a "Color Harmony": Complementary, Analogous, Triadic, Monochromatic or Split-Complementary calculate from the seed, while the three Curated sets ignore it.
- Press "Lock" on a swatch to freeze it, then change the harmony; only unlocked swatches update.
- Use "Randomize Seed" for a random starting color.
- Read the WCAG table (ratio against white, ratio against #0f172a, best text) and export with "Copy Hex List", "Copy CSS Variables" or "Copy Tailwind Config".
Worked example
Select "Curated: Nordic Slate & Ice". The five swatches read #1E293B, #334155, #64748B, #94A3B8 and #E2E8F0 whatever the seed says. "Copy CSS Variables" then places a :root block on the clipboard with --color-1: #1e293b through --color-5: #e2e8f0, and the contrast table rates each swatch against white and dark navy.
When to use this tool
- Turning a single brand blue into a five-color scheme with checked text contrast.
- Exporting a ready-to-paste --color-1 to --color-5 variable block for a stylesheet.
- Locking two colors you already like while re-rolling the rest with a different harmony.
Important limitations
Palette harmonies calculate mathematical color wheel relationships in RGB/HSL space. Display rendering depends on monitor color gamut and gamma calibration.
Frequently asked questions
How are the five swatches derived?
The seed becomes hue, saturation and lightness. Harmonies rotate the hue (180 degrees for complementary, plus and minus 30 for analogous, 120 and 240 for triadic, 150 and 210 for split) and adjust lightness. Monochromatic steps lightness through 15, 35, the seed, 75 and 92 percent.
What do AAA, AA and Large Text Only mean here?
For each swatch the tool picks the better of white or dark navy text and rates that ratio: 7:1 or more is AAA, 4.5:1 to 7:1 is AA, anything lower is Large Text Only. It rates text on a swatch, not pairs of palette colors.
Why do Nordic, Sunset and Cyberpunk ignore my seed?
They are fixed lists of hex values, such as #1E293B, #334155, #64748B, #94A3B8 and #E2E8F0 for Nordic. The seed only matters again when you return to a calculated harmony.
Why did a swatch stay put when I changed the seed?
Locked slots are skipped on every recompute, including after Randomize Seed. Press the lock button again to release it and let it follow the harmony.
Which export formats exist, and is RGB included?
Hex only. CSS variables are named --color-1 to --color-5, and the Tailwind copy uses keys 100 to 500 under a brand group. HSL appears under each swatch in whole numbers; RGB values are not shown anywhere.