- Business
Using the Inspect tool to change and view your website.
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 header on Mudbath's own website.
Step 1. Access inspect element by right-clicking your browser.
Step 2. Find the source code and locating the colour
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
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.
And there you have it!
You can play with your website's colours (and other elements) to your heart's desire!
***
Recommended Reading
***
Mudbath is a 40+ person digital product agency based in Newcastle, NSW. We research, design and develop products for industry leaders.
Need a new website, app or piece of business software? Get in touch.