Here we explore the different types of colour values and how to add colour, gradients and shadows to elements.

CSS Colour (color)

The most common way to add colour is to use the color property to apply colour to the foreground object (text).

The above CSS would style all paragraph texts in blue.

To change the colour of an area we use background-color property.

This CSS makes the background colour of our paragraph text light grey.

We can also change the colour for the border of an element using border-color property.

The colour of the border can also be defined in the border property, as illustrated in the last section border:2px solid blue;.

Colour types

A number of different colour values can be used in CSS.

Named colours

We have already used the named colours, blue and lightgray in the examples above. CSS recognises 140 named colours, each with its own unique name.

16 named colours were first introduced in 1999 with practical and simple colours like red, blue, black and white. As more colours were introduced the names became more complicated and colours more obscure, such as aliceblue, lavendarblush and palegoldenrod.

Named colours may be limited to 140 colours but we can specify millions of colours if we use RGB, RGBa, HEX, HSL or HSLa colour values.

RGB

RGB colour is the mixture of Red, Green and Blue coloured light.

Each of these three colours can have a value from 0-255 which defines the intensity of the colour. This combination of red, green and blue colours allows us to specify 16,777, 216 colours.

Red is produced when the colour values are set to 255, 0, 0, blue when colours are set to 0, 255, 0 and green when colours are set to 0, 0, 255.

White is produced when all three colour values are set to 255, 255, 255 and black when the values are set to 0, 0, 0.

The above RGB colours values display the same colour blue and light grey as the named colours used in the previous example.

RGB colour values can also be added as percentages, the below percentage colour values produces the same blue and light grey colour.

RGBa

RGBa uses the same colour values as RGB but adds an additional value a, an alpha channel to specifiy the opacity of the colour. The alpha value is a numberical setting from 0.0 (transparent) to 1.0 (opaque).

The above CSS would display a 50% transparent blue colour and the background light grey colour would be 20% of the full strength colour.

HEX

HEX colour uses hexadecimal numbers to define the red, green and blue colour values. HEX colour is specified using the hash symbol (#) followed by a combination of six numbers (0-9) or letter (a-f). The first two digits represent the red colour, followed by two blue and two green digits color:#RRGGBB.

The above HEX colours produce the same blue and light grey.

HEX colours can be written in shorthand when a HEX number contains three double-digit numbers, for example, black #000000 can be written as #000 and white #fff is the same as #ffffff.

Both the above colour values display the same blue colour.

HSL

HSL defines a colour using Hue, Saturation and Lightness.

Hue is the degree of colour on a colour wheel (0 to 360 degree). Red is 0 or 360 degrees, green is 120 degrees and blue is 240 degrees.

Saturation is the intensity of the colour as a percentage from full colour (100%) to grey (0%).

Lightness is displayed as a percentage from white (100%) to black (0%).

Here we use HSL to define the same blue and lightgray colours.

HSL is a much more intuitive colour system than HEX and RGB. Once a colour is defined, it can be made lighter and dark simply by adjusting the L (Lightness) values and by altering S (Saturation) values we can make the colour more intense or muted.

HSLa

HSLa includes an alpha channel Hue, Saturation, Lightness and alpha, which functions in the same way as the RGBa alpha channel, where 0.0 is fully transparent and 1.0 is opaque.

Here we use HSLa to define the blue with 50% transparency and lightgray colours with an 80% transparency.

Which colour values should you use?

Each of the colour values has its own benefits, so the answer depends on what you are using the colour for.

Named Colours – These can be quick and easy to use when developing a small project or testing a concept.

HEX  – With over 16 million colour combination this is great for solid colours but it has its limitation as it doesn’t allow for transparency.

RGB/RGBa – RGB has all the advantages of HEX but if we use RGBa then we also have the added benefit of transparency.

HSL/HSLa  – is much more intuitive than RGB and HEX as you can adjust the lightness and darkness or saturation values for a colour in order to create matching shades and tones. Additionally, HSLa allows for transparency which makes it a great alternative to RGBa.

Gradients

We have looked at adding solid colours to text, backgrounds and strokes,  now we look at how we can use gradients to smoothly blend two or more colours using CSS.

Gradients smoothly blend one colour to another, the values of these colours can be solid or transparent, the direction of the gradient and the shape of the gradient can be defined using CSS.

Linear Gradients

Linear gradients blend one colour to another in a linear direction. The syntax for a linear gradient is background:linear-gradient(direction or angle, start colour,..., end colour). The default angle for the gradient blend is top (start colour) to bottom (end colour).

The result shown above is a gradient of red to blue on a 45-degree angle.

Gradients can have more than two colours by simply adding more colours to the linear-gradient. For example, background: linear-gradient(45deg, red, blue, green, yellow); will create a 45-degree gradient of red to blue to green to yellow, each colour will be spaced equally across the element.

Gradients colours can have specific start and end positions which allow for more control over how the linear gradient will look. These positions are added after the colour value and can be defined using absolute or relative values.

The 90-degree gradient above uses three relative values, where red appears at 10%, blue at 30% and cyan at 60%. From 0-10% the colour is red, likewise, from 60-100% the colour is cyan.

Transparent Gradients

Gradient can use transparent colours, which results in some interesting visual effects, especially when transparent gradients are placed over other elements or adding multiple gradient on top of each other.

The above element features three linear gradients placed on top of each other. Each gradient uses a different angle. RGBa colours are used for the gradients with the start colour being solid and the end colour being clear. The 50% value for each end colour sets the transparency to the centre of the element, creating this interesting visual blend of colours.

Repeating Linear Gradients

Gradients can be repeated using the repeating-linear-gradient property. Repeating linear gradients needs positional values adding to each of the repeating colours. The values and positions of these colours are then repeated across the gradient.

The above repeated linear gradient includes the start and end position for the first three colours (red, blue and cyan) which are defined in pixels (px). These colours are then repeated across the whole rectangle.

In the above example, the end position of one colour and the start position of another colour are the same which makes the gradient appears as a series of solid colour.

Radial Gradients

Radial gradients define the colour gradient from the centre to the edges of an element. The syntax is background: radial-gradient (shape size at position, start colour,..., last colour);.

The gradient shape is either an ellipse or circle. The ellipse is the default setting which creates an elliptical gradient that matches the shape of the element. The circle shape creates a gradient with a consistent circle blend from the centre of the element.

Like linear blends, radial gradients can include multiple colours by adding more colours to the radial gradient property background: radial-gradient (circle, colour1, colour2, colour3,...);.

The size of the gradient can be controlled using the closest-side, farthest-side, closest-cornerand farthest-corner to define where the gradient will end.

The position of this blend can be altered by defining the horizontal and vertical start position for the centre of the radial-gradient.

The above radial-gradient sets the gradient to the farthest-corner and positions the starting point as 10% from the left and 20% from the top.

Repeating Radial Gradients

To produce a repeating radial gradient we use repeating-radial-gradient, which defines the repeating gradient from the center of the radial gradient.

Here the centre of the repeating-radial-gradient is a circle positioned at 40% from the left and 80% from the top of the rectangle. The radial gradient repeats red and blue from the center.

Shadows

We can add depth to our elements using the text-shadow and box-shadow properties.

Text shadow

The text-shadow property is used to add shadow to text elements.

The syntax for this is text-shadow: horizontal-position vertical-position blur-radius color. Adding positive values to the text shadow positions will position the shadow to the right and down, negative values will position the shadow left and up. Blur radius defines how soft the shadow is, by default the text shadow is a solid copy of the text.

The three examples above show how the shadows can be defined to create different visual effects.

Box Shadow

The box-shadow property is used to adds shadow properties to an elements.

The syntax is box-shadow: horizontal-position vertical-position blur-radius spread color.  Most of these properties are similar to text shadow, horizontal-position and vertical-position are used to define the position of the shadow, blur-radius  is used to define the softness of the shadow and spread is used to define the size of the shadow.

The above example adds a solid blue shadow 5px to the right and 5px from the top the white block.

This example uses a transparent shadow defined by the alpha colour of rgba(0,0,255,0.5) and uses a 5px blur to create a soft edged shadow positioned 10px right and 10px down.

This example uses a more transparent shadow rgba(0,0,255,0.2) with a larger blur and a 5px spread which increases the size of the shadow.

Box shadow can also add a shadow to the inside of the element by adding inset to the box-shadow  syntax.

The above examples show an inset box with a 15px soft blue shadow, this is inset 5px from the left and 5px from the top.

This section introduces colour and explores the potential with some basic examples. and more examples will be used in the following sections.

In the meantime here are some great CSS colour resources and tools to explore:

htmlcolorcodes.com
Use this tool to explore your perfect colours and create your own colour palette with colours in HEX, RGB and HSL values.

cssgradient.io
Make your own gradients with this free awesome online tool. Make sure you  explore some of the other great resources and examples they have.

css3 patterns
Here is a mind-blowing gallery showing what is possible applying multiple  gradients to create some elaborate background patterns.

shadow generator by mozilla
Experiment using shadows and altering, colour, positions, blur softness and size. Click the + button to add another shadow, yes – multiple shadows… have fun.

Next step 
CSS – 4 – Border