Color Palette Generator

About the Color Palette Generator

The Color Palette Generator takes a single base color and produces a harmonious palette using five classic color-theory relationships: complementary, analogous, triadic, tetradic (also called rectangular or double-complementary), split-complementary, and monochromatic. Each scheme is rooted in the color wheel geometry taught in design schools since the Bauhaus era and codified by Johannes Itten and Josef Albers.

Complementary schemes use two colors directly opposite on the wheel (180° apart) and produce maximum visual tension — ideal for calls-to-action where one element must pop. Analogous schemes use three adjacent hues (±30°) for a serene, naturally pleasing feel that works well for backgrounds and brand identities. Triadic schemes place three colors 120° apart for a vibrant, balanced look popular in children's media and playful interfaces. Tetradic uses four colors at 90° intervals for a rich, complex palette that requires careful management. Split-complementary softens the harshness of pure complementary by using the two hues adjacent to the opposite color. Monochromatic varies lightness while holding hue and saturation constant, producing the most subtle and professional-looking schemes.

The generator computes all schemes in HSL space because hue is a continuous variable there and rotations map directly to perceptual color shifts. Each output palette displays as a horizontal strip of swatches with the HEX code printed inside each, plus a list with copy buttons so you can grab any color for your CSS variables, Tailwind config, or Figma style guide.

How It Works

The generator first converts the base HEX color to HSL because the HSL color space makes color-wheel operations simple: hue is an angle (0-360°), saturation is a percentage, and lightness is a percentage. Rotating around the color wheel is just hue addition modulo 360.

For each scheme type, the generator applies a specific hue rotation while preserving saturation and lightness:

• Complementary: [H, H+180]
• Analogous: [H-30, H, H+30]
• Triadic: [H, H+120, H+240]
• Tetradic: [H, H+90, H+180, H+270]
• Split-Complementary: [H, H+150, H+210]
• Monochromatic: [L-0.30, L-0.15, L, L+0.15, L+0.30] (held within 0.1-0.95)

Each HSL triple is then converted back to HEX using the standard hsl2rgb formula: chroma C = (1 - |2L - 1|) × S, intermediate X = C × (1 - |(H/60) mod 2 - 1|), and match m = L - C/2. The hue determines which of six piecewise ranges assigns the chroma and intermediate values to red, green, and blue.

The output also computes a perceived brightness for each swatch using the simple Rec. 601 luminance formula 0.299R + 0.587G + 0.114B to decide whether to print the HEX label in white or black inside the swatch. This is a quick heuristic, not a WCAG-compliant contrast check — for accessible text colors use the Contrast Checker on each palette pairing.

Worked Examples

Take the default #0A4F3A forest green and generate a complementary palette. The result is two colors: #0A4F3A and #4F0A1F (a deep magenta-red). The complementary pairing is high-contrast and works well for a call-to-action button: green background, magenta CTA.

Switch to triadic and you get three colors 120° apart: the forest green, a vivid red-violet around #4F0A3A, and a blue-violet around #3A0A4F. These three together form a balanced, jewel-toned palette useful for a festive or playful brand. Tone down saturation for a more sophisticated feel.

For a more subdued result, choose monochromatic. The generator produces a five-step ramp from near-black forest green at lightness 0.025 (effectively #01140D) through the original and up to a pale mint at lightness 0.875 (#9FE5C6). This is exactly the kind of palette you'd build for a design system: a 50-900 ramp where the original sits at the 700 level.

Split-complementary softens the harsh complementary contrast by using two hues 150° and 210° from the base. For #0A4F3A this yields a magenta and an orange-yellow accent — more nuanced than pure complementary while preserving the energetic feel.

When to Use This Tool

• Building a 50-900 color ramp for a design system based on a single brand color (use the monochromatic scheme).
• Choosing an accent color for a call-to-action button that pops against the brand color (use complementary).
• Designing a marketing landing page with a triadic palette for a vibrant, energetic feel.
• Selecting analogous background, surface, and accent shades for a calm, cohesive UI.
• Generating a starter palette for a Figma file before refining it manually in the Figma color styles panel.
• Teaching color theory: demonstrating how the same base color produces wildly different palettes under different harmony schemes.
• Sketching a brand identity for a startup before investing in a custom illustration system.

Limitations & Disclaimer

The generator uses HSL color-space rotations, which are mathematically simple but not perceptually uniform — two colors with the same saturation and lightness may not appear equally vivid. For perceptually uniform palettes, use the OKLCH or LCH color spaces (not implemented here). Saturation and lightness are held constant within non-monochromatic schemes, which may produce overly saturated or overly dark results for some base colors. The output does not check WCAG contrast; you must verify accessibility separately. The copy buttons use the Clipboard API, which requires a secure (HTTPS) context and may not work in older browsers. See our disclaimer for full terms.

Frequently Asked Questions

Last updated: July 21, 2026  ·  Author: HT99 Tools Editorial Team  ·  Reviewed by: HT99 Tools Editorial Team