0
When creating and building web designs, the designers apply various tools to perform their tasks. One of the most commonly used applications is Figma – the collaborative interface design tool that enables specific adjustments for making the designer’s life easier.
The creation of colour styles prompts successful tasks performing. The application of one graphic palette helps to unify the various components and presents them as the parts of the whole.
It is simply not enough to save several colours and use them later in the design for effective work. Each colour should have its own function. With this article we will run you through the required steps, this will enable you to line up the basic graphic palette and separate it into functional groups.
Such a scheme simplifies the designer’s workflow by (a) helping you to navigate among the colours and track them; (b) separates the colour composition into groups and creates a distinct scheme and (c advances the selection of additional colours.
Step 1 – Choose the colour model
The first thing you should choose is the colour model. It is possible to pick colours that look similar, though it is much more convenient when you have a strict reference system. We apply the HSL model in our activities, along with Hex, RGB, CSS, HSB options.
The HSL (hue, saturation, lightness) model serves as an alternative to the RGB colour model. It was designed specifically for human visual perception to make the reading and application of colours easier compared to other models.
To convert this definition to a simpler example, we will find such adjustments in this model.
Hue – is the gradation of pure colour. Namely, what a person understands as the colour name: red, blue, yellow, etc.
Saturation – is the point defining the deepness of a colour.
Lightness – is the level of dark and light in the colour.
The application of the HSL model has several advantages:
- The Hex code does not give us any information about the colour coordinates system. Using HSL, we can control each parameter with numbers.
Tip: Nevertheless, the Hex code is more convenient for transferring information about the colour in the text form. It is easier to copy and paste one figure than three.
- Comparing with the RGB model, HSL is more intuitive and aligns with the way we perceive colours.
- It is easy to build monochrome colour schemes with the help of the HSL model.
Step 2 – Build the basic colour groups
Each product has its specific colours, e.g. brand colours, primary colours array, or state colours. Below we describe one of the possible ways that you can build the colour system for any project.
Black & White
If choosing black and white colours for the colour system, we prefer building them with the following criteria:
It is better not to choose Black as simple #000000. Apply a very dark decoloured tone of blue or red. This will bring more individuality to the final product. Based on the specifics of the black colour (its ability to absorb light), the users will not see any difference from the classic black.
This is only a recommendation, not a must but should be followed on occasion.
The colour White on the other hand is completey different, #FFFFFF is the classical white that should be applied. As you can see in the example, even the slightest adjustment in Saturation and Lightness can make the colour change significantly. It looks dirty and can influence the visual perception of other colors and perspective.
Primary colour
Choose the primary colour from brand colours. In the interface, it serves as the colour of accents and active elements. The products can have several active colours that become secondary, but they follow the same rules as a primary ones. Generally it is sufficient to have one or two such colours.
It is possible, and in some situations an inspired choice, to incorporate the colours of the company’s logo to follow the general mood of the company. This colour is used in CTA elements, that is why it should stick out.
State colours
These are the functional colours that inform users about mistakes, warnings, or successful finishing of the operation.
Traditionally they are green for success, yellow for warning, and red for error. These colours established their interrelation in our minds with the mentioned states. In case you choose a red color to differentiate the successful operation, some users can misinterpret this signal and think that an error has occurred. The same thing can happen with the other two state colours. Though, the meaning of the colours should be revealed more deeply as you will find in our next article.
Step 3 – Create additional colour shades
Most probably using only the basic colours will be not enough to build an integral product to cover every facet when building the interface prototype. The next step is expanding the colour system with the monochrome colour array.
Changes according to the Lightness parameter
Using the example above, it is easy to see how to generate additional colours by simply changing the Lightness parameter. We took our Primary colour, increased our Lightness parameter and created new shades.
The same process is used for the black colour, resulting in various shades of grey.
Tip: If you apply the previous technique to a not fully Black colour, but to the dark shade of any colour, its light shade would be too Saturated for grey. In this case, we can lower the Saturation parameter to make grey more neutral.
Changes according to the Hue parameter
Using this step, we merely build the colour system for a future project. But there is one method that will help to make the graphic palette more vivid.
As stated in the table, different colours with different Hue vary with Luminance parameters. Roughly speaking, the yellow colour will seem brighter than green, and green will be lighter than dark blue. That is why the colours with high Luminance will appear to be better in light shades, and with low Luminance in dark ones.
If to differentiate our Primary color, according to this method, we get the following picture:
Step 4 – Arrangement of colour style names
Our scheme can be considered ready to use, and now comes the time to start the creation of styles. One possible difficulty is thinking up new names for such an array of colours.
The names of the colour groups we apply will make the first part of the name. For the shades inside the group, we can use the Lightness numerical value. In case we separate parts of the name with the “/” symbol (e.g. Primary/50), Figma will combine these colours into groups. At the same time, it is possible to create subgroups inside already existing groups by using an additional slash.
In such a way, we shortly described the definition of the HSL model and its primary differences from other models, the basic colour groups, the creation of additional shades, and the ways to structure them. By following these 4 steps, a designer can advance their work processes, and make the design more consistent and clear for users.
Wish to learn more about useful tips on making the development process more effective – visit our design section from the blog.
4
