CSS Color Palette

Techniques of CSS Color Palette Creation

We know how nowadays we have "dark mode" and "light mode"? Additionally, "dark" and "light" color schemes are included in browsers' default styles. The browser can utilize (or opt to use) the CSS color-scheme property to display specific components with its dark or light default style.

Choosing a colour scheme for a website is a difficult task. Design, colour theory, and contrast understanding are all crucial to this process.

We usually start with a design tool like Figma at the beginning of a full web design process. We may carefully create our ideas with the help of this design tool, test out various colour combinations, and ultimately choose the final appearance of the finished project.

A workable prototype may be created from the finished design utilizing various architectural techniques with CSS and HTML. This course primarily focuses on CSS methods for creating and using colour schemes when implementing designs.

As we progress through the course, I'll demonstrate three CSS methods for developing and using a color scheme, of which experts trust two. I'll also discuss the currently experimental LCH and LAB color functions for relative colors.

Any of these strategies may be used, with or without a design strategy, if you have a basic grasp of color theory. Before entering the details, let's review some fundamental web design and coloring concepts.

Knowledge of the 60-30-10 Design Rule

The classic 60-30-10 design rule is a general guideline for all colouring and decorating projects. The web is no exception; starting with this guideline simplifies creating your colour scheme.

• In the 60-30-10 rule, each pair of digits stands for a different colour weight. Let's refer to them as major, secondary, and accent colours, respectively, for simplicity.
• The primary color takes up as much design "real estate" as possible, or around 60% of the area on a page. For instance, it is frequently the backdrop color.
• The secondary color follows, taking up around 30% of the design space. The color of the text components is often what floats over the primary color.
• The accent color, which should only comprise roughly 10% of the design area, accentuates minute but significant design aspects. The most frequent locations for accent colors are call-to-action buttons and hyperlinks.

This method of evenly dispersing colors throughout the UI will spare us the hassle of overusing too many colors in our designs and producing a convoluted color scheme.

Investigating the Ideas of Color Contrast and Harmony

A visual experience is made more orderly and balanced by color harmony. The spectator experiences boredom or disorder when a design is not aesthetically harmonious.

Color contrast, a crucial component of color harmony, gauges how legible or accessible one color is over another. Before choosing the final colors for their work, designers should ensure that the color contrast is sufficient to meet color accessibility guidelines.

Principles of color theory also provide a few universal strategies for selecting harmonies. Examining two will help us create a colour palette in the text later on.

Complementing Hues

Colors are arranged in a circle on a color wheel. As a result, you may express a color using the degree value corresponding to its location on the color wheel.

Complementary colours include any two hues directly across from one another on the colour wheel, such as red and cyan or blue and yellow. You may determine the complementary match by 180 degrees to or away from a particular color.

According to theory, complementary colors produce the greatest contrast and stability, making designs more aesthetically pleasing in terms of color. In a later section of the essay, we'll discuss how complementary colours might create a hue's opposing counterpart.

Analogous Colours

If three colors occur together on a 12-part color wheel, such as yellow-green, yellow, and yellow-orange, they are said to be similar. A particular hue's equivalent counterpart is computed by 30 degrees added or subtracted from it.

Analogous colour choices are often relaxing and aesthetically attractive. We may avoid the effort of manually selecting random colours from the colour wheel and rechecking them for harmony by using these kinds of colour combinations.

Let's move on to the technical side of things, i.e., several strategies for creating color palettes using CSS, now that we have a broad understanding of color and design theory. We will employ the HSL color model for simple and adaptable color scheming.

CSS SASS Variables for Color Palette Creation

Although working with CSS nowadays is best done via custom properties and calc(), developers familiar with a preprocessor like Sass can utilize this method instead. The strongest reason to use this strategy over others is that a CSS preprocessor offers finer control over things than the native CSS does.

Let's choose a hue and create a color scheme entirely with Sass variables:

$hue: 150;

Based on what we covered earlier, let's build three functions that take the $hue value and generate its complimentary and analogous colors. There are two distinct functions for obtaining the left and right similar neighbours of a given hue:

Let's compute the complementary and analogous hues for the $hue: 150; we defined at the beginning of this section using these Sass functions:

Our basic, secondary, and accent colors may now be made using one of four alternative hue values. Here is how we may declare each of these color values by modifying the saturation and lightness HSL parameters while keeping in mind their intended use:

The secondary color must effectively contrast with the primary color, which will occupy most of the screen area. The secondary color is the complementary hue since it best serves this function.

Any similar colors we generated above can serve as our accent color if the saturation is high enough to keep the accent appropriate for the highlighted details.

Last but not least, we could require some deeper hues of our main color to adorn borders and separators. Likewise, lighter versions of our secondary colour might represent less significant text elements like captions and labels.

In the last section, we represented a color's relative brightness and darkness using numbers 500, 600, and 900. This aids in my memory of the significance of a specific color value.

Planning certain colors that contrast nicely with the accent color would be a sensible decision, as the accent color would be the backdrop in the case of highlighted components like CTAs:

Utilizing CSS Variables and HSL to Create Color Palettes

This method essentially amounts to replacing the Sass features in the previous strategy with CSS variables. We can just use the calc() CSS function to do computations. This, however, does not provide us with the DRY strategy we had with Sass.

We may still profit from the advantages of this technique by combining Sass with it on the development front. To keep things simple, I won't use Sass in this example, but as an exercise, you may choose to combine Sass and this technique:

As you can see from the image above, we must manually determine complementary and analogous colors. The remaining steps are similar to those in the previous approach, except that CSS custom properties (like var(--hue), for example) are used instead of Sass variables.