Color Palette Generator

Build five-color harmonies, lock swatches, check text contrast and export CSS or JSON.

Build a five-color harmony from your base color. Lock favorites, check text contrast, and export CSS or JSON locally.

Base color (opaque HEX, RGB or HSL)

Color harmony

Text color for contrast checks

#6366f1

4.70:1 · AA normal pass

#63adf1

8.78:1 · AA normal pass

#a763f1

5.70:1 · AA normal pass

#63f1ee

15.35:1 · AA normal pass

#ee63f1

7.69:1 · AA normal pass

Contrast uses WCAG 2 relative luminance with the selected text color against each opaque swatch. AA needs 4.5:1 for normal text or 3:1 for large text (24 CSS px, or 18.67 px bold). Pass/fail uses the unrounded ratio. A harmony is not an accessibility guarantee; check your actual pairings with the Contrast Checker.

Analogous: ±30° and ±60°. Complementary: 180° with light/dark variants. Triadic: 120°/240° with variants. Monochromatic: one hue with lightness steps. Locks can override the chosen harmony. Gray bases stay gray; HSL spacing is not perceptually uniform.

This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.

Generate five-color harmonies from a base color, preserve locked swatches, inspect text contrast and export CSS or JSON.

How to use it

1Choose an opaque base color and harmony.
2Lock colors to retain, then generate the palette.
3Choose a text color and inspect each contrast ratio.
4Copy CSS or download CSS/JSON for the current palette.

Example

Input: #ff0000, Triadic, unlocked
Output: First three: #ff0000, #00ff00, #7070ff

What happens to your data

Palette generation and exports run locally; no account, upload or remote color service is used.

Last updated October 2026

Build a five-color palette around an existing brand color instead of starting from unrelated random swatches. Choose an analogous, complementary, triadic or monochromatic relationship, lock colors you want to retain, and regenerate the remaining positions. Export the current result as CSS custom properties or JSON with measured text-contrast values.

A visually related palette is not automatically suitable for readable text. The page previews a chosen text color on every swatch and calculates its WCAG contrast ratio. These checks help you separate decorative colors from combinations that can work for text, while leaving the final design decision in your hands.

How it works

The base is an opaque sRGB color supplied as HEX, RGB or HSL. Analogous colors use hue offsets of ±30° and ±60°. Complementary uses a 180° partner with light/dark variants; triadic uses 120° and 240° partners with variants. Monochromatic keeps the hue and uses lightness steps. The first position uses the base unless locked. Locked positions retain their exact HEX values even when the seed or harmony changes.

The process is deterministic: the same base, harmony and locks produce the same result. Gray seeds remain gray because they have no saturation; black and white can produce repeated swatches in some harmonies. HSL spacing is not perceptually uniform, and these relationships are starting points rather than proof that a palette is unique, balanced or accessible. Changing the seed or harmony pauses exports until you generate the updated palette.

Contrast compares the selected opaque text color with each opaque background using WCAG 2 relative luminance. Normal-size AA text needs 4.5:1; large text needs 3:1. Large means at least 24 CSS pixels, or approximately 18.67 pixels when bold. Pass/fail uses the full ratio rather than a rounded display. JSON includes the ratios and AA/AAA flags; the CSS export contains only the five color variables. Neither export is a complete accessibility audit of your interface. Processing and downloads stay on your device.

Worked example: start a triadic palette from red

Input: Base #ff0000; Triadic; all colors unlocked
Result: First three swatches: #ff0000, #00ff00, #7070ff

The third position is a lighter blue variant. Locked positions override the harmony.

Common use cases

Extending a brand color into an initial interface palette
Preserving approved colors while exploring alternatives
Checking a text color against several backgrounds
Exporting CSS variables and a contrast report for implementation

Frequently asked questions

Why do the colors not change when I generate again?＋

Generation is based on the selected base color, harmony and locks, not a random shuffle. Change the base or relationship to explore a new result. Locked swatches deliberately stay unchanged.

Does an AA label mean the whole page is accessible?＋

No. It evaluates one opaque text/background pairing at the WCAG contrast threshold. Font size, states, images, focus indicators, content structure and other accessibility requirements still need checking.

Why did a locked color break the harmony?＋

A lock is an explicit instruction to retain that color. It takes priority over the mathematical relationship. Unlock the position and generate again if you want every position to follow the selected harmony.

What is included in the downloads?＋

CSS contains five custom properties named --palette-1 through --palette-5. JSON contains the colors, chosen text color, contrast ratios and threshold flags. There are no remote image URLs or uploaded inputs.