Color palette as part of the design system

While developing the color schemes for the product with the designer, we saw inconsistencies with how variable colors are named. I did a research, after which I realized that it is very important to semantically correctly name variables before starting the development stage.

Perhaps the hypothesis described in this article will be a good help for discussing and solving one of the problems that arise when developing a design system, namely, the correct setting of the color scheme.

Color characteristics

Colors are divided into two categories: chromatic and achromatic. Achromatic colors are not spectral colors. Black, white, shades of gray. They have only one characteristic – lightness.

Color systems

Classification of color systems:

  1. By light (RGB). Mixture. Red, green, blue

  2. By ink (CMYK). Subtraction. Cyan, magenta, yellow, black

On monitors, we are dealing with light, so let’s take a closer look at what the color system of light is.

In 1676, Isaac Newton conducted the following experiment: he passed a beam of light through a triangular prism and obtained a color spectrum – from red to violet, except for purple. After that, the spectrum was passed through a collecting lens, as a result of which a white color was obtained.

With his experiment, Newton proved that white is not primary and consists of colored components with different degrees of refraction. These components just turned out to be primary. Then he passed the blue color through another trihedral prism, but the blue color did not decompose into a new spectrum, which in turn proved that this color is the primary one.

Light color

Before this experiment, everyone believed that objects have color. However, Newton determined that an object, when a ray of light hits it, absorbs part of the light waves and reflects part of it. And depending on the angle with which the refraction occurs, this is how we consider the color of the object.

“The red vessel looks red because it absorbs all the other colors of the light beam and only reflects the red.”

Newton's color wheel
Newton’s color wheel

Johann Goethe mixed violet and red, thus obtaining magenta and a new color wheel appeared.

Johann Goethe's color wheel
Johann Goethe’s color wheel

Philip Otto Runge expanded the range of primary colors by adding black and white. Runge based his conclusions on experiments with pigments, which made his teaching closer to painting.

Otto Runge's color ball
Otto Runge’s color ball

Johannes Itten. Its 12-part color wheel shows the most common color arrangement in the world and their interaction with each other.

Itten highlighted the primary colors, the second order colors (green, purple, and orange), which are obtained by mixing a pair of primary colors, and the third order colors, which are obtained by mixing the primary color with the second order color.

Itten's color wheel
Itten’s color wheel

Michel Chevreul was the first to develop a color atlas. It is based on 6 basic colors in twelve modifications.

Chevreul color system
Chevreul color system

Paint color (Subtractive color or Subtractive color)

This system predicts the power spectrum of light after light passes through successively absorbing layers of different media. The creator of the subtractive blend color wheel is Moses Harris.

If red paper (its surface absorbs all rays except red) is illuminated with green, then it will appear to us black, because green does not contain red rays that could be reflected by our red paper. All paints are material (absorbent), therefore, when mixing them, you must be guided by the principles of subtraction.

Moses Harris color wheel
Moses Harris color wheel

What format do most people use?

Since the days of CSS 2.1, it has been customary to use either HEX or RGB colors. The disadvantages of using this form of color representation are:

  • The system is not intuitive. We do not separate the color into red, green and blue and do not convert the color into a hexadecimal number system, and we don’t say, for example, “The color of the Kremlin # ff0000”.

  • There is no support. Designers may need 10 types of the same color, and in HEX and RGB there is no reference to hues.

HSL (hue, saturation, lightness)

HSL color is defined by three values:

  • tone (hue, hue);

  • value (lightness, brightness, value);

  • lame (chromaticity, saturation, chroma, saturation).

There is a three-dimensional colorimetric system of Munsell. In it, the color is determined using three coordinates.

Munsell colorimetric system
Munsell colorimetric system

If we rename the constituent colors, we get the following picture:

Choosing a color scheme

Theming, white labeling, redesign – these are the main points that the development team may face. And so that these points do not turn into problems, you need to take a number of steps from the very beginning of development.

1. Choosing the type of color scheme

So, what are the color schemes, according to color theory:

  • Monochrome (one primary color and its shades are used)

https://codepen.io/gevara2015/pen/xxVdooe

  • Complimentary scheme – colors are taken that are located on opposite sides of the color wheel. The combination of these colors looks very lively and energetic. It is better not to take such a scheme to create text compositions. It is best used when you need to highlight or emphasize something.

In total, there are 5 color schemes:

  1. Monochromatic scheme (one primary color).

  2. Supplementary Scheme (two primary colors).

  3. Triad scheme (three primary colors).

  4. Tetrahedral scheme (four primary colors).

  5. Adjacent schema (two or three primary colors).

We will not waste time on a detailed analysis of each circuit, this is done here here, let’s move on to the code.

2. Naming variables

Most of the color variable names we have now are: accent, base, high, button-contrast-alpha, positive, negative, faint, success, warning … lots of them. And almost every designation has questions.

  1. Take, for example, high – what is it high relative to, is there a low, how much high is higher and by what parameter is low?

  2. Button-contrast-alpha. If you follow the logic of this naming, there should be a series of alpha, beta, gamma. Again, the question is: how will they differ and to what extent? What color will average values?

  3. Low level of abstraction: button, text, link, etc.

As for naming, I think you need to adhere to a number of rules:

  • Use strong, base, weak instead of alpha, beta, gamma.

  • Primary (the main color of the brand).

Given the many abstractions in naming (you cannot specify a specific markup element parameter or the element itself in a variable name), I thought it would be nice to stick to naming by layers (few people remember the Tilt addon in Firefox). To distinguish one element from another, it is enough to imagine that it is just one level higher. And to make it stand out, you need to set it this very background color, something like background and foreground.

Mozilla tilt addon
Mozilla tilt addon

And then I came across an explanation of the principles of naming variables for Material Design.

  1. Background (0dp elevation surface overlay)

  2. Surface (with 1dp elevation surface overlay)

  3. Primary

  4. Secondary

  5. On Background

  6. On Surface

  7. On Primary

  8. On Secondary

2.1 Separation of names

The best solution for developers and designers is to define variables and the middleware that connects it all. That is, variables for developers describe only individual properties with reference to their location in the “layers” of the flow of elements. But the variables for designers, on the contrary, should be associated specifically with color, tone, brightness.

https://codepen.io/gevara2015/pen/poywzLj

That is, to describe the properties of elements, the following set of variables will suffice:

/* elements variables */
--global-background: var(--bg);
--surface: var(--bg-weak);
--on-color: #fff;
--on-background: var(--contrast-weak);
--on-primary: var(--on-color);
--on-secondary: var(--on-color);
--on-error: var(--on-color);
--on-surface-prime: var(--contrast-weak);
--on-surface-second: var(--contrast-strong);
--input-background: var(--bg-weak);
--input-outline: inset 0 0 0 1px var(--secondary-strong);
--component-outline: none;

It is also worth noting that to describe the borders of an element, it is better to use box-shadow rather than border, since it is more complex (we can apply at least three shadow values ​​at once):

–component-outline: 15px 17px 26px -4px rgba (34, 60, 80, 0.6), 15px 17px 19px -11px rgba (20, 117, 191, 0.6), -22px -36px 19px -11px rgba (56, 167 , 103, 0.6);

Plus, it does not change the size of the entire button or, for example, the input (if we take box-sizing: border-box as the source data). It seems to me that this is a good solution, since the developers describe a set of variables for each component, and the designer can later play with colors or color schemes, with design approaches (skeuomorphism, neumorphism) or even use LCH colors, all at the discretion of the designer.

Lea Verou in her article indicates the option to convert the color scheme for a dark theme using the L (lightness) parameter in HSL format. As a result, a ladder is obtained for a light theme:

 --l-0: 0%;
--l-30: 30%;
--l-40: 40%;
--l-50: 50%;
--l-90: 90%;
--l-100: 100%;

and for the dark one – the inverse ladder of variables:

@media (prefers-color-scheme: dark) {
	:root {
		--l-0: 100%;
		--l-30: 70%;
		--l-40: 60%;
		--l-90: 10%;
		--l-100: 0%;
	}
}

And it would seem that everything is logical, you can simply define the current luminosity parameter as the formula 100% – lightness, and it will be the average for both dark and light themes. However, hsl has a drawback. In a light theme, there won’t be enough contrast for a number of elements. The solution proposed by Lea Verou using LCH colors seems to me too crude, it is still a draft in the w3c specifications.

conclusions

  1. In order to correctly use color schemes in which the colors will not merge (or there will be insufficient contrast), you need to separate the variables “for designers” and variables “for developers”.

  2. Setting up the color scheme lies entirely with the designer, and he only gives the final config file.

  3. Stripe made a tool for internal use in their products, but resources are needed to develop such a tool.

Posted by Alexander Tantsyura, Frontend Developer at Space307.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *