The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up. It is easy to say web design is dead as many have for years but the reality is that successful businesses don’t rely on Wix site builders or Facebook for their online presence and if they do it is a big risk. For any business wanting to stand out from its competitors and actually rank well on Google, web design is more alive than ever.
That is why the importance of Colour Management settings in Photoshop Figuring out how to manage colour is not always easy. The use of colours in web design is something that cannot be underestimated. The most important thing to remember when it comes to colours in web design is to use what will appeal to the visitors, not just to you.
Richard Bray helps you to control your colours using Sass.
Amongst the multitude of problems front end developers encounter during site creation, managing colours is definitely on the very low end of the list, possibly not even on the list. Nevertheless, for those not using website templates, I believe having good colour management during development of your website layout will help stick to a theme and will not only prevent your site looking like a rainbow, but also prevents different shades of the same colour being used (which has happened to me quite a few times).
This article will go through seven things I regularly do to manage colours on my web based projects.
01. Putting all your colours on a style guide
First thing’s first, before you crate a site you should have a basic style guide or colour palette with all the colours you plan to use. This doesn’t mean you can’t add colours to the site as you develop it but it will help you keep track of colours you already have so they are not repeated with slightly different shades. Excluding black, grey and white it’s best to have no more than five different colours, of course this is a general rule and there can be some exceptions.
02. Use one file just for colours
One of the benefits of using CSS preprocessors is the ability to separate styles into many different files and combine them to output CSS to one file. With that in mind I believe it’s best to have one file just for the main colours of your site as well as any variations of them. This not only helps with locating colour variables but can also be a regular reminder of what and how many colours are being used.
03. Colour variables
It’s best to give the main colours of your site variable names that correspond to the colours they actually are or what they look like, (also with custom namespacing if you’re that way inclined). So the yellow for a McDonald’s site will have the variable name
$mc-yellow. For HTML colour names like AliceBlue, DeepPink and the other 140 colours, these don’t require custom variable names as they are already easy to remember. If you are using a library for colours that already contain variable name like Colour me Sass, you could make your custom variable equal the library variable, so
$mc-yellow = $yellowGold.
04. Using Sass maps for colours
Out of all the tips mentioned in this article, I will consider this one optional as it is dependant on the way you write CSS. Sass maps make it easier to assign different class names to different colours and their relevant CSS property, very similar to looping in most programming languages. For example, if you would like a background colour class for all of the colours that are used on your site, this is the best and most clean way to do it.
This method is especially helpful for those who write Atomic CSS.
05. Use Sass for opacity, lightness and darkness
For slight variations to your main website colours 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 colour variable. For opacity use rgba, for lightness and darkness use their respective functions.
I am fully aware that Sass also contains functions to mix colours 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. Of course I recommend you give your colour variations custom variables to make it easy to remember them. See full story here…