Inspect Element: A handy tool

August 15 - Alex Fallavollita

Did you always think the only way to see a colour change in your text or background colours website design was to open the code and change it and then refresh your browser. I am here to tell you it is not.

Some would have heard of the inspect element tool, its accessible from a right click in both Firefox and Chrome.

In this example, I’ll show how to change the colour of the contact heading on Mudbath's own website.

Step 1. Access inspect element

inspect element is only a right click away

Step 2. Find the source code and locating the colour

finding the source code

The colour tag is under the styles tab in chrome and rules tab in Firefox

Step 3a. Changing the colour based on set hex value

Today feels like a pink day so I’m going with #ff0055

changing the text to pink

Note: all colours used in web design have a hexadecimal value proceeded by the hash symbol. The 6 values refer to the amount of red, blue and green used a single colour. They are defined by digits 0-9 and A-F. The first 2 values refer to the amount of red, second 2 are for green and final 2 for blue.

Eg. Red is # FF0000 (uses full values of red and none of green and blue)

Yellow is #FFFF00 because red and green light make yellow (yes colour in web design is different to mixing paint in primary school)

White is #FFFFFF as it uses all light while black is #00000

There are quite a lot of colour pickers out on the web that you can play around with.

Step3b. Picking from the list. (In chrome)

Alternatively if you clear the hex field a drop down list will appear with colours name, these names are predefined to a hex value. In this example I scrolled down and chose orange.

picking colour from a drop down”>

<img src=