Tetradic Color Wheel
Tetradic schemes combine two complementary pairs into a rectangle on the wheel — the richest harmony rule, best with one dominant hue.
Four hues in a rectangle — rich, complex schemes.
Color tools
More free color tools
Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.
- Color Palette Generator
Generate harmonious palettes from one color — complementary, triadic, analogous, and more. CMYK values and print gamut warnings included.
- CSS Gradient Generator
Build linear, radial, and conic CSS gradients with live preview. Copy production-ready code instantly.
- WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA. Includes palette matrix mode and auto-fix suggestions.
- Tint & Shade Generator
Turn one brand color into a Tailwind-compatible 50–950 scale with WCAG contrast badges on every swatch.
- Palette from Image
Extract dominant colors from any photo — runs entirely in your browser. Send colors to converters or palette tools.
- Color Blindness Simulator
Preview palettes as seen with protanopia, deuteranopia, or tritanopia. Essential for accessible design.
- Print Gamut Checker
See exactly how a screen color shifts when printed in CMYK. Side-by-side press preview with shift warnings.
- Compare Colors (Delta E)
Measure the perceptual difference between two colors with ΔE2000 — plus HEX, RGB, CMYK, and HSL values for both.
- Random Color Generator
Generate a random HEX color, a lockable five-color palette, or a two-color CSS linear gradient. Copy HEX, RGB, HSL, and CMYK.
How this harmony sits on the wheel
A tetrad is four hues arranged as a rectangle: two complementary pairs. Dragging the base hue rotates the rectangle. You get more colors than a triad, which is useful for an illustration system and easy to overuse in a UI.
Four saturated hues at equal weight do not read as a system. Choose one dominant pair and let the second pair appear in small areas — a chart series, an illustration, a secondary button. The rectangle guarantees hue spacing. It does not assign roles.
Because the scheme contains complements, it also contains the problems of complements: vibration, gamut shift, and gradients that gray out between opposite stops. Use the wheel to find the four hues, then decide which two are allowed to be large.
If the rectangle is hard to hold in your head, go back to the color theory guide and name each hue’s job before you export tokens. A token without a role is how four-hue systems become five-hue systems by accident.
The relationships are introduced in color theory 101. Explore every rule on the main color wheel, or lock swatches in the tetradic palette generator. Named swatches live in the color index.
FAQ
Frequently asked questions
Questions about the tetradic color wheel.
- What is a tetradic scheme?
- Four hues in a rectangle, made of two complementary pairs. The geometry is the part covered under hue in color theory 101.
- How do I stop a tetrad from looking busy?
- Give most of the area to one hue. Keep the other three for accents. Refine the set in the tetradic palette generator.
- Are all four hues safe for text?
- No. Check each text and background pair in the contrast checker. Hue spacing is not a contrast result.
- Should I simulate color vision on a four-hue palette?
- Yes, especially when two of the hues carry different meanings. Use the color blindness simulator and add labels where hues move closer together.