What are Triadic and Tetradic Color Palettes and How to Use Them

• February 26 2024
• 3 min. read

In my last post Creating an OKLCH Generator Tool, I wrote about about Triadic and Tetradic palettes and how to build them using vanilla JS.

This post will cover what these palettes are and how to use them.

Triadic Colors #

Triadic colors are equidistant on the color wheel.

If we use blue as our starting color, the palette will loop around, that's why the third color is at 92 on the wheel.

Tetradic colors #

Tetradic colors are four colors equidistant in the color wheel. Because there are four colors, and I'm using the square Tetradic color scheme, they are placed 90 degrees from each other in the color wheel.

Tetradic colors will create two pairs of complementary colors.

We can use any color as a starting point to generate the swatches by adding 90 degrees to the starting color.

General Considerations #

There is no dominant color in either palette, you will have to pick the primary color for your project.

Using different colors in the palette as your primary color will have different effects on your audience. This is especially important when working with cross-cultural audiences that may interpret colors differently.

The table below, taken from Creating Culturally Customized Content for Website Translation, shows how people in different countries perceive colors.

As with any other aspect of UX work, test your colors with your target audience.

Links and Resources #

• Everything You Need To Know About Triadic Colors
• Square Colors – How to Master This Lesser-Known Color Scheme
• Tetradic Colour Schemes – The Square

• CSS,
• Color

Edit on Github