What colour is that on my website?

The following two tabs change content below.

Donncha Hughes

Sole Trader/ Proprietor
Donncha Hughes is a mentor, trainer and business advisor. I deliver group and one to one training on Wordpress. My background is assisting business with development of marketing, business plans, grant and finance applications. See www.startuphughes.com for more...
Colour Swatches

what colour would you like – click to enlarge

 

This is a short blogpost which answers the question in the title: What colour is that on my website? by explaining how to add a tool referred to a browser extension to Firefox and Chrome which idenitifies the RGB or Hex colour code of any pixel displayed in your browser (on your website). Consistent use of colour is recommended in both an online and offline context for your branding.

 




What are colour codes?

RGB to Hex Color Converter

RGB to Hex Color Converter from Google Search Result

 

What are HEX and RGB Colour Codes

RGB and HEX provide precise colour information for computers based on a colour’s mixture of red, green and blue color values. These colour codes are used by website (in the form of CSS and HTML) and also by printers.

Hex: Uses a mix of 6 numbers and characters
RGB: Uses 3 sets of 3 numbers which have a range of 0 – 255

There are several online tools for converting HEX to RGB.

When to use a Color Code in WordPress

Some themes allow colours to be selected for fonts, menus and other elements such as headings. It would be recommended that a consistent colour scheme be selected.

Example: I recently installed a Cookie Plugin that pops up with a message to let a newly arrived visitor to my website that I use Cookies (for Google Analytics etc). The colour of the pop up container is configurable to match the colour scheme of the website. I was able to select the exact same colour of the menu navigation – not just guess it from the colour selector that you may be familiar with in PowerPoint and Word. The hex value is #1E1EA5.

Cookie Colour Picker

Use a Colour Picker Tool in your Browser

The pop up box in the image above is from a browser extension or add on tool called ColorPicker. Here are the instructions to install in just a few minutes in Firefox.

  1. Google ColorPicker from within FirefoxFirefox colourpicker Add On
  2. Follow the link and on screen instructions to add the Add On to Firefox
  3. A new icon (see image below – pink circle) will appear in the top right of your Browser
    Firefox colourpicker Add On Icon

It works the same for Chrome users (doesn’t look as neat but works fine)

  1. Google ColorPicker from within Chrome
  2. Follow the link and on screen instructions to add the Extension to Chrome

 

chrome colourpicker tool extension

3. A new icon will appear in the top right of your Browser

chrome colourpicker tool extension

If you click on the new icon in your browser menu bar the Colour Picker tool will pop up – to display the RGB and Hex values.

Advanced Colour Options

Using Html and CSS you can select colours for elements of your theme such as links, footers and navigation menus. This is a bit more complicated. Have a read of Post #.2 and #.3 to get you started.

 

Here is the HTML for changing the colour of a single link to say Pink.

Links are added using the <a href=”http://www.startupwebtraining.com/wordpress-terms/” target=”_blank”><span style=”color: #ff69b4;”>Visual Editor</span></a> it is very similar to adding links in your email package.

And here is what  the CSS for changing the colour of a Navigation Menu might look like.

.main-navigation { 
background-color: #ffab1f;
}

This would be added as Custom CSS in the Theme Options area as explained in the aforementioned posted which are all listed below.

 

More WordPress Tips

This is article #.4 in a 7 part series of WordPress Tips or Hacks

  1. Page IDs in WordPress – To find Quickly using Firefox and Chrome
  2. Common uses of Html in WordPress – Links, Email and YouTube
  3. Custom CSS – site wide changes to graphics such as links, menu and footers.
  4. Simple Colour editing on your website
  5. How to add an Animated Gif
  6. How to add a Tweet
  7. How to use Pay with a Tweet

As always I hope you found this article of benefit. Have great fun ‘colouring’ your website!

regards

donncha

@donnchadh on Twitter (shares and comments on social media appreciated)

Donncha Hughes is a mentor, trainer and business advisor. I deliver group and one to one training on Wordpress. My background is assisting business with development of marketing, business plans, grant and finance applications. See www.startuphughes.com for more...

Posted in Blog Startup Web Training, Wordpress Tagged with: , , , , , ,