How to Use a Triadic Color Scheme in Web Design | Tips for Balancing Three Colors
A triadic color scheme combines three hues spaced 120 degrees apart on the color wheel. It gives a website visual variety, but using all three as large backgrounds or prominent buttons can make the design feel busy. The goal is not to divide the page equally among the colors. Instead, assign one color to the main identity, one to a supporting detail, and another to the primary action. The example below uses a plant-delivery subscription website.
Space three hues evenly, but give them different visual roles
A color wheel arranges hues—the kinds of color, such as orange and green—around a circle. Using HSL, a format that describes colors by hue, saturation, and lightness, we can choose hue angles of 25, 145, and 265 degrees. These produce brownish orange #7A4B29, green #297A4B, and purple #4B297A. All three were generated with 50% saturation (color vividness) and 32% lightness (how light or dark the color is). Converting them to HEX, a six-digit hexadecimal web color code, introduces small rounding differences.
There is no rule that each triadic color must cover one-third of the interface. Green might introduce the service, orange could identify a short promotion label, and purple could distinguish the subscription button. Use nearly white backgrounds for the main text and product cards. Even with exactly 120 degrees between their hues, these colors do not automatically provide sufficient text contrast against every possible background.
Example palette for a monthly plant subscription page
Imagine a service delivering houseplants every month, with product photographs, subscription prices, delivery frequency, an introductory offer, and a registration form. Green carries the broad introductory area, while the other two hues have narrower purposes.
- Opening section: Use green #297A4B behind the service name and short description in white #FFFFFF. Text-to-background contrast is about 5.28:1.
- “Explore plans” button in the opening section: Use a white #FFFFFF button with green #297A4B lettering. Both text-to-button contrast and button-to-surrounding-green #297A4B contrast are approximately 5.28:1.
- Product descriptions and prices: Display body text and figures in deep gray-green #27342D on off-white #F8F8F5. The contrast ratio is about 12.22:1.
- Subscription-plan cards: Put deep gray-green #27342D text on white #FFFFFF cards for approximately 13.00:1. But white cards #FFFFFF differ from the off-white page background #F8F8F5 by only 1.06:1, so use a border and spacing. A muted gray-green #748379 border against the card’s white #FFFFFF surface has about 3.99:1 contrast.
- “First-order offer” label: Use brownish orange #7A4B29 with white #FFFFFF lettering. Text contrast is about 7.33:1. Keep this hue on a compact label rather than filling the entire plan card.
- Delivery-frequency information: Use a pale green-gray #E8F0EA panel with deep gray-green #27342D text, giving approximately 11.19:1 contrast. A muted gray-green #748379 outline contrasts about 3.43:1 with the panel background #E8F0EA.
- “Start a subscription” button: In the light content area, use a purple #4B297A button with white #FFFFFF lettering. Text-to-button contrast is about 11.07:1, and the button itself contrasts about 10.40:1 against the surrounding off-white #F8F8F5.
Green establishes the service’s identity, orange marks the introductory offer, and purple identifies the subscription action. White and gray are still valuable parts of the interface: they keep plant photographs and plan prices clear without adding competing hues.
Check surrounding surfaces and interaction states when three colors compete
Brownish orange #7A4B29 against the green #297A4B opening background has a contrast ratio of only about 1.39:1. A brownish-orange button placed directly on green may therefore be difficult to identify despite its different hue. Purple #4B297A also contrasts with green #297A4B by only about 2.10:1. In this example, the purple button belongs on the light content background, not in the green introduction.
Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text needs at least 4.5:1 contrast against its background, and large text at least 3:1. Essential non-text visual information, such as boundaries needed to identify controls, generally needs at least 3:1 against adjacent colors. Use written labels for statuses such as “Subscribed” or “Registration closed” instead of distinguishing them through color alone.
On smartphones, check card boundaries, small supporting text, and the position of the registration button. HueRoll can display triadic harmony suggestions, but it only compares a selected color with white or black for contrast; it does not compare arbitrary pairs of custom colors or automatically assess WCAG AA or AAA compliance. The custom-color ratios in this article were calculated separately.