What is a tetradic color scheme?

A tetradic (or rectangle) color scheme uses four colors arranged into two complementary pairs. In the equal-spacing variant, the four hues are exactly 90 degrees apart on the color wheel, creating a square pattern. This gives maximum color variety while maintaining balance.

How is tetradic different from square color harmony?

They are closely related. "Square" specifically means four hues at exactly 0°, 90°, 180°, and 270°. "Tetradic" is a broader term that includes rectangle harmonies where the two pairs are not necessarily 90° apart. This tool uses the strict 90° square variant.

How is the tetradic color calculated?

Your input hex is converted to HSL. The tool adds 90°, 180°, and 270° to the hue value (wrapping at 360°) while keeping saturation and lightness the same, then converts the results back to hex and RGB.

Why use a tetradic scheme instead of triadic?

Tetradic schemes provide four distinct hues instead of three, offering richer variety for complex designs. However, they can be harder to balance — it is best to let one color dominate and use the others as accents.

Can I use these colors directly in CSS?

Yes. Click any hex or RGB value to copy it instantly. You can paste it into CSS, Figma, Sketch, Adobe XD, or any design tool.

What if I enter a grayscale color?

Grayscale colors (saturation = 0%) have no meaningful hue, so all four tetradic colors will appear identical. Tetradic harmony works best with colors that have some saturation.

Tetradic Color Finder

Name: Tetradic Color Finder
Availability: InStock
Author: Nham Vu

Enter any hex color to instantly find all four tetradic harmony colors — hues spaced 90 degrees apart on the color wheel.

Input Color

Hex Color

Your Color

Hue Wheel

Tetradic Palette

Tetradic harmony places four colors at 90-degree intervals on the HSL color wheel, forming two complementary pairs. For best results, choose one color as the dominant tone and use the other three as accents to avoid a cluttered palette.

Copied!

Summary

Enter any hex color to instantly find all four tetradic harmony colors — hues spaced 90 degrees apart on the color wheel.

How it works

Enter or paste a hex color code into the input field.
The tool converts your hex to HSL (Hue, Saturation, Lightness).
It adds 90°, 180°, and 270° to the hue, wrapping around 360° as needed.
The three additional colors are converted back to hex and RGB.
All four swatches display with copyable hex and RGB values.
A color wheel diagram shows where each color sits on the hue circle.

Use cases

Generate a four-color tetradic palette for a brand identity or logo.
Find all four complementary accent colors for a primary UI color.
Create bold, multi-hue color schemes for website or app design.
Explore tetradic harmony concepts interactively.
Pick four balanced colors for data visualization charts.
Verify tetradic relationships before applying colors in CSS or Figma.
Build vibrant seasonal marketing palettes with full color variety.

Frequently Asked Questions

Related tools

Square Color Scheme Triadic Color Finder Color Contrast Checker

Last updated: 2026-05-28 · Reviewed by Nham Vu