Uwarp
Color
Tetrad scheme colors

rgb(51, 102, 153)

rgb(153, 51, 153)

rgb(153, 102, 51)

rgb(51, 153, 51)

Rectangular tetrad scheme colors

rgb(51, 102, 153)

rgb(102, 51, 153)

rgb(153, 102, 51)

rgb(102, 153, 51)

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.

  1. Base color picker: Choose visually or paste a six-digit hex—all tetradic color swatches update instantly.
  2. Square tetrad colors: Four tetrad colors spaced 90° on the color wheel—balanced four-color palettes.
  3. Rectangular tetrad colors: Second four-color set with 60° and 180° offsets for complementary pairs.
  4. HEX and RGB preview: Each swatch shows hex and rgb() strings with one-click HEX copy.
  5. HSL hue rotation: Saturation and lightness stay tied to your base pick—only hue shifts per swatch.
  6. 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.

  1. Mute secondary swatches: Full-strength tetrad colors can overwhelm—lower saturation on two of the four.
  2. Study tetradic colors examples: Compare square versus rectangular tetrad colors examples before you commit to a four-color palette.
  3. Need triads instead: Three-color harmonies live on /color-wheel with the ColorDesigner embed.
  4. Check contrast: Harmony does not guarantee readable text—validate pairs on /contrast-checker.
  5. Paste from a picker: Sample a photo accent on /image-color-picker, then build the tetrad here.
  6. 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.

  1. Brand palette expansion: Turn one logo hex into a full tetrad color scheme for marketing and UI.
  2. Dashboard themes: Assign chart series, badges, and alerts from four related hues.
  3. Illustration palettes: Get vivid but structured sets without manual color wheel measuring.
  4. Web component tokens: Export four CSS custom properties from one base pick.
  5. Presentation decks: Build slide accent colors that stay harmonically linked.
  6. 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.

  1. Two schemes at once: Square and rectangular tetrad outputs side by side—no second tool needed.
  2. Private: Colors never leave your device.
  3. Predictable math: Fixed hue offsets on the color wheel—same relationships every time.
  4. Fast copy: One-click HEX per swatch for quick handoff.
  5. Free: Unlimited previews and copies.
  6. Honest scope: Hex harmonies from one anchor—not photo palette extraction.

Technical details

How tetrad schemes are calculated here.

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

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Color Tools.

View all Color Tools