Calcuva
DV · Development Engine

Color Palette Generator

Pick a base color or randomize one, then choose a harmony rule — complementary, analogous, triadic, tetradic, monochromatic or split-complementary. The tool rotates the hue and steps lightness in HSL to derive a balanced 5-swatch palette, each HEX copyable, with copy-all, exportable CSS variables, a live gradient preview and a WCAG contrast check. Runs fully client-side.

Calcuva Analysis
COLOR-PALETTE-GENERATOR TOOL
July 30, 2026
Hue243°
Saturation75%
Lightness59%

How to use this tool

1
Pick a Base Color

Use the color picker, type a HEX, or drag the Hue/Saturation/Lightness sliders — or hit Re-randomize for a fresh starting color.

2
Choose a Harmony Rule

Select complementary, analogous, triadic, tetradic, monochromatic or split-complementary. The five swatches recompute instantly via HSL hue rotation and lightness steps.

3
Copy Your Colors

Click any swatch to copy its HEX, use Copy All HEX for the list, or copy the :root block of CSS variables straight into your stylesheet.

Pro Tip

Follow the 60-30-10 rule: let one swatch dominate 60% of the layout, a second take 30%, and reserve the high-contrast complementary color for the final 10% of accents like buttons and links.

Live Preview · Analogous
5-color palette
Generated CSS Variables
:root {
  --color-1: #46DCE5;
  --color-2: #468CE5;
  --color-3: #4F46E5;
  --color-4: #9F46E5;
  --color-5: #E546DC;
}
background: linear-gradient(90deg, #46DCE5, #468CE5, #4F46E5, #9F46E5, #E546DC);
HEX
#4F46E5
RGB
79, 70, 229
HSL
243, 75%, 59%
Best Contrast
6.29:1
Aa
WCAG Contrast (vs white text)
6.29:1 AA Pass AAA Fail

What This Tool Does

A color palette generator takes a single base color and expands it into a coordinated set of five colors using the geometry of the color wheel. Instead of guessing which shades go together, you pick one color you like — a brand blue, a sunset orange, anything — choose a harmony rule, and the tool computes the rest. Every swatch is shown with its HEX code, each one is copyable with a click, and the full set exports as ready-to-paste CSS variables. A live gradient preview and a WCAG contrast check round out the workflow so you can judge both beauty and accessibility at a glance.

The Color Math Behind Harmony

The secret is the HSL color model — Hue, Saturation, Lightness. Hue is an angle from 0° to 360° around the wheel; rotating it produces related colors while keeping the same vividness and brightness. The tool converts your base HEX to HSL, then applies each harmony rule as a set of hue rotations and lightness steps:

  • Complementary — the base plus its opposite at +180°, with a tint and a shade for depth.
  • Analogous — neighbours at −60°, −30°, +30°, +60°, sharing a common hue.
  • Triadic — three hues 120° apart for vibrant balance.
  • Tetradic — two complementary pairs at 90° intervals, the widest range.
  • Split-complementary — the base plus two colors flanking its complement (+150° and +210°).
  • Monochromatic — one hue, varied only by lightness in even steps.

A Worked Example

Say your brand color is #4F46E5 (a vivid indigo). Converted to HSL that is roughly 244°, 76%, 58%. Choose the Triadic rule and the generator rotates the hue by 120° and 240°:

Base 244° → #4F46E5 +120° → 4° (a warm red, around #E5564F) +240° → 124° (a fresh green, around #4FE556)

Add a darkened variant of each companion and you have five swatches that feel deliberately designed rather than thrown together. Hit Copy All HEX to grab the list, or copy the :root block to drop --color-1 … --color-5 straight into your stylesheet.

Designing for Accessibility

Pretty colors that no one can read are a failure. The tool runs the official WCAG contrast formula, which compares the relative luminance of two colors and returns a ratio between 1:1 and 21:1. It automatically chooses black or white text for your base color and flags whether it clears AA (4.5:1) for body text or AAA (7:1) for the highest standard. As a rule, use your darkest swatch for text and your lightest for backgrounds, and reserve the high-energy complementary color for small accents like links and buttons.

Practical Tips

  • Let one color lead. Use a 60-30-10 split: 60% dominant, 30% secondary, 10% accent.
  • Start analogous, finish complementary. Build a calm base with analogous shades, then introduce a single complementary accent for contrast.
  • Lock in saturation. If a palette feels muddy, drop the saturation slider slightly across the board for a more modern, muted look.
  • Test on real UI. A swatch grid can lie — the live preview shows how the colors interact as a gradient and behind text.

Once your palette is set, pair it with the JSON Formatter to keep your design tokens tidy, or feed your numbers into the Data Visualizer to color-code charts with the exact same scheme.

Common Questions

Expert FAQ