Cascading Style Sheets allow you to set the colour of your website text, background and borders. This CSS tutorial will show you how the different colour values work, and how to apply them. We’ll cover RGB, HEX and HSL values, as well as saturation and lightness. Understanding colour values will help you to enhance the appearance of the websites you build, and follow your clients’ brand identity.
A quick note before we get started: When coding CSS colours, always use the USA spelling, i.e. color. Whether you use UK/ SA or US spelling standards in your text will depend on your client’s preference.
RGB values
RGB stands for Red, Green and Blue – the three primary colours for web and digital design. RGB value indicates the red, green and blue intensity that make up a specific colour. Each of these three intensity values sits on a scale of 0 to 255 – 0 being the lowest intensity, and 255 being the highest.
As an example, set up a simple HTML folder and document as you have done in previous tutorials. Enter the following code, with two short paragraphs of “dummy text”, as follows:
<!DOCTYPE html5> <html> <head> <title>Learning How To Use CSS</title> </head> <body> <h1>My CSS Colour Value Test</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </body> </html>
When you view your web page in the browser, it will look like this:
Now, you can add a style to each heading and paragraph in your document. Your code must appear in the opening tag of the text you want to style.
Add a different RGB colour value to your heading and both paragraphs, as follows:
<!DOCTYPE html5> <html> <head> <title>Learning How To Use CSS</title> </head> <body> <h1 style="color:rgb(255, 0, 0);">My CSS Colour Value Test</h1> <p style="color:rgb(0, 255, 0);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p style="color:rgb(0, 0, 255);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </body> </html>
When you refresh your browser, you’ll see the changes reflected in the text.
See more RGB values here for future reference.
HEX values
HEX or hexadecimal values sit on a scale from from 00 to FF, with 00 being the darkest and FF being the lightest (e.g. the three primary colours red, green and blue combine to make “white light”).
The code is known as a hex triplet, representing three separate RGB values that specify the intensity of the component colors: (#RRGGBB). The code begins with a hash sign (#) followed by six hex values, or three pairs of hex values.
For example, to code the colour black, you would use the HEX code #000000 which is the equivalent of the RGB code (0, 0, 0). The colour white would have a HEX value of #FFFFFF, the equivalent of RGB (255, 255, 255).
Similarly, to code the colour red, you would use the HEX code #FF0000. The RGB value is (255,0,0). Green would be #00FF00 (0, 255, 0) and blue would be coded as #0000FF (0, 0, 255).
Edit your code to include HEX values instead of RGB values, as follows:
<!DOCTYPE html5> <html> <head> <title>Learning How To Use CSS</title> </head> <body> <h1 style="color:#00FF00"">My CSS Colour Value Test</h1> <p style="color:#0000FF"">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p style="color:#FF0000">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </body> </html>
Your refreshed web page will reflect the colour changes.
These are quite simple examples, but when you’re looking for a very specific colour, you can use a colour picker tool to find the code for the perfect shade.
HSL values
HSL stands for Hue, Saturation and Lightness.
- Hue is a degree of colour on the colour wheel, which goes from 0 to 360 degrees. On the colour wheel, 0 is red, 120 is green and 240 is blue.
- Saturation can also be described as the intensity of a colour. It is written as a percentage value: 100% is pure, fully saturated colour. 50% is a shade of grey; the colour is half as intense but still visible. 0% is completely greyed out, meaning the colour is no longer visible.
- Lightness refers to how much light you want to give a colour. It is also written as a percentage, with 0% being black (no light), 100% being white (full lightness), and 50% sitting halfway in between at neither light nor dark.
So for example, a fully saturated shade of blue would be coded using the following HSL value: (240, 100%, 50%).
Edit your HTML page to include three different shades of blue, with different levels of saturation and lightness:
<!DOCTYPE html5> <html> <head> <title>Learning How To Use CSS</title> </head> <body> <h1 style="color:hsl(240, 100%, 50%)">My CSS Colour Value Test</h1> <p style="color:hsl(240, 50%, 50%)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p style="color:hsl(240, 25%, 85%)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </body> </html>
Your refreshed page will show the three different shades of blue:
For easy future reference, you can check out this list of HSL values online.
Background colour
You can also set the background color for HTML elements, using the syntax background-color.
Add three different background colours to your code. Use one RGB value, one HEX code and one HSL value.
<!DOCTYPE html5> <html> <head> <title>Learning How To Use CSS</title> </head> <body> <h1 style="background-color:rgb(255, 50, 100);">My CSS Colour Value Test</h1> <p style="background-color:#F0F0F0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p style="background-color:hsl(255, 40%, 70%);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </body> </html>
You will see the background colours have been altered once you refresh your web page:
Background colours and text colours can be written using RGB, HEX and HSL codes, but there is also a variety of pre-defined CSS colour names readily available to use. Here are some existing examples, which you can add to your headings, paragraphs and backgrounds:
<h1 style="background-color:Orange;">Orange</h1> <p style="background-color:MediumSeaGreen;">MediumSeaGreen</p> <h1 style="color:SlateBlue;">SlateBlue</h1> <p style="background-color:Violet;">Violet</p>
You can see an extensive list of pre-defined colour names and codes here.
Take your CSS knowledge further
If you’re looking to apply your knowledge of HTML and CSS to a professional coding career, you might be interested in registering for an online web developer bootcamp. These online courses can be completed in just six months, with qualified mentors to make your learning journey easier and more rewarding.
