Command Shift

Colour

Colour (or color in css) is absolutely fundamental and probably one of the things you explore the most when writing some css.

Your computer monitor is made up of thousands of tiny squares called pixels, as you might have heard before. When your screen is off, it appears black because it's not emitting any light. However, when you turn it on, the colour of every pixel gets expressed in a mix of red, green and blue.

color vs background-color

To an element, you can provide a foreground (color) and a background colour (background-color).

The color property allows you to specify the the colour of the text inside of an element, whereas the background-color is as self-descriptive as it sounds. CSS treats each HTML element as a box, as we'll discuss in a bit, so whichever colour you give to the background, it will fill the whole element's height and width.

If you don't specify a background-colour, then the background is transparent (not white).

Colour Definition

You can specify any colour in CSS in one of three ways:

  • RGB Values - where colour is expressed in how much red, green and blue are used to make it up:
h1 {
  color: rgb(100, 100, 100);
}
  • HEX Codes - which are six-digit codes represent the amount of red, green and blue in a colour, preceded by a # sign:
h2 {
  background-color: #ee33e8;
}
  • Colour Names - a set of predefined colour names that are recognised by the browsers:
h3 {
  color: DarkCyan;
  background-color: white;
}

You might also read about defining colours in values of hue, saturation and lightness (hsl). Hue, by definition, represents the colour itself. Saturation refers to the amount of gray in the colour (100% - no gray, 0% - gray). Brightness refers to how much black is in a colour, where at a minimum, the colour would be very dark. The way to set the property is as follows:

h4 {
  color: hsl(10, 100%, 50%);
}

Notice how saturation and lightness are defined as a percentage.

Contrast

When picking your colours, it is important that you consider the contrast and ensure that there is enough in between the elements to make them legible (specially when text is involved). This is particularly important when considering the accessibility of our website.

Here's a handy tool to check contrast.
Read more about color contrast here.

Opacity

CSS3 - the most current version - introduces the opacity property which allows you to specify the opacity of an element and its children. The value is a number between 0.0 (0%) and 1.0 (100%). In the css rules, opacity is defined as an alpha value, which basically means that you would have to add an extra a to your previous used rules:

color: rgba(100, 100, 100, 0.5);
background-color: hsla(10, 100%, 50%, 0.2);

Or add an extra set of characters to the end of our hex code:

color: #0080ff80;

Where #0080FF is the code for the colour, and 80 represents the hex value of an opacity.
Dont worry! You don't have to work all these numbers out on your own. There are loads of tools online that we can use to help us with this. One of the easiest ones to use on the go, is one built right into Chrome Dev Tools!

Let's have a quick look!

  1. On your page (or any page) in the browser (we are using Chrome, you may have to look up instructions for other browsers), right click and click 'inspect'.

  2. In the developer tools on the right, select an element in the DOM that has a colour set in the CSS.

  3. You should be able to see the CSS rules set for that element towards the bottom. If you hold SHIFT and click the little coloured square next to the colour property, you will see it switch between the different types of colour declaration!

Imgur

  1. Click on the colour without holding shift and a dialogue box should open, allowing you to make adjustments and see the updated hex code, or rgb value etc. Cool huh?

There are also a lot of resources online to help you work out codes for colours (just google hex colour picker or rgb colour picker), you can even install browser extensions that let you pick colours from websites that you like and get the code to use yourself.

Aside from working out the values, it can also be quite difficult choosing what colours to use. Here's a couple of other tools that will support you when the time comes to pick a colour, or a few of them, that tend to be a good match according to certain design principles:

  • Paletton, to grab a colour palette based on a combination principle (monochromatic, triad, etc.).
  • Coolors, which picks a random palette for you.
  • ColorSpace, where all you have to is to select the initial colour and the others will follow!

These will let you save pallets and get a nice feel for what goes with what.

On this page