Intro to Color Theory

The color wheel is a circular representation of color hues, showing the relationships between primary, secondary, and tertiary colors. It was originally presented by Sir Isaac Newton in his book Opticks in 1704.^[1]

The color wheel is a valuable resource when creating color schemes and palettes. It serves as a visual tool for understanding how different hues relate to each other and can help designers create harmonious, balanced color schemes. Traditionally, it contains 12 hues — 3 primary colors, 3 secondary colors, and 6 tertiary colors.

There are two types of color wheels — subtractive and additive. Physical printing typically uses the subtractive color model, which is based on cyan, magenta, and yellow as primary colors. The model that is usually used online is the additive color wheel with red, green, and blue as primary colors.

Warm colors in color theory evoke feelings of energy, passion, and coziness. These hues include reds, oranges, and yellows. Imagine a blazing sunset or a crackling fire— these are classic examples of warm tones. The concept of warm colors entered the artistic vocabulary during the 18th century by Irish poet Oliver Goldsmith.^[2]

Warm colors can be intense, especially when they’re used in their pure condition. Used as accent colors they can add life and excitement to a design. When used in large amounts, they can be overpowering if not balanced with other colors. In either case, they have a powerful impact on any design.

Cool colors are popular choices for branding. Blue is the most popular cool color worldwide. Other cool colors include green and purple, along with all of their variations. The concept of cool colors appeared even before warm by French art historian Roger de Piles in 1708.

Cool colors are commonly seen in nature — in water, the sky, and plants. These colors evoke feelings of calmness and relaxation, as well as loyalty and trust (another reason they’re so popular in branding). Blue is also widely associated with text links in UX design.

It's tough to create an aesthetically pleasing design using only warm and cool colors. That's where neutral colors come in. Neutral colors are the most subtle of the bunch and include black, white, gray, and various shades of brown. Technically, brown is a muted form of orange and is considered the warmest of the neutral hues.

Neutral colors are popularly used for typography, backgrounds, and wireframing. They can also be used to make accent colors stand out in your design but can be overpowered if not used properly.

In digital design, a color palette is more than just a random collection of hues — it's a well-curated set of colors designed to evoke specific moods or feelings.

Using a consistent color palette not only adds a cohesive look but also infuses your product with a distinct personality. This helps in unifying diverse products under a single brand, offering users a familiar visual cue or touchpoint.

Designers don't always need to create a palette from scratch. If a product or service has been around for a while, chances are there's already a brand book in place to kickstart the design process.

In the design world, the additive color model is the most commonly used since it's what digital displays use. The primary colors in the additive color model are red, green, and blue (RGB).

The term "additive" refers to the fact that as you add colors to the mix, the result gets progressively lighter, all the way to white when all colors are combined. James Clerk Maxwell is largely credited as the father of additive color for his experimental work regarding light and the color spectrum. In 1861, he presented the very first color photograph at the Royal Institution.^[3]

The subtractive color model is a blend of pigments, inks, paints, or dyes. It is termed "subtractive" because, with the addition of each new color, the mixture reflects less light and becomes darker, progressively tending towards black.

In art, the subtractive color model is based on the primary colors most of us learned as children — red, yellow, and blue. In printing and design, the subtractive color model is based on cyan, magenta, and yellow. More colors can be accurately reproduced by combining these 3 hues along with a key color such as black.

Primary colors are the root of every other color. They are impossible to form by blending other hues. In the subtractive color model (used in printing, silk-screening, and painting), primary colors include cyan, magenta, and yellow. In the additive color model (used by digital displays), they are red, green, and blue.

In design, primary colors have a powerful visual and psychological impact. They're often used as accent colors in their pure forms so they're not overpowering. However, leaning more heavily on primary colors would be the way to go when you want to make an impact.

Secondary colors are created when combining two primary hues. In the subtractive color model, secondary colors include red, blue, and green, while in the additive model, they are cyan, magenta, and yellow.

Notice that the subtractive primary colors (cyan, magenta, yellow) become secondary colors in the additive model. Likewise, red, blue, and green are primary colors in the additive model and secondary colors in the subtractive model. Even though these color models work in opposite ways, they're intricately related to one another.

Tertiary colors are created when combining a primary and secondary hue in equal measure. In both additive and subtractive color models, they include hues such as azure, orange, and violet. It happens because the primary and secondary hues in the two models are inverted, but include the same 6 hues.

Combining tertiary colors with primary or secondary colors creates yet another level of colors called quaternary colors.

Hex triplets are one way to represent RGB colors and are commonly used to specify colors in CSS. Hex colors are prefixed with a “#” and typically include 6 hexadecimal digits (numbers 0–9 and letters A–F).^[4] Each pair of digits in the code represents the intensity of the colors red, green, and blue (RGB).

The format is #RRGGBB:

• RR: Red component (00 to FF)
• GG: Green component (00 to FF)
• BB: Blue component (00 to FF)

Here are some examples of hex color codes:

• Black: #000000
• White: #FFFFFF
• Red: #FF0000
• Green: #00FF00
• Blue: #0000FF
• Yellow: #FFFF00

In some cases, they may include a fourth pair of digits, which represent the color’s opacity or alpha. Sometimes, you may see 3-digit hex colors, with only one digit representing each RGB value.

The RGB color model (which stands for Red, Green, Blue) is what UX designers most commonly work with since it's used by electronic displays. It combines red, green, and blue lights to create more than 16 million colors (16,777,216 to be exact). Note that RGB is a device-dependent color model, meaning different devices will display RGB values differently.

RGB is represented using a combination of 3 numerical values that indicate the intensity of each primary color. Each value typically ranges from 0 to 255, where 0 indicates no intensity of that color and 255 indicates the maximum intensity. The 3 values are often written in the format (R, G, B), such as (255, 0, 0) for pure red, (0, 255, 0) for pure green, and (0, 0, 255) for pure blue.