Color Palette Generator

Generate complementary, analogous, triadic and tetradic color palettes from any base color

Try an example

Base color

Color scheme

Generated palette

What Is a Color Palette?

A color palette is a fixed set of colors chosen to work together in a design. When you pick a single base color for a brand, website, or illustration, you need companion colors that sit well beside it. Color palette generation automates that choice by applying rules from color theory, specifically the geometric relationships on the standard HSL color wheel.

The HSL (Hue, Saturation, Lightness) color wheel arranges hues in a 360-degree circle. Red sits at 0 degrees, green at 120 degrees, and blue at 240 degrees. Every color harmony scheme works by selecting hues at specific angular distances from the base color. A complementary pair, for example, uses two colors 180 degrees apart. An analogous set picks colors within 30 degrees on either side. These geometric rules produce balanced combinations because the selected hues spread around the wheel rather than clustering in one region.

This tool takes any hex color as input, converts it to HSL, rotates the hue by the angles defined by the selected scheme, and converts the results back to hex. It supports six schemes: complementary, analogous, triadic, split-complementary, tetradic, and monochromatic. Each scheme produces a different number of output colors, from 2 to 5.

Why Use This Color Palette Generator?

Picking colors that work together by trial and error is slow and inconsistent. A palette generator applies color theory rules instantly, giving you mathematically balanced results from any starting point.

⚑
Instant Palette Generation
Select a base color and a scheme type, and the palette appears immediately. No form submissions, no loading screens. Change the base color and the output updates in real time.
🎨
Six Harmony Schemes
Choose from complementary, analogous, triadic, split-complementary, tetradic, or monochromatic. Each scheme produces a different visual effect, from high-contrast pairs to subtle single-hue gradients.
πŸ”’
Privacy-first Processing
All color math runs in your browser. No color data is sent to any server. The tool works offline after the page loads.
πŸ“‹
One-click Export
Copy individual hex codes or the entire palette in one click. Paste directly into CSS, Figma, Tailwind config, or any design tool that accepts hex values.

Color Palette Generator Use Cases

UI Theme Creation
Frontend developers building a new app can start with a brand color and generate a full palette for primary, secondary, and accent tokens. Triadic or tetradic schemes produce enough variety for buttons, links, alerts, and backgrounds.
Design System Color Tokens
Design system engineers use monochromatic palettes to generate a lightness scale for a single brand hue, then map each step to a named token (e.g. blue-100 through blue-900).
Data Visualization
Data engineers and analysts need distinct colors for chart series that don't clash. An analogous or triadic palette gives enough separation for 3-6 series while keeping the chart visually coherent.
Marketing Landing Pages
Designers building campaign pages start from the brand's primary color and use a split-complementary scheme to find accent colors for CTA buttons and highlighted sections without clashing with the logo.
Accessibility Pairing
QA engineers testing WCAG compliance pair generated palette colors and run them through a contrast checker. Starting from a complementary or split-complementary scheme often produces pairs with high luminance contrast.
Learning Color Theory
Students studying design can toggle between all six schemes on the same base color and see how each geometry distributes hues around the wheel. The visual output makes the abstract angles tangible.

Color Harmony Schemes Comparison

Every harmony scheme picks colors based on hue rotation angles from the base color on the HSL wheel. The table below lists each scheme, the number of colors it produces, the rotation angles, and the design context where it works best.

SchemeColorsHue anglesBest for
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

How HSL Color Wheel Rotation Works

All palette generation in this tool relies on the HSL color model. Understanding its three axes helps you predict how a base color will transform under each scheme.

Hue (0-360)
The position on the color wheel in degrees. 0 is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta. Palette schemes rotate this value while keeping saturation and lightness fixed.
Saturation (0-100%)
How vivid the color is. 100% is fully saturated; 0% is a shade of gray. Palette schemes preserve the base saturation so all generated colors share the same intensity.
Lightness (0-100%)
How bright the color is. 0% is black, 50% is the pure hue, 100% is white. Monochromatic schemes vary lightness to create a tonal scale; all other schemes keep lightness constant.

Code Examples

Generate color palettes programmatically using HSL conversion and hue rotation.

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // β†’ "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # β†’ #f1ee63
print(triadic('#6366f1'))        # β†’ ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // β†’ #f1ee63
}

Frequently Asked Questions

What is the difference between complementary and split-complementary?
Complementary uses two colors exactly 180 degrees apart on the color wheel, producing maximum hue contrast. Split-complementary replaces the direct opposite with two colors at 150 and 210 degrees from the base, giving strong contrast with less visual tension. Split-complementary is easier to work with in UI design because neither accent color directly opposes the base.
How many colors should a UI palette have?
Most design systems use 3-5 core hues: a primary, a secondary, a neutral, and one or two accents. Each core hue then has a lightness scale (100 through 900). Start with a triadic or tetradic scheme for the core hues, then generate monochromatic scales for each.
Can I use these palettes with Tailwind CSS?
Yes. Copy the hex values and add them to the colors object in your tailwind.config.js or tailwind.config.ts file. For a monochromatic scale, map each shade to a numbered key (50, 100, 200, etc.) to match Tailwind's naming convention.
Why do some generated colors look dull or muddy?
If your base color has low saturation or extreme lightness (very close to 0% or 100%), the rotated hues will also appear muted. The generator preserves the base color's saturation and lightness values. For vivid palettes, choose a base with saturation above 50% and lightness between 30% and 70%.
What is the difference between HSL and HSV/HSB?
HSL and HSV both use hue as a circular axis, but they define brightness differently. In HSL, lightness 50% is the pure hue and 100% is white. In HSV (also called HSB), value 100% is the pure hue and there is no way to reach white without reducing saturation. Most palette generators use HSL because its lightness axis maps more intuitively to how we perceive color brightness.
How do color harmony schemes relate to accessibility?
Color harmony and WCAG contrast are separate concerns. A complementary pair has maximum hue contrast, but that does not guarantee sufficient luminance contrast for text readability. After generating a palette, test each foreground/background pair against WCAG AA (4.5:1 ratio for normal text). Colors with similar lightness will fail regardless of their hue relationship.
Is HSL the same as the CSS hsl() function?
Yes. The CSS hsl() function takes three arguments: hue in degrees (0-360), saturation as a percentage, and lightness as a percentage. CSS Color Level 4 also accepts a slash-separated alpha value: hsl(240 60% 50% / 0.8). The HSL model used by this generator matches the CSS specification exactly, so you can paste hue, saturation, and lightness values directly into your stylesheets.