Palette Generator

Generate harmonies, tints, and shades from a base color. Copy HEX/RGB/HSL, export CSS variables/JSON, and share links on demand.

How to Use

  1. Enter a base color (HEX) or pick one with the color picker.
  2. Choose a harmony mode and palette size.
  3. Adjust saturation/lightness range (optional).
  4. Click “Generate” to refresh swatches.
  5. Copy formats or export CSS/JSON. Use “Share Link” only when you’re ready.
Preview
Swatches update only when you click Generate (no URL changes while typing).
Base
—
Mode
—
Count
—
Contrast hint
—
Enter a base color and click Generate to build a palette.
Inputs & Settings
Set base color and generation rules, then click Generate.
Accepts #RGB, #RRGGBB. Example: #0b1020
Harmony defines hue relationships; ranges refine tints/shades.
More swatches = smoother ramps, bigger export payloads.
Per-swatch copy buttons can still override this.
80%
20%
85%
Used only if you choose Randomize; otherwise generation remains deterministic.
Example output: --ub-palette-1: #ff7426;
Details (palette math + rules)
—
Details show calculations in HSL for clarity (hue rotations + saturation/lightness ramps).

Reference

Most palette generation is easiest in HSL: hue sets the color family, saturation controls intensity, and lightness controls tints/shades.

  • Complementary: hue + 180°
  • Analogous: hue ± 30° (typical)
  • Triadic: hue + 120° and + 240°
  • Tetradic: hue + 90°, + 180°, + 270°
  • Monochrome: fixed hue, vary lightness
Tip: include neutrals to get UI-ready background/border/text colors from the same palette.

FAQ

Why do some swatches look “muddy”?

Very low saturation or mid lightness can reduce perceived vibrancy. Try increasing saturation or widening the lightness range.

Does this check WCAG contrast?

This tool provides a quick contrast hint. For full checking, use a dedicated Contrast Checker (recommended in Related Tools).

Will the URL update while I type?

No. State is only written into a share URL when you click “Share Link.”

Do you upload my palette anywhere?

No uploads required. Everything generates in your browser.

Tool Info

Last updated:

Updates may include new harmony modes, improved naming/export formats, and edge-case handling.