CSS Colour Tips & Tricks


CSS Colour Tips & Tricks

Importance of Colour

If you're adding colour to your site, you're doing it for a reason. Colour evokes an emotion onto the viewer. Want to make them hungry or angry? Show them a lot of red. Want to make them uncomfortable? Show them yellow. Want to make them feel powerful? Show them green. Calm is blue, sad is black, important is purple, etc. Colour has extreme power in the world of design, regardless of if it's printed or digital. You can make your reader feel something without even saying something if you use the right colours.

The meaning of colours change meaning too. Thirty years ago, if something was "green: it was rotten and bad. Think of slime, goo, mould, rotten spores, all that gross stuff. Now "green" means "nature". You want to "be green". You want to use "green shopping bags" and use "greener" chemicals. I was told 7 years ago that "green" was just a fad and that soon it would go away. It didn't go away, but now it's so ingrained in our culture that we don't notice it anymore.

It's also important to consider your audience. In the West, black signifies the end of something and white signifies the beginning (life and death, day and night, etc). In the East those colours are reversed. Black symbolizes life and white symbolizes death. It's important to know a bit about the colour schemes of the culture you're talking to.

Colour can also be viewed differently by people who are colour-blind. Remember that just because it looks easy to read for you, it might not be for everybody. To better illustrate this, think of two different contrasting colours. There can be a huge difference between readability if colours don't contrast enough:

Another pro-tip is not to write on black, unless you're writing very short sentence. Reading on black strains your readers' eyes and they are less likely to finish reading what you have to say. There's nothing worse than making your readers strain to read what you have to say because of the colour scheme on your website.

Types of Colour

There are 4 ways to select your CSS colours: by name, by hex, by rgba or by hsla.

Colour Names

If you talk to a painter, they'll say to never use paint straight of the tube. If you're painting with black, you'll want to mix it with greens, blues or purples. If you're painting with white, you'll want to mix it with light blue, pink or yellow. CSS colour names don't have this flexibility. If you want black, you say "black". If you want red, you say "red". Sometimes you can even use words like "lightblue" and "cyan", but without controlling the shades in those colours, you have no idea what you'll be getting.

CSS names are often used for "web safe" colours, like red or blue or black or white. They're not good for complicated colours. For that, we'll need to use something a little more complex.

Hex

The most common way to select your CSS colours is via hex values. Hex, or "hexadecimal", values are a three or six digit string following a hash or pound sign. They can either be like this #000 or this #000000. The abbreviated hex code takes the first, third and fifth digits of the full hex code. Not all hexes can do this.

RGBA

The "RGB" in "RGBA" stands for "red, green and blue". Mixing these colours of paint in a paint can creates a new colour, and the same goes for CSS. These numbers go inside brackets.

This is great, but overtime developers needed colours to be transparent. While CSS has allowed us to make things transparent since IE's alpha filters, those effected the entire element and not just the colour. CSS's opacity had the same problem. To solve this, developers used partially transparent coloured .pngs. CSS3 addressed this issue by adding the "A" into "RGBA", which stands for "alpha".

Today, RGBA is well supported (96.79% as of October, 2017), but some users still have older browsers where it doesn't work. To fix this, simply have a default colour declared before it.

HSLA

While RGBA is similar to mixing paint, HSLA is similar to mixing light. The "HSL" in "HSLA" stands for "hue, saturation and lightness", while the "A" stands for "alpha". This is the least common CSS colour type, and the most complicated. When using HSLA, the first digit is an integer, the second and third are percentages and the fourth is either an integer or a float.

I never use HSLA values when I code

What's next?

CSS3 has been standardized for years now and these four methods are almost universally supportive. In the future we will start seeing other colour types as well, such as hwb (Hue, Whiteness, Blackness), cmyk (Cyan, Magenta, Yellow, Black) (like your printer colours!), and Ncol which is the W3School's idea for natural CSS colours. There's no word yet on if these will support alpha values yet either.

Which CSS colour types do you use? Let me know about it in the comments below!

 

 

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close