A triadic colour scheme uses three hues spaced evenly, 120° apart, around the colour wheel. Starting from blue #3366CC (hue 220°), the partners are raspberry #CC3366 at 340° and green #66CC33 at 100°. All three keep the base colour's 60% saturation and 50% lightness, so they read with equal weight.
Triads give a palette more variety than a complementary pair while staying balanced, which is why they show up in brand systems, data visualisation and game interfaces. Type a hex code and the tool converts it to HSL, adds 120° and 240° to the hue and converts back, keeping saturation and lightness unchanged. The table lists each colour's role, hex code, rgb() value and hue, ready to paste into a stylesheet or design file. The rotation uses the RGB-based HSL wheel that browsers use, so red's partners are green and blue; on a painter's red-yellow-blue wheel they would be yellow and blue instead. Equal HSL lightness is not equal perceived brightness, so a yellow-green partner can look lighter than a blue one, and contrast for text still needs its own check.
Type a hex code such as #3366CC or the short form F80; the # sign is optional.
The headline shows the hex codes at +120° and +240°, with the base hue, saturation and lightness beside it.
Each row gives the role, hex, rgb() value and hue so you can paste the palette into CSS.
Result Triad partners: #00FF00, #0000FF
Base colour: #FF0000
Base hue (°): 0
Saturation: 100%
Lightness: 50%
Red, green and blue are the textbook triad on a screen colour wheel, each a third of the circle apart.
Result Triad partners: #CC3366, #66CC33
Base colour: #3366CC
Base hue (°): 220
Saturation: 60%
Lightness: 50%
Hue 220° with 60% saturation and 50% lightness gives a raspberry #CC3366 and a leaf green #66CC33 at the same strength.
Result Triad partners: #808080, #808080
Base colour: #808080
Base hue (°): 0
Saturation: 0%
Lightness: 50.2%
A grey has zero saturation, so rotating its hue changes nothing and the tool flags it.
H₂ = (H + 120) mod 360; H₃ = (H + 240) mod 360; S and L unchanged
HH₂, H₃S, LThe hex code is split into red, green and blue channels and converted to hue, saturation and lightness with the formulas in the CSS Color Module. Adding 120° and 240° to the hue divides the wheel into thirds. Each new hue is converted back to RGB with the same saturation and lightness, and each channel is rounded to the nearest whole value from 0 to 255 before it is written as hex.
Three hues spaced at equal 120° intervals around the colour wheel. Because no two of them are neighbours or direct opposites, the set feels varied but balanced. The classic screen example is red, green and blue; the classic painter's example is red, yellow and blue.
The tool uses the HSL wheel built on light-based RGB primaries, the same wheel CSS hsl() uses. On that wheel green sits at 120° and blue at 240°. The traditional art-class wheel is built on red, yellow and blue pigments, so its spacing differs.
A common approach is to let one colour dominate, use the second for supporting areas and keep the third for small accents such as buttons or highlights. Lowering the saturation of two of them, or using tints and shades, also calms the combination.
No. Only the hue rotates. The partners carry the base colour's exact saturation and lightness, so a pastel base gives pastel partners and a dark base gives dark partners.
A grey has zero saturation, so its hue is undefined and treated as 0°. Rotating a hue that has no effect on the colour leaves the RGB values unchanged, and the tool shows a warning.
This tool reads hex codes only, in three- or six-digit form. Convert an rgb() or hsl() value to hex first, then paste it in; the table returns rgb() values for every colour in the triad.
Using this tool in an assignment, article or report? Copy a citation, or a link for your website.
Tools Directory Editorial Team. (2026, October 17). Triadic Color Scheme. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/color-palettes-and-schemes/triadic-color-scheme/
Tools Directory Editorial Team. “Triadic Color Scheme.” Tools Directory, 17 Oct. 2026, https://tools.milunir.com/design/color-palettes-and-schemes/triadic-color-scheme/. Accessed 26 Oct. 2026.
Tools Directory Editorial Team. “Triadic Color Scheme.” Tools Directory. Last modified October 17, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/color-palettes-and-schemes/triadic-color-scheme/.
<a href="https://tools.milunir.com/design/color-palettes-and-schemes/triadic-color-scheme/">Triadic Color Scheme – Tools Directory</a>