Super Boring Tools

Search tools

Find a tool by name or what it does.

Triadic Color Generator

Enter a base color and get its two triadic partners, spaced 120 degrees apart on the color wheel.

HEX, RGB, or HSL, or pick a color. Everything runs in your browser. Nothing is uploaded.

Triadic palette
#6366f1
#f16366
#66f163
Base
#6366f1
rgb(99, 102, 241)
hsl(239, 84%, 67%)
Triadic +120°
#f16366
rgb(241, 99, 102)
hsl(359, 84%, 67%)
Triadic +240°
#66f163
rgb(102, 241, 99)
hsl(119, 84%, 67%)
Palette code
:root {
  --color-base: #6366f1;
  --color-triadic-1: #f16366;
  --color-triadic-2: #66f163;
}

How to generate a triadic color scheme

  1. Enter a base color

    Type or paste a HEX, RGB, or HSL value, or choose a starting color with the picker.

  2. Review the triad

    The two triadic partners appear instantly, rotated 120 and 240 degrees around the color wheel.

  3. Copy the palette

    Copy any single code from a swatch, or copy all three colors as CSS variables or a plain hex list.

Why use this tool

Exact 120 degree spacing

The two partner colors are computed by rotating the hue 120 and 240 degrees while saturation and lightness stay untouched.

HEX, RGB, and HSL for every swatch

Each of the three colors shows all three code formats, each with a one-click copy button.

CSS variables or hex list

Copy the whole palette as ready-to-paste CSS custom properties or as a plain list of hex codes.

Live palette preview

A preview strip shows the three colors side by side so you can judge the balance at a glance.

Runs entirely in your browser

Colors are calculated on your device; nothing is uploaded or stored.

About this tool

A triadic color scheme uses three colors spaced evenly around the color wheel, 120 degrees apart. Because the hues sit as far from each other as possible while staying balanced, a triad gives you strong contrast without the tension of a direct complement. This generator takes any base color and returns its two triadic partners instantly, so you can go from a single brand color to a full three-color palette in seconds.

Enter a color as a HEX code, an rgb() value, or an hsl() value, or choose one with the picker. The tool reads the color as hue, saturation, and lightness, rotates the hue by 120 and 240 degrees, and keeps saturation and lightness exactly as they are, so both partners sit at the same intensity as your base. Each swatch shows its HEX, RGB, and HSL codes with one-click copy, and the whole palette can be copied as CSS custom properties or a plain hex list. Greys and other low-saturation colors still produce a valid triad, though the three results will look nearly identical because hue has little visible effect at low saturation.

Triads work best when one color leads and the other two support it; a common split is 60 percent dominant, 30 percent secondary, and 10 percent accent. For softer harmony try the analogous color generator, for maximum contrast between two hues use the complementary color calculator, and for a four-color scheme see the tetradic color generator.

Frequently asked questions

What is a triadic color scheme?
A triadic scheme is three colors spaced evenly around the color wheel, 120 degrees apart. Classic examples are red, yellow, and blue or orange, green, and violet. The even spacing gives vivid contrast while keeping the palette balanced.
How are the triadic colors calculated?
Your base color is read as hue, saturation, and lightness. The hue is rotated by 120 and 240 degrees, wrapping around 360, while saturation and lightness are kept identical so all three colors have the same intensity.
Which color formats can I enter?
You can paste a 3- or 6-digit HEX code with or without the # sign, an rgb() or rgba() value, or an hsl() or hsla() value, or pick a color visually. Alpha is ignored because the palette is a set of opaque colors.
Why do grey colors barely change?
Greys have little or no saturation, and rotating the hue of a desaturated color has almost no visible effect. The tool still generates the triad and shows a note; raise the saturation of your base color to see clearer separation.
Is my color data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.
How should I use a triadic palette in a design?
Let one color dominate and use the other two as support. A common ratio is 60 percent dominant, 30 percent secondary, and 10 percent accent, which keeps the strong contrast of a triad from overwhelming the layout.

Related tools