Color Palette Generator

Build related HEX colors from one base color using consistent HSL hue and lightness transformations. Preview and copy the colors for your design.

Generated Color Palette

Clear controls

Review inputs and results

Transparent methods

Understand the output

Works on any device

Mobile, tablet or desktop

How to Use the Color Palette Generator

Choose a base color with the picker or a three- or six-digit HEX value. Select complementary, analogous, triadic or monochromatic harmony and generate. Randomize changes the base color while keeping the selected harmony. Copy an individual HEX value or the complete list, or reset to the default blue palette.

Color Theory and Explanation

Complementary hues: h, h + 180°
Analogous hues: h − 30°, h, h + 30°
Triadic hues: h, h + 120°, h + 240°
Monochromatic lightness: L − 30, L − 15, L, L + 15, L + 30 percentage points
Hue wraps at 360°; lightness is clamped to 0–100%.

HEX RGB is converted to HSL. Hue-based harmonies keep HSL saturation and lightness constant; monochromatic palettes keep hue and saturation constant and vary lightness. Colors convert back to rounded eight-bit RGB channels and normalized six-digit uppercase HEX. HSL is a mathematical relationship, not a perceptually uniform spacing or accessibility guarantee.

Mathematically related colors do not automatically provide accessible text contrast. Check actual foreground/background pairs with the Color Contrast Checker. Gray colors have no meaningful hue, so some harmonies repeat colors; clamped lightness near black or white can also produce duplicates. RGB rounding may create small numerical hue differences. This tool supports opaque HEX colors, not alpha or print color profiles.

Worked Example

With #FF0000 as the base, a complementary palette gives #FF0000 and #00FFFF. A triadic palette gives #FF0000, #00FF00 and #0000FF, corresponding to hues 0°, 120° and 240° at the same HSL saturation and lightness.

Frequently Asked Questions

Which color model generates the harmonies?

The generator uses HSL derived from RGB HEX. Complementary, analogous and triadic modes rotate hue while preserving HSL saturation and lightness. Monochromatic mode changes lightness with fixed hue and saturation.

Are the palettes accessible for text?

Not automatically. Harmony is not a contrast test. Check each actual text/background combination, including hover and disabled states, before using it in an interface.

Why do gray or very light colors repeat?

Achromatic colors have zero saturation, so changing hue does not change the color. Lightness values clamped at 0% or 100% can also produce repeated black or white swatches.

What is copied by the copy buttons?

Each individual button copies that swatch’s normalized six-digit HEX value. Copy all returns the displayed HEX values in order, one per line. Copy feedback appears below the controls.