Dublin Library

The Publishing Project

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

  • 3 min. read

 

In my last post [Creating an OKLCH Generator Tool](https://publishing-project.rivendellweb.net/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 ![OKLCH color wheel, provided for reference. Source [Coloraide](https://github.com/facelessuser/coloraide)](https://res.cloudinary.com/dfh6ihzvj/image/upload/c_scale,w_500/f_auto,q_auto/oklch-color-wheel_kz2mmy.png) [Triadic colors](https://www.interaction-design.org/literature/article/triadic-color-scheme) are equidistant on the color wheel.
 
 
 
Example of Triadic Colors at 0, 120, and 240 degrees in 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.
 
 
 
Example of Triadic Colors at 212, 332, and 92 degrees in the color 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.
 
 
 
 
Example of Triadic Colors at 0, 90, 180, and 270 degrees in the color wheel
We can use any color as a starting point to generate the swatches by adding 90 degrees to the starting color.
 
 
 
 
Example of Triadic Colors at 212, 302, 21, and 122 degrees in the color wheel
## 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](https://web.archive.org/web/20111104184034/http://blog.globalizationpartners.com/culturally-customized-website.aspx), shows how people in different countries perceive colors. |   | Countries ||||| | Color | USA | China | India | Egypt | Japan | | :---: | --- | --- | ---| ---| --- | | Red | Danger
Love
Stop| Good fortune
Luck
Joy | Luck
Fury
Masculine| Death| Anger
Danger | | Orange| Confident
Dependable
Corporate | Fortune
Luck
Joy| Sacred (the Color Saffron)| Virtue
Faith
Truth| Future
Youth
Energy | | Yellow | Coward
Joy
Hope |Wealth
Earth
Royal | Celebration | Mourning | Grace
Nobility | | Green | Spring
Money
New | Health
Prosperity
Harmony | Romance
New
Harvest | Happiness
Prosperity | Eternal life | | Blue | Confident
Dependability
Corporate | Heavenly
Clouds | Mourning
Disgust
Chilling | Virtue
Faith
Truth | Villainy | | Purple | Royalty
Imagination | Royalty | Unhappiness | Virtue | Wealth | | Black | Funeral
Death
| Evil | Heaven
Neutral
High Quality | Evil | Death | | White | Purity
Peace
Holy | Mourning | Fun
Serenity
Harmony | Joy | Purity
Holiness | 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](https://www.interaction-design.org/literature/article/triadic-color-scheme) * [Square Colors – How to Master This Lesser-Known Color Scheme](https://www.colorsexplained.com/square-colors/) * [Tetradic Colour Schemes – The Square](https://quiltsbyjen.ca/tetradic-colour-schemes-the-square/)

Edit on Github