Uwarp

Square tetrad

Rectangular tetrad

Tetrad scheme colors

Four hues at 90° intervals—the square tetrad on the color wheel.

rgb(51, 102, 153)

rgb(153, 51, 153)

rgb(153, 102, 51)

rgb(51, 153, 51)

Rectangular tetrad scheme colors

Four hues at 0°, 60°, 180°, and 240°—two complementary pairs in a rectangular layout.

rgb(51, 102, 153)

rgb(102, 51, 153)

rgb(153, 102, 51)

rgb(102, 153, 51)

Both tetrad rows keep your base saturation and lightness while rotating hue. Compare square (90° steps) and rectangular (60° and 180° offsets) sets from the same pick.

Help Us Improve

—

(—)

Tetrad color scheme online

Build a tetradic color scheme from any hex. See tetrad colors in square and rectangular sets—copy four harmonious HEX, RGB, and HSL values instantly.

What is a tetradic color scheme?

A tetradic color scheme (tetrad color scheme) picks four hues from the color wheel—often as two complementary pairs—for rich but balanced palettes. This page takes your base hex, rotates hue by fixed degrees while keeping saturation and lightness, and shows both a square tetrad (90° steps) and a rectangular tetrad (60° and 180° offsets) as live tetradic color scheme examples. Copy any swatch as HEX or read RGB below each color—no install required.

Tetradic scheme features

Tetradic color harmonies from one hex with instant preview, examples, and copy.

  • Base color picker

    Choose visually or paste a six-digit hex—all tetradic color swatches update instantly.

  • Square tetrad colors

    Four tetrad colors spaced 90° on the color wheel—balanced four-color palettes.

  • Rectangular tetrad colors

    Second four-color set with 60° and 180° offsets for complementary pairs.

  • HEX and RGB preview

    Each swatch shows hex and rgb() strings with one-click HEX copy.

  • HSL hue rotation

    Saturation and lightness stay tied to your base pick—only hue shifts per swatch.

  • No account

    Free, unlimited previews in modern browsers.

How to build a tetradic color scheme

Three steps from one hex to four tetrad colors.

  1. Set your base color

    Use the picker or paste a brand hex—the color wheel math runs from that anchor hue.

  2. Compare both tetrad sets

    Review square tetrad and rectangular tetrad rows—pick the harmony that fits your layout.

  3. Copy scheme hex codes

    Copy each color HEX into CSS variables, Figma styles, or your design tokens file.

Tips for tetrad palettes

Better results when using four-color harmonies.
  • 01

    Mute secondary swatches

    Full-strength tetrad colors can overwhelm—lower saturation on two of the four.

  • 02

    Study tetradic colors examples

    Compare square versus rectangular tetrad colors examples before you commit to a four-color palette.

  • 03

    Need triads instead

    Three-color harmonies live on /color-wheel with the ColorDesigner embed.

  • 04

    Check contrast

    Harmony does not guarantee readable text—validate pairs on /contrast-checker.

  • 05

    Paste from a picker

    Sample a photo accent on /image-color-picker, then build the tetrad here.

  • 06

    Tune value after

    Lighten or darken individual scheme hexes on /lighten-color or /darken-color.

When to use tetrad colors

Typical uses for four-color harmonies.

  • Brand palette expansion

    Turn one logo hex into a full tetrad color scheme for marketing and UI.

  • Dashboard themes

    Assign chart series, badges, and alerts from four related hues.

  • Illustration palettes

    Get vivid but structured sets without manual color wheel measuring.

  • Web component tokens

    Export four CSS custom properties from one base pick.

  • Presentation decks

    Build slide accent colors that stay harmonically linked.

  • Live tetradic examples

    Every base pick generates fresh tetradic color scheme examples in both square and rectangular rows.

Why use this tetrad tool

Benefits of instant four-color scheme generation.

  • Two schemes at once

    Square and rectangular tetrad outputs side by side—no second tool needed.

  • Private

    Colors never leave your device.

  • Predictable math

    Fixed hue offsets on the color wheel—same relationships every time.

  • Fast copy

    One-click HEX per swatch for quick handoff.

  • Free

    Unlimited previews and copies.

  • Honest scope

    Hex harmonies from one anchor—not photo palette extraction.

Technical details

How tetrad schemes are calculated here.
Color space
RGB ↔ HSL; hue rotated per swatch, saturation and lightness preserved.
Square tetrad
Hue offsets: 0°, 90°, 180°, 270°.
Rectangular tetrad
Hue offsets: 0°, 60°, 180°, 240°.
Input
Six-digit hex via picker or text field.
Processing
Client-side only—no network requests.
Browser support
Modern Chromium, Firefox, and Safari.

Sources & References

Authoritative references on tetradic color harmony, the color wheel, and the HSL color model this tetrad generator uses.
  • “A tetradic color scheme (also called double-complementary) uses four colors arranged into two complementary pairs, creating a rich palette with strong visual contrast.”
    — Wikipedia — Color theory

    Tetradic color harmony: This tool generates two tetrad variants from the base hue: a square tetrad (90° spacing: 0°, 90°, 180°, 270°) and a rectangular tetrad (0°, 60°, 180°, 240°), both preserving saturation and lightness. en.wikipedia.org/wiki/Color_theory

  • “The HSL model separates color into hue, saturation, and lightness, making it straightforward to generate harmonious color sets by rotating the hue while keeping other attributes fixed.”
    — Wikipedia — HSL and HSV

    HSL and HSV for hue-based color generation: Each scheme swatch is computed by converting the base hex to HSL, applying the fixed hue offset for the selected tetrad variant, then converting back to RGB for the output. en.wikipedia.org/wiki/HSL_and_HSV

  • “Complementary colors are pairs of colors opposite each other on the color wheel, approximately 180° apart. They produce maximum contrast and are a foundation of color harmony.”
    — Wikipedia — Complementary colors

    Complementary colors on the color wheel: Both the square and rectangular tetrad schemes include complementary pairs (180° apart). The rectangular variant adds a 60° offset for a less rigid but still balanced distribution. en.wikipedia.org/wiki/Complementary_colors

Frequently Asked Questions

Quick answers about this tool—open a question to read more.