Skip to main content
Back to Colors generators

Colors

Tetradic Color Scheme Generator

Used by developers, writers, and creators worldwide.

A tetradic color scheme generator builds four-color palettes by placing hues exactly 90 degrees apart on the color wheel, forming two complementary pairs in a rectangle arrangement. That geometry gives you more tonal variety than triadic or analogous schemes, but it demands deliberate hierarchy — one dominant hue anchoring the composition while the other three serve as supporting, accent, and background roles. This generator lets you control two variables: base hue (0–360, or random) and saturation. Saturation is the most consequential dial. Push it above 70% for vivid digital palettes; pull it to 45–55% for muted, editorial tones. Setting a specific base hue locks your starting point; leaving it blank surfaces combinations you wouldn't have considered.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Enter a specific hue value (0–360) in the Base Hue field, or leave it blank to generate a random starting color.
  2. Adjust the Saturation slider to set how vivid or muted the palette should be — try 65% as a starting point.
  3. Click Generate to produce your four tetradic hues spaced 90 degrees apart on the color wheel.
  4. Review the output colors and copy the hex codes you want to use in your design tool or stylesheet.
  5. If the palette feels off, change only the saturation first before re-rolling the base hue — small shifts often fix imbalance.

Use Cases

  • •Assigning distinct color roles to action, warning, passive, and disabled states in a game UI system
  • •Building a four-category data dashboard in Figma where each series needs a visually separate identity
  • •Generating packaging color options for a product line with four distinct SKUs on the same retail shelf
  • •Selecting wall, trim, furniture, and accent colors for an interior design mood board in a client presentation
  • •Creating a motion graphics color system for a YouTube series where each episode segment has its own tone

Tips

  • →Lock a base hue that matches your brand's primary color, then use saturation to tune the palette's energy level.
  • →Pair a high-saturation dominant hue with the other three at 15–20% lower saturation to create hierarchy without losing coherence.
  • →Try hue values in multiples of 30 (0, 30, 60, 90…) for palettes that align cleanly with common color theory references.
  • →For dark-mode interfaces, generate at 65% saturation then manually reduce lightness on two of the four colors to create depth.
  • →Run three or four random generations, then compare them side by side — tetradic variety means adjacent runs can look completely different.
  • →Avoid using all four hues at full saturation on small UI elements; reserve vibrant tetradic colors for components above roughly 200px wide.

FAQ

how is a tetradic color scheme different from triadic

A triadic scheme spaces three hues 120 degrees apart; a tetradic scheme spaces four hues 90 degrees apart, forming a rectangle instead of a triangle on the color wheel. The extra hue adds more range and two full complementary pairs, but also means one additional color competing for attention — so hierarchy matters even more.

how do I keep a tetradic palette from looking too busy or chaotic

Assign one hue to roughly 60–70% of your design, a second to 20–30%, and treat the remaining two as true accents used sparingly. Dropping saturation to the 45–55% range also helps — colors stay distinct without each one demanding equal attention from the viewer.

what base hue values produce the most balanced tetradic palettes

Starting hues in the 20–60 range (orange to yellow) or 200–260 range (blue to cyan) naturally split into one warm pair and one cool pair, which gives you built-in temperature contrast. Anchoring near pure green (hue 120) can result in four colors that feel closer in temperature and less dynamic.