A tetradic color scheme uses four colors arranged as two complementary pairs on the color wheel. The four colors form either a square (when evenly spaced at 90-degree intervals) or a rectangle (when one pair sits closer together than the other). Tetradic palettes are the richest of all the standard color schemes. They give you more variety than triadic without losing the geometric balance that keeps the palette feeling intentional.
The catch is balance. Four saturated colors competing for attention can read chaotic, so working tetradic palettes almost always pick one color to dominate and treat the other three as supporting roles. Designers reach for tetradic schemes when they need flexibility: a primary brand color plus secondary, accent, and alert states all built on a coherent geometry. To experiment with any tetradic combination, try the color palette generator set to Tetradic mode, or drop four hex codes into the color mixer to see them mixed.
The Quick Version
A tetradic color scheme uses four colors arranged as two complementary pairs on the color wheel. The four colors form a square (evenly spaced at 90-degree intervals) or a rectangle (one pair closer together than the other). Examples: red, yellow-green, cyan, and violet form a square tetrad; red, orange, blue, and cyan form a warm-cool rectangle. Pick one color to dominate (about 60 percent of your design), use the other three as supporting roles, and anchor the palette with a neutral background. For a softer take, push one or two colors toward pastels or muted tones.
What Is a Tetradic Color Scheme?
A tetradic color scheme is built from four colors arranged as two pairs of complementary colors on the color wheel. Because each color has a partner directly opposite it, tetradic palettes have built-in contrast and warm-cool tension. The four-color geometry gives you more flexibility than a triadic palette without losing the balance that comes from using complementary pairs.
Tetradic palettes show up everywhere in tech branding. Google’s red, yellow, green, and blue logo is a near-perfect primary square tetrad. So is Microsoft’s. eBay’s logo uses the same four hues. Slack’s identity, while looser, sits in tetradic territory. The reason these brands converge on tetradic geometry is that four colors give you enough variety to express different product surfaces (primary, accent, alert, success) while still feeling unified.
Square vs. Rectangular Tetradic Schemes
There are two flavors of tetradic palette, and they behave differently. Knowing the difference matters because it changes which colors you reach for and how easy the palette is to balance.
Square Tetrad
Four colors at exactly 90-degree intervals on the color wheel. All four colors are equally spaced, which gives the palette a perfectly symmetric geometry. Square tetrads are bold and balanced but can feel busy because no color is naturally subordinate to the others. The Primary Square (red, yellow-green, cyan, violet) is the canonical example.
Rectangular Tetrad
Two pairs of complementary colors where one pair sits closer together on the wheel than the other. Rectangular tetrads are inherently easier to balance because the asymmetric geometry means two colors naturally feel like the lead pair while the other two play supporting roles. Most working brand systems and editorial palettes are rectangular rather than square.
Which one to use
Square tetrad if you want maximum contrast and energy (kid brands, sports, gaming). Rectangular tetrad if you want sophistication and flexibility (editorial, hospitality, premium brands). When in doubt, rectangular is more forgiving.
How to Find Tetradic Colors on the Color Wheel
Three ways, fastest first.
Use the color wheel tool
Open the wheel on ColorKit’s color wheel page and switch the scheme dropdown to Tetradic. The wheel will draw the four-point shape from your starting color to its three partners.
Find a square tetrad by hand
Pick a starting color. Count three positions clockwise on a 12-segment wheel. That’s your second color (90 degrees away). Count three more positions for your third (180 degrees, the direct complement of your first), then three more for your fourth (270 degrees, the direct complement of your second). The four points form a square.
Find a rectangular tetrad by hand
Pick a starting color and its direct complement (the color directly across the wheel). Then pick a second color that isn’t on the same axis as the first pair, and add its complement. The four colors form a rectangle. Adjust how far apart the two pairs sit to control how asymmetric the rectangle feels.
Use HSL math
For a square tetrad, lock saturation and lightness, then add 90, 180, and 270 to your base hue. For a rectangular tetrad, pick any two colors and add 180 to each of their hue values to find their complements. That’s the math the wheel is doing visually.
How to Build a Tetradic Palette (Step-by-Step)
- Pick your dominant color. This is the hue that will take up roughly 60 percent of your design. Usually a brand color or the most important color in your composition.
- Decide square or rectangle. Square if you want maximum contrast and equal weighting. Rectangle if you want flexibility and a clear lead pair.
- Find the four colors. Use the wheel tool or calculate by hand. For square: 90 / 180 / 270 degrees from base. For rectangle: complement of base plus another color and its complement.
- Assign roles. One dominant color (60 percent), one supporting (25 percent), and two accents (10 and 5 percent). Without clear hierarchy, four equal colors will feel chaotic.
- Adjust saturation aggressively. Pure tetradic palettes at full saturation almost always feel too busy. Mute two or three of the colors with tints, shades, or reduced saturation so only the dominant stays vivid.
- Anchor with a neutral. Every working tetradic system in the wild includes a white, off-white, gray, or near-black background. The neutral is what makes the four colors feel intentional instead of jumbled.
- Test against typography and imagery. Tetradic palettes can make text hard to read. Reserve the palette for fills, headers, and accents, and use neutrals for body copy.
To preview a tetradic mix in real time, drop four hex codes into the color mixer, or use the color palette generator with the Generate Method set to Tetradic for live suggestions from any starting color.
The Three Standard Square Tetrads
On a 12-segment color wheel there are three rotational variants of the square tetrad. Each one shifts 30 degrees from the next. Hex codes below are the canonical starting points; soften saturation or adjust lightness for production use.
| Square | Color 1 | Color 2 | Color 3 | Color 4 | Combination |
|---|---|---|---|---|---|
| Square Tetrad I | #FF0000 | #9ACD32 | #00CED1 | #8A2BE2 | Red + Chartreuse + Cyan + Violet |
| Square Tetrad II | #FFBF00 | #008080 | #C71585 | #4B0082 | Yellow-Orange + Teal + Magenta + Indigo |
| Square Tetrad III | #FFA500 | #008000 | #FF1493 | #0000FF | Orange + Green + Pink + Blue |
Ten Example Tetradic Palettes
Ten ready-to-use tetradic palettes spanning bold, pastel, earthy, and contemporary moods. Click any palette to open its full color reference page.
Primary Square · Red, Chartreuse, Cyan, Violet
The textbook square tetrad. Four colors at perfect 90-degree spacing. Bold and kid-friendly. Used in toy brands, sports identities, and children’s TV.
Pastel Square · Soft Pink, Mint, Sky, Lavender
The square tetrad pushed entirely into pastels. Soft and balanced. Common in spring branding, baby products, and beauty packaging.
Warm-Cool Rectangle · Red, Orange, Blue, Cyan
A rectangular tetrad pairing two warms against two cools. The classic sunset-against-sky effect. Used in travel, motion design, and energetic branding.
Tropical Tetrad · Turquoise, Gold, Magenta, Lime
High-energy summer palette. Saturated and joyful. Works for festivals, swimwear, music branding, and tropical campaigns.
Editorial Bold · Mustard, Plum, Teal, Coral
Magazine-shoot energy with confident depth. Used in fashion editorials, lifestyle photography, and modern hospitality.
Earthy Rectangle · Terracotta, Olive, Slate Blue, Cream
Grounded and contemporary. Used in interior design, wellness brands, and minimalist lifestyle photography.
Tech Brand Tetrad · Royal Purple, Cyan, Hot Pink, Lime Yellow
Sharp and electric. The four-color palette common in modern SaaS, gaming, and AI brands. Each color makes the others pop.
Vintage Heritage · Burgundy, Olive, Mustard, Teal
Heritage editorial. Slightly aged, slightly bookish. Works for vintage brands, archival projects, and slow-living lifestyle.
Sunset Tetrad · Coral, Mustard, Teal, Navy
Hospitality and golden-hour photography. Warm forward with a cool anchor. Used in boutique hotels, magazines, and elevated travel.
Modern Minimal · Slate Blue, Cream, Coral, Sage
Quiet but warm. The four-color palette that runs through a lot of contemporary design portfolios and modern home brands.
To build your own, use the color palette generator with the Tetradic preset, or experiment in the color mixer.
Quick Reference: Tetradic Palette Cheat Sheet
Every palette above in one extractable table. Save it, copy it, paste it wherever you need it.
| Palette | Hex Combination | Use Case |
|---|---|---|
| Primary Square | #FF0000 + #9ACD32 + #00CED1 + #8A2BE2 | Bold, kid-friendly, sports |
| Pastel Square | #FFB3BA + #DCEDC1 + #B5EAEA + #C3AED6 | Spring, baby, beauty |
| Warm-Cool Rectangle | #FF0000 + #FFA500 + #0000FF + #00FFFF | Travel, motion, energetic |
| Tropical Tetrad | #40E0D0 + #FFD700 + #FF00FF + #ADFF2F | Summer, festivals, swimwear |
| Editorial Bold | #D4A017 + #6A1B4D + #2F7A78 + #FF7F50 | Fashion editorials, lifestyle |
| Earthy Rectangle | #C47457 + #6B8E23 + #6A5ACD + #FAEBD7 | Interior, wellness, minimal |
| Tech Brand | #6C5CE7 + #00D4FF + #FF1493 + #D4FF00 | SaaS, gaming, AI brands |
| Vintage Heritage | #722F37 + #6B8E23 + #D4A017 + #2F7A78 | Heritage, archival, slow |
| Sunset Tetrad | #FF7F50 + #D4A017 + #2F7A78 + #1B264F | Hospitality, golden hour |
| Modern Minimal | #4A6FA5 + #F5E6CC + #FF6F61 + #87AE73 | Contemporary portfolios |
Tetradic Color Schemes in the Wild
Tetradic palettes are the unofficial standard of modern tech branding. Once you know the geometry, you’ll see four-color identities everywhere:
- Google. Red, yellow, green, blue. A near-perfect primary square tetrad. The same four colors have anchored the logo since 1999, with small saturation and weight tweaks over the years.
- Microsoft. Red, green, blue, yellow. The four squares of the Windows logo are a direct primary square. The choice predates Google but follows the same geometric logic.
- eBay. Red, blue, yellow, green. Square tetrad in the wordmark since the 2012 rebrand. The shift away from the original four-color italic logo to the current cleaner version kept the tetradic relationship intact.
- Slack. Green, blue, yellow, magenta-pink. Looser than square but solidly in rectangular tetradic territory. The 2019 rebrand consolidated 11 colors down to these four for exactly this reason: tetradic gives you enough variety for product surfaces without the visual mess.
- Power Rangers. Red, blue, yellow, black (with pink as a fifth). The original Mighty Morphin Power Rangers used a primary tetrad with black as the dominant anchor. Children’s TV reaches for tetradic because four colors give you distinct character coding while staying balanced.
- Olympic rings. Five colors total (blue, yellow, black, green, red), but the four chromatic colors sit in tetradic territory. The colors were chosen because at least one appears in every national flag in 1913.
How to Use Tetradic Colors in Design
Pick one dominant color
The biggest tetradic mistake is treating all four colors as equals. Four colors at equal weight read as chaotic. Pick a dominant color (60 percent of the design), a secondary (25 percent), and two accents (10 percent and 5 percent). The 60-25-10-5 split is the most reliable starting point.
Mute two or three of the four
Pure tetradic palettes at full saturation almost always feel busy. Keep the dominant color saturated, and pull the other three back with tints, shades, or reduced saturation. The Pastel Square palette above is the same Primary Square pushed entirely into tints. Same geometry, completely different energy.
Use rectangles, not squares, for production
Square tetrads are mathematically pure but harder to make work in practice. Rectangular tetrads, with one pair of complements closer together, are inherently easier to balance because the asymmetric geometry creates a natural lead pair. Most working brand systems are rectangular.
Anchor with neutrals
Every successful tetradic system pairs the four colors with white, off-white, gray, or near-black. The neutral is what gives the palette breathing room. Without it, four colors feel cramped no matter how well you’ve balanced them.
Build with surfaces, not just hues
Tetradic systems work best when you map each color to a surface or function rather than treating them as interchangeable. Dominant: brand color. Secondary: section backgrounds. First accent: CTAs and important affordances. Second accent: alerts, status indicators, or one-off highlights. Discipline at the role level is what makes the four colors feel cohesive.
Why Your Tetradic Palette Goes Wrong
Tetradic palettes are the most failure-prone of the standard schemes because four colors compete for attention. The five most common problems:
- All four colors at equal weight. Reads as chaotic. Pick one dominant and assign clear hierarchy (60-25-10-5).
- All four colors at full saturation. Looks like a circus poster. Mute two or three with tints, shades, or reduced saturation.
- Square instead of rectangle. Square tetrads are mathematically pure but hard to balance. Switch to a rectangle (with one pair of complements closer together) for an easier-to-work-with starting point.
- Missing the neutral. Four colors floating without a neutral background or text color feel cramped. White, off-white, gray, or near-black is required.
- Body text in palette colors. Tetradic colors at full saturation almost never pass WCAG contrast for body copy. Use the palette for fills and headers; use neutrals for text.
In digital design, square tetradic colors sit at HSL hue values 0°, 90°, 180°, and 270°. Rectangular tetrads use any base hue plus its complement at +180°, then a second hue and its complement. Drop your starting hex into the color mixer to see how four colors blend, or use the color wheel to find the geometry visually.
Tetradic vs. Other Color Schemes
How tetradic compares to the other classic schemes:
- vs. Triadic: Triadic uses three colors at 120 degrees apart. Tetradic uses four colors at 90-degree spacing or arranged as two complementary pairs. More variety than triadic, harder to balance.
- vs. Complementary: Complementary uses two colors directly opposite each other (max contrast). Tetradic stacks two complementary pairs. Richer, more flexible, but needs more discipline.
- vs. Split-Complementary: Split-comp uses a base plus the two colors next to its complement. Tetradic adds a fourth color (the complement of one of those split partners), forming a rectangle. One step richer than split-comp.
- vs. Analogous: Analogous uses three colors next to each other on the wheel (smooth, calm). Tetradic spreads four colors evenly. Use analogous for unity, tetradic for variety.
- vs. Monochromatic: Monochromatic uses one hue varied across tints, shades, and tones. Tetradic uses four distinct hues. Mono is the simplest scheme; tetradic is the most complex.
Generate Tetradic Palettes with ColorKit
- Open the color palette generator.
- Click the gear icon to open palette settings and set Generate Method to Tetradic.
- Drop in your base color and click Generate Palette. ColorKit returns the three tetradic partners for any starting hex.
- Adjust which colors stay saturated and which get muted. Drag colors to reorder, use the lock icon to keep favorites while regenerating, or delete the ones you don’t want.
- Test how the four colors interact by handing them off to the color mixer for live blending.
Frequently Asked Questions
What is a tetradic color scheme?
A tetradic color scheme uses four colors arranged as two pairs of complementary colors on the color wheel. The four colors form either a square (when evenly spaced at 90-degree intervals) or a rectangle (when one pair sits closer together than the other). Tetradic palettes are the most flexible of the standard color schemes.
What is the difference between a tetrad and tetradic color scheme?
Same thing, different names. “Tetrad” is the noun (a group of four); “tetradic” is the adjective (relating to a group of four). Designers and color theorists use both interchangeably. The page is titled “Tetrad Color Scheme” for SEO, but “tetradic” is the more common term in modern usage.
How do I build a tetrad from a base color?
For a square tetrad: lock saturation and lightness, then add 90, 180, and 270 to your base hue. For a rectangular tetrad: take your base color and its direct complement (add 180 to the hue), then pick a second color anywhere else on the wheel and add its complement. The four colors form a rectangle.
When should I use a tetrad?
Use tetradic palettes when you need more flexibility than a triadic palette but want to keep the geometric balance. Tetradic works well for brand systems that need multiple distinct surfaces (primary, secondary, accent, alert), tech products with several feature areas, and editorial layouts that want variety without losing coherence. Avoid tetradic for designs that need calm or unity. Use analogous or monochromatic instead.
What is the difference between tetrad and triadic schemes?
Triadic uses three colors evenly spaced at 120-degree intervals on the wheel, forming a triangle. Tetradic uses four colors arranged as two complementary pairs, forming a square or rectangle. Triadic has built-in balance because three equally-spaced colors don’t compete for dominance the way four do; tetradic gives you more variety but requires more discipline to balance.
Are square and rectangular tetrads the same?
No. Both use four colors arranged as two complementary pairs, but the geometry differs. Square tetrads have all four colors at exactly 90-degree intervals (perfectly symmetric). Rectangular tetrads have one pair closer together than the other (asymmetric). Square is more theoretical and harder to balance; rectangular is more flexible and shows up more often in working brand systems.
Are there standard tetrad examples I can try?
Yes. The three canonical square tetrads on a 12-segment wheel are: red + chartreuse + cyan + violet; yellow-orange + teal + magenta + indigo; and orange + green + pink + blue. Rectangular tetrads are infinitely variable. See the ten example palettes above for ready-to-use combinations across bold, pastel, earthy, and contemporary moods.
Why do so many tech logos use tetradic palettes?
Tech brands need to express multiple distinct surfaces (product, marketing, status indicators, alerts) and four colors give them just enough variety while still feeling unified. Google, Microsoft, eBay, and Slack all use near-tetradic geometries for exactly this reason. The visual logic is also extremely scalable: four colors translate cleanly into product features, OS folders, and even color-coded teams within the company.
Putting It Into Practice
Pick a base color you want to build around. Open it on the color wheel, switch the dropdown to Tetradic, and see the three partners that come back. Decide square or rectangle based on whether you want maximum contrast or more flexibility. Pull the four hex codes into the palette generator or the color mixer and start assigning roles: dominant, secondary, two accents.
When tetradic feels too complex, the closest neighbors are triadic (one fewer color, easier to balance) or split-complementary (three colors with built-in contrast and a clear focal pair).