Techniques of CSS Color Palette Creation
We are familiar with the current trend of using "dark mode" and "light mode". Furthermore, browsers come with default styles featuring both "dark" and "light" color palettes. To present certain elements in their default dark or light styles, the browser may employ the CSS color-scheme property.
Selecting a color palette for a website can be a challenging endeavor. It requires a deep understanding of design principles, color theory, and the importance of contrast in creating an effective visual experience.
We typically initiate the full web design process by utilizing a design tool such as Figma. This tool assists us in meticulously crafting our concepts, experimenting with different color schemes, and ultimately selecting the definitive look of the completed project.
A functional prototype can be developed based on the final design by applying different architectural strategies using CSS and HTML. This training program mainly emphasizes CSS approaches for generating and applying color palettes in design implementation.
As we advance in the course, I will illustrate three CSS techniques for building and applying a color palette, of which two are highly recommended by professionals. Furthermore, I will explore the LCH and LAB color functions, which are currently in the experimental stage, for generating related colors.
Any of these approaches can be implemented, whether or not a design methodology is employed, as long as there is a fundamental understanding of color theory. Prior to delving into specifics, let's revisit some essential concepts in web design and color theory.
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 technique of uniformly distributing colors across the UI will help us avoid the pitfalls of using an excessive number of colors in our designs and creating a complex color palette.
Investigating the Ideas of Color Contrast and Harmony
A harmonious color scheme enhances the visual appeal and balance of a design. Lack of color harmony can lead to feelings of boredom or chaos for the viewer.
Color difference, an essential aspect of color coordination, measures the readability or accessibility of one color against another. Prior to finalizing the colors for their project, designers need to verify that the color distinction is adequate to comply with color accessibility standards.
Principles related to color theory also offer several universal approaches for choosing harmonies. Exploring a couple of these strategies will assist us in developing a color scheme further along in the document.
Complementing Hues
Colors are organized in a circular manner on a color wheel, allowing you to represent a color by its degree value based on where it is positioned on the color wheel.
Complementary colors are a pair of hues positioned directly opposite each other on the color wheel, like red and cyan or blue and yellow. The complementary counterpart can be determined by moving 180 degrees towards or away from a specific color.
In theory, complementary hues generate the most significant differentiation and steadiness, enhancing the visual appeal of color schemes. Subsequently, we will explore how complementary colors can produce a hue's contrasting counterpart.
Analogous Colours
If three hues are found adjacent on a color wheel divided into 12 parts, like yellow-green, yellow, and yellow-orange, they are considered analogous. The complementary hue of a specific shade is determined by adjusting it by 30 degrees either way.
Similar color selections are frequently calming and visually appealing. By opting for analogous colors, we can skip the task of manually picking random colors from the color wheel and verifying their compatibility for a harmonious look.
Let's now delve into the technical aspect, specifically various methods for generating color schemes with CSS, now that we have a solid grasp of color and design principles. We will utilize the HSL color model for straightforward and flexible color palette creation.
CSS SASS Variables for Color Palette Creation
While utilizing custom properties and calc for CSS is recommended in modern development, developers who are experienced with tools like Sass may opt for this approach as well. One of the main advantages of choosing a CSS preprocessor is the enhanced level of precision it provides compared to standard CSS.
Select a shade and generate a color palette exclusively using Sass variables:
$hue: 150;
Let's proceed with creating three functions that receive the $hue value and produce its complementary and analogous colors. We will implement separate functions for retrieving the neighboring hues to the left and right of the specified hue:
//
//Adding or subtracting 180 from the provided hue quantity can create a //complementary hue.
@function complementary($hue) {
@return $hue + 180;
}
//
// The right analogous neighbour of a given hue
// amount can be obtained by adding 30 to it.
//
@function rightAnalogous($hue) {
@return $hue + 30;
}
//
// The left analogous neighbour of a given hue
// amount can be obtained by subtracting 30
// from it.
//
@function leftAnalogous($hue) {
@return $hue - 30;
}
Calculate the contrasting and similar shades for the $hue value of 150; established earlier in this section through the following Sass functions:
$hue: 150;
$hueAnalogousV1: rightAnalogous($hue);
$hueAnalogousV2: leftAnalogous($hue);
$hueComplement: complementary($hue);
Our primary, secondary, and highlight colors can now be generated using one of four different hue values. Below is the method to specify each of these color values by adjusting the saturation and lightness HSL parameters according to their specific purpose:
$primaryColor: hsl($hue 30% 90%);
$secondaryColor: hsl($hueComplement 25% 20%);
$accentColor: hsl($hueAnalogousV1 50% 50%);
The alternative shade should provide a strong visual contrast with the main color, which is predominant in the majority of the screen space. This secondary color is specifically chosen as it complements the primary hue in the most effective manner.
Any comparable hues we produced earlier can function as our accent shade provided that the saturation level is sufficiently high to maintain the accent suitable for emphasizing specific details.
Finally, we may opt for darker shades of our primary color to embellish borders and dividers. Similarly, lighter variations of our secondary color could symbolize less prominent text components such as captions and tags.
$primaryDark500: hsl($hue 20% 85%);
$primaryDark600: hsl($hue 20% 75%);
$secondaryLight500: hsl($hueComplement 5% 30%),
$secondaryLight900: hsl($hueComplement 5% 95%),
In the previous section, we denoted the relative lightness and darkness of a color using values 500, 600, and 900. This assists me in recalling the importance of a particular color value.
Careful selection of complementary colors to pair with the accent color is a wise choice, given that the accent color serves as the background for prominent elements such as CTAs.
$accentColor: hsl($hueRightAnalogous 40% 40%);
$accentColorLight900: hsl($hueRightAnalogous 40% 95%);
$accentColor2: hsl($hueLeftAnalogous 40% 40%);
$accentColor2Light900: hsl($hueLeftAnalogous 40% 90%);
Utilizing CSS Variables and HSL to Create Color Palettes
This approach basically involves substituting the Sass functionalities in the prior approach with CSS variables. Utilizing the calc CSS function allows us to perform calculations. Nonetheless, this does not afford us the Don't Repeat Yourself (DRY) principle that we benefited from with Sass.
We can continue to benefit from the benefits of this method by integrating Sass with it during the development process. For the sake of simplicity, I will not incorporate Sass in this illustration. However, as a practice, you can opt to merge Sass with this method:
:root {
--hue: 300; /* Let's try a different hue this time */
--hueComplement: calc(var(--hue) + 180);
--hueRightAnalogous: calc(var(--hue) + 30);
--hueLeftAnalogous: calc(var(--hue) - 30);
}
As illustrated in the image presented, it is necessary to manually identify both complementary and analogous colors. The subsequent procedures align closely with those outlined in the prior method, with the exception being the utilization of CSS custom properties such as var(--hue) in lieu of Sass variables.