🎨Color Palette
Color Naming System Convention
In design, it's common to use at least a few shades of the same color. Sometimes you encounter similar colors (e.g., two shades of blue), yet these colors are completely different from each other in their hues.
To keep the color palette of a website organized, it's necessary to group the colors and give them clear names, which are convenient for both the designer and the developer.
Option 1. Word naming
If you don’t have a lot of shades of color, it can look like this:
1️⃣ Base color + up to 3 shades lighter and darker (7 shades of the same color)
darkest-blue
darker-blue
dark-blue
blue (base color)
light-blue
lighter-blue
lightest-blue
This option is the easiest to understand and the most convenient to maintain, however, there are other options as well.
Option 1.1. Weaker - Stronger
An alternate naming method: the same logic, but different words.
blue-strongest
blue-stronger
blue-strong
blue
blue-weak
blue-weaker
blue-weakest
Option 2. Number naming
In rare cases, you may have a lot of shades of the same color. In this case, it is rational to use numbers.
2️⃣ A variety of shades of a specific color (10-11 shades)
blue-0 or blue-1 (the darkest color)
...
blue-2
…
blue-10 (the lightest color)
OR
Crazy option your designer gone wild
blue-0
blue-10
blue-15
…
blue-100
In both cases you have some base value and darkest/lightest values which are belongs to some vars which are easy to remember. In first type its darkest/lightest, in second - 0/10 (or 100).
First case is easier to use cause you always know the base color variable, in the second you have more choices (up to 11 if to use “0-10” and if you use “0-100” you can add variable like 15,25, so really a lot).
Where to edit?
On the Rig side first you need to set these variable in
📂 assets/css/src/_custom-properties.css
⚠️ Just don’t forget to add “color-theme-” before the color name for compatibility purposes.
💡 Sometimes during maintenance you need to add another similar color which does not fit existing system. Just add it as another color e.g. “blue-secondary”.
Color Variables Example
Last updated