Tetradic (Square) Harmony Calculator
Drag the handle around the wheel or use sliders below
Generated Harmonies (4 Colors)
Primary Base
#2463EBoklch(0.546 0.215 262.7)
Secondary
#EB24C6oklch(0.649 0.268 337.8)
Complementary
#EBAC24oklch(0.784 0.154 80.4)
Accent
#24EB48oklch(0.820 0.251 144.8)
Live UI Component Preview
Apex Analytics
Team Dashboard
$84,290
14,820
Optimal
Interactive Button & State Styles
Verify clickability, state contrasts, and visual weight across primary and secondary controls.
WCAG 2.1 Contrast Matrix
Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).
| Color Role | Hex | On Pure White (#FFF) | On Dark Obsidian (#0B0F19) | Recommended Usage |
|---|---|---|---|---|
Primary Base | #2463EB | 5.17:1(AA) | 3.70:1(AA (large text)) | Best on Light UI / Backgrounds |
Secondary | #EB24C6 | 3.75:1(AA (large text)) | 5.11:1(AA) | Best on Dark UI / Buttons |
Complementary | #EBAC24 | 2.01:1(Fail) | 9.54:1(AAA) | Best on Dark UI / Buttons |
Accent | #24EB48 | 1.61:1(Fail) | 11.90:1(AAA) | Best on Dark UI / Buttons |
50–950 Tailwind Shade Ramp
Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.
Ready-to-Use Code Snippets
// tailwind.config.js / CSS @theme
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#F5F6FA',
100: '#E7EBF3',
200: '#B4CAF8',
300: '#86A9F4',
400: '#4E81EF',
500: '#2463EB',
600: '#124BC4',
700: '#0F3C9F',
800: '#0B2C75',
900: '#021C55',
950: '#011132',
},
secondary: '#EB24C6',
accent: '#EBAC24',
}
}
}
};Understanding Tetradic (Square) Harmony
Tetradic schemes are rich and vibrant because they involve two pairs of complementary colors. In user interface design, tetradic palettes give product teams enough distinct semantic colors to handle full status systems (Info, Success, Warning, Danger) while ensuring they belong to an interconnected geometric system.
✓Ideal Use Cases in Web & App UI
- •Data visualization charts, multi-line graphs, and complex metric breakdowns.
- •Design systems supporting multi-role team permissions and colorful status tags.
- •Children's educational interfaces and vibrant digital marketplaces.
✗Common Design Mistakes to Avoid
- •Applying all four colors across a single view without hierarchy.
- •Using warm and cool colors indiscriminately without establishing light/dark dominance.
How to Structure Tetradic (Square) Harmony in Production Code
Follow this token role hierarchy when integrating tetradic (square) harmony spokes into your design system tokens:
Base Surface & Canvas
Use shade 50 (or 950 in dark mode) as your primary canvas background tint to establish emotional mood without compromising readability.
Borders & Secondary Pills
Apply secondary harmony spokes to component card borders, tag badges, sidebar active indicators, and chart telemetry tracks.
High-Impact Action & CTA
Reserve your sharpest harmony spoke for conversion buttons, primary checkout buttons, and interactive focus rings.
Other Color Harmony Calculators
Complementary Harmony
Two colors positioned directly opposite on the wheel (180° apart).
Triadic Harmony
Three colors evenly spaced around the color wheel (120° apart).
Split-Complementary Harmony
A base color paired with the two colors adjacent to its complement (150° and 210°).
Analogous Harmony
Three colors sitting side-by-side on the wheel (typically 30° apart).
Monochromatic Harmony
A single hue explored across varying saturation, tint, and shade levels.