Not many web developers truly put their attention on managing colors. This makes it becomes definitely on the very low end of the list, in fact, it is possibly not even on the to-do-list, while having a good color management on your website will prevent you from different shades of the same color being used. So, if you are web developers or web designers who find that the knowledge of color is necessary for your site, you can read further information about it below.
1. Putting all Your Colors on a Style Guide
Before deciding to create a site, you better prepare to have a basic style guide or color palette which contains all colors that you plan to use. It doesn’t mean that you can’t add colors to the site as you develop it but it will avoid you to repeat slightly different shades. Moreover, you better consider for not having more than five different colors, excluding black, grey and white as a general rule, but there will always be some exceptions for it.
2. Use One File just for Colors
One of the benefits that you can have when you use CSS preprocessors is that it will separate styles into many different files and combine them to output CSS to one file. Due to this, it is better to have one file just for the main colors of your site as well as any variations of them. This not only helps with locating color variables but can also be a regular reminder of what and how many colors are being used.
3. Color Variables
It’s a good idea to give variable names to the main colors that correspond to the colors they actually are or what they look like. So the yellow for a McDonald’s site will have the variable name $mc-yellow. For HTML color names like AliceBlue, DeepPink and the other 140 colors, these don’t require custom variable names as they are already easy to remember. If you are using a library for colors that already contain variable name like color me Sass, you could make your custom variable equal the library variable, so $mc- yellow = $yellowGold.
4. Pigments for Atom
Another way to manage color is by using pigments. Pigments simply highlight a color string, hex or otherwise, with the actual color it’s representing. Even though, it seems very basic but it is actually really useful when it’s used with Sass. The plugin also highlights Sass color variables with its respective color wherever it is placed in the code, even in different files. It also changes colors instantly based on the opacity, or whatever sass function that is applied to it.
5. Use Sass for Opacity, Lightness and Darkness
For slight variations to your main website colors like lightness, darkness, and opacity instead of specifying another string if HEX values, it’s best to use the functions that come built into Sass along with your custom color variable. For opacity use rgba, for lightness and darkness use their respective functions. I am fully aware that Sass also contains functions to mix colors as well as adjust hue and saturation, you are more than welcome to use these but I am yet to find a reason for them on my projects.
Sass also contains some functions to help you mix colors as well as adjust hue and saturation, so you can use this function wherever you need it on your projects.