Calculating Color

MMP 350 > Week 5

You have probably used the Adobe Color site for creating color schemes.

Each of the selections in the Color Scheme or Color Harmony drop down represent different color schemes based on relationships on the color wheel.

These are basic concepts in color theory.

In each of these schemes, the colors can be described with relative numerical values.

Because all colors are mapped on the color wheel, we can set up basic relationships and apply them to different colors.

Hue

Triadic color scheme

Let's look at a working example and then break down the code. This example uses a triadic color scheme. By adjusting the primary color hue, saturation or lightness, we will see all of the colors adjust along with it.

.posts {
	--hue: 0;
	--saturation: 50;
	--lightness: 50;
}

How does this work?

We can use CSS custom properties to take a single value for the hue and use it to define three separate colors.

Custom properties can be defined in any CSS selector block using two dashes before the property name. Any CSS value is then assigned to the property.

Custom properties

For the examples we'll focus on creating three color rules based on a main hue.

We start by defining a hue, which is just a number between 0 and 360.

:root {
	--main-hue: 240; /* 240 is a nice blue */
}

To use this value, we have to wrap it in a custom property var() and use it in an hsl rule.

This is a little complicated so let's look at an HSL rule first.

.post-text {
	color: hsl(240, 50%, 50%);
}

HSL is a CSS color rule that creates a color using a hue between 0 and 360 along with a saturation value between 0% and 100% and a lightness value between 0% and 100%.

This is based on the HSL color wheel, and it's a good way to do color calculations with CSS.

The saturation and lightness values can be adjusted as well, which we'll see in later examples.

Now we can construct and HSL value.

:root {
	--main-hue: 240;
	--main-color: hsl(var(--main-hue), 50%, 50%);
}

.post-text {
	color: var(--main-color);
}

calc

Once we have the main color, we can create two accent colors based on the primary hue value. That's why we need separate hue and color values, because the other colors are based on the hue number itself.

To do this we can use the CSS calc function to do basic arithmetic.

A triadic color scheme is three color with hues divided equally on the color wheel, so they will be separated by 120 degrees, or 360 / 3.

Creating color values.

:root {
	--accent-one-hue: calc(var(--main-hue) - 120);
	--accent-two-hue: calc(var(--main-hue) + 120);
	--accent-one: hsl(var(--accent-one-hue), 50%, 50%);
	--accent-two: hsl(var(--accent-two-hue), 50%, 50%);
}

The custom property var(--main-hue) is used first to calcuate the other color calc(240 - 120).

Then the resulting hue var(--accent-one-hue) goes into the HSL rule where the hue value would be hsl(120, 50%, 50%).

Applying color values.

.post-author {
	color: var(--accent-one);
}

.post-date {
	color: var(--accent-two);
}

Now we can update the entire color scheme by updating a single value.

:root {
	--main-hue: 240;
}

Analagous

An analagous color scheme is a similar setup to the triadic color scheme but there are smaller jumps between colors.

Analagous color scheme tend to exist in natural settings and give a sense of simple harmony.

This will look almost exaclty like our triadic color scheme rules with a different offset.

:root {
	--accent-one-hue: calc(var(--main-hue) - 30);
	--accent-two-hue: calc(var(--main-hue) + 30);

	/* these are the same */
	--accent-one: hsl(var(--accent-one-hue), 50%, 50%);
	--accent-two: hsl(var(--accent-two-hue), 50%, 50%);
}

Because the offset should be the same for each, we can make the offset into a variable value as well to test different offset numbers.

:root {
	--offset: 30;
	--accent-one-hue: calc(var(--main-hue) - var(--offset));
	--accent-two-hue: calc(var(--main-hue) + var(--offset));
}

The larger the offset, the bigger differce between the three colors. 30 is usually a good staring point, because it divides the color wheel into 12 even steps (360 / 12 = 30).

:root {
	--main-hue: 240;
	--offset: 30
}

Complementary

A complementary color scheme includes a primary color and it's exact opposite, 180 degrees away on the color wheel.

:root {
	--main-hue: 240;
	--complementary-hue: calc(var(--main-hue) + 180);
}

Fortunately for us, CSS is sophisticated enough to do this math, circling around to the beginning of the color wheel.

In order to create a third color, we can adjust the saturation or lightess of the main color or the complimentary color.

:root {
	--accent-one: hsl(var(--complementary-hue), 50%, 50%);
	--accent-two: hsl(var(--main-hue), 25%, 75%);
}

:root {
	--main-hue: 240;
}

Monochromatic

Colors differing only in saturation and lightness.

In this case the hue isn't changed at all, so we can use custom properties for saturation and lightness to see how the colors change.

.posts {
	--main-hue: 240;
	--saturation: 240;
	--lightness: 240;
}

Resources

• More color schemes
• HSL Color Schemes