Color Theory Reference
An interactive, educational reference for core color harmony rules including mathematical breakdown and visual palette generation.
Color theory is both the science and art of using color. It explains how humans perceive color, the visual effects of how colors mix, match or contrast with each other, and the messages colors communicate.
The first recorded color wheel was invented by Sir Isaac Newton in 1666, who mapped the color spectrum onto a circle. Since then, artists and designers have studied algorithms and rules for building harmonious combinations.
The Math Behind Harmony
While color can be highly subjective, traditional “color harmony” relies on geometric relationships around the color wheel (typically described in HSL: Hue, Saturation, Lightness). By shifting the hue value by specific degrees (out of 360°), we can reliably generate palettes that feel balanced to the human eye.
Interactive Rules
Below is an interactive reference to six classical color harmony rules. Select a base color, and the mathematical rules will generate the corresponding palettes for you to use in your next project.
[!TIP] Click any generated color swatch to instantly copy its HEX value to your clipboard.
Color Theory Reference
Base Color Configuration
Monochromatic
Uses variations in lightness and saturation of a single hue. It provides a clean, elegant look that is easy to manage and practically guaranteed to match.
Analogous
Colors that are adjacent to each other on the color wheel (typically separated by 30°). This scheme creates serene, comfortable designs frequently found in nature.
Complementary
Colors directly opposite to each other on the color wheel (separated by 180°). This creates maximum contrast and maximum stability when used properly, but can be jarring if overused.
Split-Complementary
A variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement. This scheme has the same strong visual contrast as the complementary scheme, but has less tension.
Triadic
Uses colors that are evenly spaced around the color wheel (120° apart). Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues.
Tetradic
Also known as "Double Complementary", this scheme uses four colors arranged into two complementary pairs. It offers the most variety but is the hardest to balance.