Triadic Color Wheel
Triadic schemes place three hues 120° apart. Drag the marker and watch the triangle rotate with your base color.
Three hues evenly spaced — vibrant but balanced.
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 triad places three hues about 120 degrees apart, an even triangle on the wheel. The triangle rotates when you drag the base hue, so the relationship stays even while the actual colors change. That evenness is why triads show up in brand systems that want energy without a single opposite.
Three saturated triad colors at equal area compete. Pick one dominant hue for large surfaces and use the other two as accents. The extra swatches on the palette page are tints and shades of the triad so you have somewhere to put body text.
Triads are also where sRGB gradients get muddy. A blend from one triad hue to the next crosses a long arc and often grays out in the middle. If you need a blend, add a stop or change the interpolation space, and read the gradient guides before you ship the hero.
The wheel shows the geometry. It does not check contrast, color-vision simulation, or print gamut. Those are separate tools, and a triad that looks balanced on the wheel can still fail all three.
The relationships are introduced in color theory 101. Explore every rule on the main color wheel, or lock swatches in the triadic palette generator. Named swatches live in the color index.
FAQ
Frequently asked questions
Questions about the triadic color wheel.
- What is a triadic color scheme?
- Three hues spaced evenly around the wheel, about 120 degrees apart. See color theory 101 for hue as a wheel position.
- How do I keep a triad from looking chaotic?
- Let one hue dominate the area. Use the other two in smaller marks. Tints of the same hues, from the triadic palette generator, calm the layout without leaving the scheme.
- Will a triad print the way it looks on screen?
- Not necessarily. Saturated hues often shift in CMYK. Check the swatches in the print gamut checker and treat the result as a reference, not a proof.
- Where should text colors come from?
- From a darker or lighter step that passes contrast, not from the most saturated triad hue. Confirm the pair in the contrast checker.