DEV Community

Cover image for Color Theory for Web Developers
Nico Braun
Nico Braun

Posted on

Color Theory for Web Developers

Color Theroy is, at it's core, about developing aestaticly pleasing color relationships.

In the 1920s, a German guy named Johannes Itten worked on his color theory. Today, His theory is used by designers, film creators and painters all around the world.

Itten theorized seven types of color contrast and devised exercises to teach them. His color contrasts include contrast by hue, contrast by value, contrast by temperature, contrast by complements (neutralization), simultaneous contrast (from Chevreuil), contrast by saturation (mixtures with gray), and contrast by extension
Goethe

Attributes of Color

In modern Computer since a single color is a mixture of three attributes. Value, Hue and Chroma. To make things a bit more confusing, these 3 attributes can have different names. Sometimes a fourth attribute exists, which is the alpha value.

Attribute Alternate Names Description
Value brightness, (Perceived) Luminance how bright or dark
Hue Color, Tone what color
Chroma saturation, dullness how intense
Alpha transparency, opacity how transparent

Color Models

In Computer Science, we work mainly with one of 2 well established models. RGB or HLS. They are different ways to express the constellation of the color attributes such as value, hue and chroma. When the alpha value is used, we refer to these models as RGBA and HLSA, where the "A" stands for the additional alpha channel.

RGB

Stands for "Red Green Blue." RGB refers to three hues of light that can be mixed together to create different colors. The RGB color model is an "additive" model. When 100% of each color is mixed together, it creates white light.

rgb color picker
w3schools rgb

HLS

Implements a different approach to mix colors. It accepts three values, Hue, Luminance and Saturation. The Hue is expressed in radiant. Thinking in radiant is useful because we generally also think about colors in a Wheel formation. Commonly known as the color wheel. And since a wheel is just a circle, using radiant is actually a good way to operate on the color wheel. A Hue value of 0 is red, 120 is green, 240 is blue.

hls color picker
w3schools hsl

Proportion

Proportion refers to the division of a given space between different colors. In the below image, some colors take up proportionally more space of the image than others.

Example proportions

Watch Video

Contrast Ratio

Contrast ratio is the brightness difference between two adjacent colors. 2:1 means one colors is 2 times darker as the other, 30:1 means it is 30 times darker.

Contrast ratios
https://contrast-ratio.com/

Harmony

So far, everything was related to the generation of a single color. When putting 2 or more distinct colors next to each other, i.e. red and blue. Then we can also observe a certain harmony (or disharmony) between these colors.

The below image shows 6 of the most common harmonies. Although there is many more. These 6 have to be proven to work well.

Six base harmonies

Watch Video

Relative Luminance

the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white.

Essentially, the idea is to use the darkest color in the palette as lower bound and the brightest color as upper bound. So that the brightness of a giving color is expressed in relation to the palette.

Watch Video

Contrast of Extension

When different colors are adjacent, the space each color requires, to balance the overall picture, differs. Very saturated or light colors yield higher visual impact than duller or darker colors. Therefore, the countering color needs proportional more space to even the effect out.

  • Light and Saturated colors need less space to balance out.
  • Dark and dull colors needs a more space to balance out.

In literature about the subject, we oftentimes see the below example.

Example contrast

Watch Video

Crafting a Palette

When creating a palette, it can be a good idea to start from by choosing one of the six base harmonies and divide the colors in (special) proportion to each other such that at least a dominant color(-group) exists. Optionally, a subdominant color(-group) and/or an accent color(-group) may be chosen. Taking relative luminance and contrast of extension into consideration in order to achieve "balance".

As an example, the accent color is most often bright and saturated in order to achieve enough impact while taking only a small proportion of the available space.

Example palette

  • Dominant (takes the biggest portion)
  • Subdominant (a smaller portion than the dominant, but not as small as an accent)
  • Accent (a very small portion)

Color Palette Tool

Accessibility (WCAG)

Web Content Accessibility Guidelines (WCAG) is a standard for web content accessibility.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

There are several tools on the web to check if colors meet the standard. For example, this tool.

Discussion (0)