Generator family

Color Palette Generator

Start with one color, pick a harmony rule, and generate a palette you can actually use in interfaces, illustrations, decks, and brand systems. Every result includes readable HEX, RGB, HSL, CSS variables, and JSON output.

  • Live palette preview
  • Multiple harmony schemes
  • Copy-ready developer exports
  • Contrast guidance per swatch

Generate a palette

Use a base color and tune how far the palette moves in hue, saturation, and lightness. The generator clamps values safely, wraps hue at 360 degrees, and rounds export values to whole RGB numbers and one decimal place for HSL percentages.

Enter a 3-digit or 6-digit hex color like #C96C3D or #f80.
Different schemes change hue spacing while the spread slider shapes variation inside the set.
For harmony accuracy, some schemes repeat intervals when you request more colors than the core pattern.
48%
Low spread stays closer to the base tone. Higher spread pushes light and dark accents further apart.
Palette ready.

Results

The preview strip shows the palette as a left-to-right sequence. Each swatch includes a contrast recommendation for foreground text against that specific color.

Export

Use the format selector to switch between CSS custom properties and JSON. Copy actions are disabled only if the browser clipboard API is unavailable.

HEX RGB HSL CSS JSON

How it works

The generator converts the base hex color to HSL, applies hue intervals based on the selected harmony rule, then adjusts saturation and lightness across the palette according to the spread value.

1. Input cleanup

Hex input is trimmed, normalized, and expanded if needed. Invalid entries do not break the page, and the last valid palette remains visible until the input is corrected.

2. Palette math

Hue values wrap around the color wheel. Saturation and lightness are clamped between 0 and 100 to prevent invalid color output.

3. Production export

Exports include naming, rounded values, and stable ordering so the output can drop directly into design tokens, quick prototypes, or style sheets.

Colors can render differently across displays, browsers, and operating systems. Treat this tool as a fast palette starting point, then verify final choices in your target environment and accessibility workflow.