Color Palette Generator
Generate complementary, analogous, triadic, and split-complementary palettes from any base color.
#3b82f6#f6af3b--base: #3b82f6;
--accent-1: #f6af3b;About This Tool
Pick a base color and pull back a set of harmony palettes built from it. Enter a hex value or use the picker, and you get complementary, analogous, triadic, and split-complementary swatches side by side with their hex codes.
Use it to bootstrap a brand palette, fix an off-balance UI, or test how a single accent color expands into a full system. Click any swatch to copy the hex to your clipboard. Drop the palette into Figma, Tailwind config, or a CSS variables file from there.
The math runs locally — hue rotations on the HSL wheel — so you can iterate quickly without waiting on a network round trip.
The math under the hood is plain HSL hue rotation. The input hex parses to RGB, converts to HSL, then the tool rotates the H component by fixed offsets to produce each harmony: complementary is +180°, analogous is ±30°, triadic is ±120°, split-complementary is +150° and +210°, tetradic is +90/+180/+270°. Saturation and lightness pass through unchanged. The result converts back to RGB and renders as a swatch with its hex shown below. No network calls, no canvas trickery — just math on six numbers.
Worked example. Enter #2563EB (a saturated indigo). HSL is roughly H=224°, S=83%, L=53%. Complementary lands at H=44°, which is a warm amber-orange (#EBA225-ish). Triadic gives you H=104° (a vivid green) and H=344° (a hot pink). Split-complementary returns H=14° (red-orange) and H=74° (yellow-green). Drop those five hex values into a CSS file and the relationships hold.
The known weakness: HSL is not perceptually uniform. A 60° hue shift at high saturation can produce two colors that read as different brightnesses to the eye, even though their HSL L value is identical. Yellow at L=50 looks much brighter than blue at L=50. If you need perceptually consistent palettes — for data visualization, accessibility-sensitive UI, or tightly designed brand systems — convert through OKLCH or Lab and rotate hue there. The tool sticks with HSL because it matches what most CSS-aware designers reason about, and because OKLCH support in design software was still uneven through 2025.
Adjacent ideas worth knowing: CIELAB Delta-E for measuring perceived color distance, APCA for next-generation contrast scoring, and gamut clipping when an OKLCH rotation lands outside the sRGB cube. None of those are in scope here, but if your palette ever needs to survive printing or HDR display, those are the rabbit holes.
The about text and FAQ on this page were drafted with AI assistance and reviewed by a member of the Coherence Daddy team before publishing. See our Content Policy for editorial standards.