HexaCalc
All tools
Pick Hex color pickerColor picker from imagePalette from imageCamera color identifierScreen color picker
Create Palette generatorColor wheelComplementary colorsTriadic colorsMonochromatic schemeColor mixerBrownBlueGreenPurplePinkOrangeGrayColor matcherGradient generatorTailwind color generatorShades and tintsRandom color generatorPaint color visualizerWebsite color schemesColor mixing chart
Check Contrast checkerColor blindness simulatorColor blind testTypes of color blindnessHue test
Convert HEX to RGBRGB to HEXRGB to CMYKCMYK to RGBHEX to CMYKHEX to HSLColor converterColor temperatureColor name finder
Personal color Color analysisSkin tone chartSeasonal color quizWinterAutumnSpringLight SpringTrue SpringBright SpringLight SummerTrue SummerSoft SummerSoft AutumnTrue AutumnDeep AutumnDeep WinterTrue WinterBright Winter
Color families Color codesBlueGreenSage greenMauveRedPinkPurplePastelNeutralDarkGoldGrayMint greenLight greenLight purpleLime greenPastel pinkNeonPastel greenPastel yellowPeachCrimsonCool colorsBurnt orangeOrangeGreigeBright colorsSpring colors
Hex math Hex calculatorHex to decimalDecimal to hexHex to binaryBinary to hexHex to textText to hex
More tools Minecraft color codesColor gameResistor color codeImage color changerColor by numberGrayscale image
↑ ↓ to moveEnter to openEsc to close

Triadic color scheme generator

Start with one color and get two partners spaced evenly around the wheel. Then tame them: pull saturation down, set the proportions and see how the trio behaves in a real layout.

Wheel
60-30-10 roles

Field notes

The dominant color covers most of the page. The secondary frames content and the accent marks what to click.

This week’s picks

Read more

What a triad is

A triadic scheme uses three hues spaced evenly around the color wheel, 120° apart. Picture an equilateral triangle inside the wheel: wherever you rotate it, the corners land on a triad. The primaries are a triad (red, yellow, blue on the painter's wheel; red, green, blue on the screen wheel), and so are the secondaries.

Triads give more variety than a complementary pair while still feeling planned. They are also easy to overdo, which is why the tool has controls to tame them.

Example from one color

Starting from the HexaCalc teal #0F766E:

WheelPartner at +120°Partner at −120°
RGB#6E0F76 (plum)#766E0F (olive)
RYB#760F54 (mulberry)#765F0F (bronze)

All four partners keep the teal's saturation and HSL lightness. The RYB versions lean warmer and are often easier to wear or decorate with. Switch wheels with the buttons above the sliders.

The controls

Spacing moves the partners between 90° and 150° from your color. Exactly 120° is a true triad. Narrower spacing gives a softer scheme that drifts toward analogous colors. Wider spacing approaches split-complementary, at 150°.

Partner saturation scales the two partners' saturation from 20% to 120% of your color's. Pulling it down is the quickest way to make a loud triad usable: keep your main color vivid and let the partners support it.

Match perceived lightness re-sets each partner to your color's OKLCH lightness, keeping its hue and chroma. HSL rotation often leaves one partner looking much brighter than the others. Yellows and greens are the usual offenders. Balancing fixes that, and the trio reads as one family.

The 60-30-10 rule

Interior designers popularized a simple split: 60% of a space in the dominant color, 30% in a secondary and 10% in an accent. It works just as well for screens and print. Use the role buttons to choose which of the three colors takes the 60% role. The preview repaints as a page background (60%), a content card (30%) and a button (10%), with a proportion bar underneath.

A few patterns that usually work:

  • The most muted or darkest color takes 60%, so the page stays calm.
  • The most saturated color takes 10%, where it does the most good: buttons, links, highlights.
  • Text sits on the 60% and 30% areas, so check contrast on those two with the contrast checker.

Making a triad feel professional

  • Vary lightness. A light, a mid and a dark color is easier to use than three mid-tones.
  • Add a neutral. Most real interfaces need a near-white and a near-black as well as the triad. The website color scheme builder has slots for both.
  • Test it with real content. A triad that looks great as three swatches can be overwhelming at full-page scale. The preview exists for that reason.

Exporting

The export box under the preview copies the three colors as CSS variables, Tailwind v4 or v3 config, SCSS, JSON, design tokens or an SVG. It can also download a PNG swatch card. The names default to primary, triad-1 and triad-2. Rename them in your code to match their roles once you've settled on the 60-30-10 split.

Four triads, measured

Here are the RYB triads the tool gives for four strong starting colors, with each color's OKLCH lightness (0 is black, 1 is white):

Your colorPartner 1Partner 2Lightness of the three
Burnt orange #C2410C#67C20C#500CC20.55, 0.73, 0.42
Royal blue #1D4ED8#D81D3C#D8CE1D0.49, 0.57, 0.83
Forest green #15803D#7E1580#805C150.53, 0.43, 0.50
Raspberry #BE185D#BEA718#1886BE0.52, 0.73, 0.59

The royal blue row shows the problem the lightness option solves: the yellow partner is far lighter than the blue, so it jumps out of the group. The forest green triad is the opposite case. All three sit near 0.5, which makes it calm and slightly heavy, a good base for a brand that wants to feel traditional. When the three values spread widely, give the lightest color the smallest share, or turn on the lightness match.

For more scheme types on one wheel, open the color wheel. For a single partner, see complementary colors. To build a calmer one-hue scheme instead, try the monochromatic color scheme generator.

FAQ

What are the triadic colors of red?

On the RYB wheel, yellow and blue. On the RGB wheel, green and blue.

Is a triad the same as tetradic?

No. Tetradic (or rectangle) schemes use four colors, two complementary pairs. Square schemes use four colors 90° apart. Both are on the color wheel tool.

Why do my three colors look unbalanced?

Usually because their perceived lightness differs. Tick the OKLCH lightness option, or lower the partners' saturation.