Tuesday, 7 June 2016

What colour is that?

Ever wondered what the exact colour of something is? Perhaps the colour a company uses in its logo, or a great-looking shade used on a website? I wonder this a lot! Why? Because if I’m creating something for a school, university or other client I like to use a colour palette that is meaningful to them. Even if it’s just for customising the headings in a document I’m writing, or for setting the colour scheme on a Google Form or Site.

It’s actually really easy to find out and use exact colours once you learn a few tricks. In this post I’ll share my secrets with you!

Tip 1: Understand hex colour codes

Hex codes are six-digit hexadecimal numbers used to represent colours on the web and in applications. They also start with a #. For example, the hex code for white is #ffffff and black is #000000. The hex code for this colour is #ff3399.

Once you know the hex code for a colour, you can use it to tell most applications what colour to use. You can use it to customise the colour of text in Microsoft Word or Google Docs, to set the fill colour of shapes in Microsoft PowerPoint, Google Slides or Drawings, to customise the look of Google Sites and to colour individual elements in graphic or web design applications (Photoshop, Lucidpress etc.).

Tip 2: Finding hex colour codes

There are many websites that list hex colour codes. The W3Schools HTML Color Picker is one I use a lot. However, if you’ve already got the colour (e.g. in a logo or on a website) and just need to know the hex code, I suggest you install and use a handy Chrome extension called ColorPick Eyedropper.

Here’s how to install and use the ColorPick Eyedropper extension:

1. Visit ColorPick Eyedropper in the Chrome Web Store.
2. Click the Add to Chrome button, then Add extension. Once the extensions has finished installing, you will see a new colour wheel icon appear in the top right corner of Chrome. 

3. When you find a colour you like, click the extension icon. Hover your mouse over the colour you like and click to select it. A pop-up box will display the hex code for the selected colour. 

4. Copy the hex code (Ctrl-C on Windows, Cmd-C on Mac) and start using it!

Tip 3: Using hex colour codes

Here’s how to use hex codes in Google tools. Most applications have a similar feature, so keep an eye out for ‘custom’ or ‘more colours’ buttons in the tools you use.

Google Docs, Slides and Drawings

1. Select the text, shape, line or whatever other element you want to colour.
2. Select the appropriate colour button in the toolbar. For example:

3. Click Custom.

4. Enter the hex code and click OK.

Google Sites

You can use hex codes to change the colour of text and tables in Google Sites and to customise the look and feel of your site.

For text:
To use hex codes to change text colour in Google Sites, you need to enter the code in the HTML of the web page. Here is the quickest way to do it.
1. Put the page in editing mode and select the text you want to colour.
2. Click the text colour button in the toolbar and select any colour.
3. Click the <HTML> button in the toolbar.

4.  Find the section of HTML that includes the text you want to colour. Change the hex code in the <font colour=> tag to the hex code you want to use.
Tip: Be sure to enclose the hex code in double quotation marks.
5. Click Update when you are done.

For tables:
Check out this post for instructions on adding a background colour to a table using hex codes.

For site customisation (background, menu etc.)
Google Site owners can customise the colours used in their Google Site. This includes the background colour, menu buttons, headings and more.

1. Click the Cog button in the top right corner of the Google Site and select Manage Site.
2. Choose Themes, Colours and Fonts from the menu on the left.
3. Choose the site element you want to customise (e.g. Entire page, Site header etc.)
4. Where appropriate, click the paint can icon to change the colour of the element.
5. Enter the hex code at the bottom of the colour picker box. The colour updates instantly.
6. Click Save to change the customisations to your site.


Post a Comment

Popular Posts