RGB Colours

You may hear the term “RGB” when working with a print or web agency, so we thought it would be useful to provide some clarity on the subject since we have covered the subject of website colours recently.

What is RGB?

Simply put, RGB stands for RED GREEN BLUE colours.

It’s one of the most common colour modes used when graphics are created. RGB are eventually converted to CMYK mode when designs are required for print media.

All colours displayed on your screen have an RGB value. Some colours contain more red that blue or more green that red. RGB colours range between 1 and 255 for each RED, GREEN and BLUE value.  These values are combined and translated into a hexidecimal number or value where the first 2 sets of numbers represent red, the second set of numbers represent the green and the last set of numbers represent the blue. The hexadecimal number is the number that your computer understands so it knows how to interpret and ultimately display the colour correctly.

Here are a few examples – see if you can spot the pattern – remember the higher the RED, GREEN or BLUE value, the more of that colour is in the colour we’re trying to create.

Red

  • RGB Value: 255 0 0
  • Hexadecimal Value: FF0000

Blue

  • RGB Value: 0  0 255
  • Hexadecimal Value: 0000FF

Green

  • RGB Value: 0  255 0
  • Hexadecimal Value: 00FF00

Black

  • RGB Value: 0 0 0
  • Hexadecimal Value: 000000

White

  • RGB Value: 255 255 255
  • Hexadecimal Value: FFFFFF

Pink

  • RGB Value: 255 0 255 (a lot of red, no green and a lot of blue)
  • Hexadecimal Value: FF00FF

Orange

  • RGB Value: 255 204 0 (a lot of red, a bit of green and no blue)
  • Hexadecimal Value: FFCC00

Turquoise

  • RGB Value: 0 255 255 (no red, a lot of green and a lot of blue)
  • Hexadecimal Value: 00FFFF

Website Colours

Colour plays a large role in people’s lives from dictating what clothes to wear, what colour car to buy, what fruit to choose, what colour to paint your house  – the list goes on. In the same way, colour plays a HUGE role in ensuring your website looks good and is effective.

Underestimating the importance of colour could be detrimental to your website. Good use of colour can assist your business in creating more sales of products or services as well as enticing a visitor.

One of the most important things about the use of colours is to NOT use colours that are hard to read on the monitor. For example, you don’t want to use a luminous yellow on a website with a white background. For websites with black backgrounds, you don’t want to use a blue or navy font on black. Consider how you would feel if you landed up on a website and couldn’t read the information on the site because of the use of colours – you wouldn’t stay on the site very long, would you?

Colour combinations are best with websites. There is a rule which isn’t cast in stone, but often something that can help you along in the choice of colours, is use one primary colour with one or two secondary or complimentary colours.  Overuse of colours can cause a website to look cluttered or messy or just plain difficult to stay on, so choosing your colour combinations must be done carefully.

If you have a logo already or your branding has been done for you, then make sure to use colours that use the branding colours and / or colours that compliment the logo / branding. When your branding has been setup with companies that specialize in print, often a style guide is available where colours are specified for use on web / cards or other print media.

The best thing to do is play around with colours. Make sure to ask other people’s opinion as your taste maybe completely different to another person’s taste. Some colours can represent certain emotions, so some homework will be required on your web designers part.

Remember, not all colours are web friendly, so make sure to use a web designer who understands these things before starting – making use of a professional web agency is key when designing your website, so don’t cut corners if you want a strong brand and web presence.

Here’s a few links that may be useful when considering or wanting to play around with colour schemes:

10 Web Design Tips That Actually Work

Below are 10 web design tips to keep in mind when you have your website designed. These tips were formulated with search engine friendliness, user friendliness and usability in mind.

1. Keep it clean and simple

This doesn’t in anyway mean that your site must look empty, boring or clinical, but rather keep it uncluttered and professional no matter what the subject matter. Trying to fill every white space available can be detrimental to the site. Keeping it clean and professional can only benefit both your visitor and your business.

2. Have a focal point

This is especially important when you are selling a product or products or a particular service. It’s VERY important that if a visitor lands up on your website, they DO NOT question what the site is about or get confused or lost. Having a focal point draws attention to important information such as a featured product / service ensuring the visitor knows exactly what you are about when they land up on your website.

3. Easy to use and clear navigation

Make sure the site can easily be navigated. There is nothing worse than having a website that cannot be browsed because the navigation is unclear or can’t be found / seen. Top menu options and left menu options are the most common and with the increase in JavaScript libraries and the broad use of CSS, a wide range of menus from drop downs, expandable to pop up menus are available making navigation easy for both developer to website visitor.

4. Use fonts wisely

Use a font that is easy to read and make sure to use a colour that isn’t too hard on the eyes e.g. yellow or luminous green. Make use of fonts that won’t be an issue across different browsers or machines. Good raw fonts to be used on website are Arial, Tahoma, Verdana and Century Gothic.

5. Avoid broken links

One of the most irritating things on a website is having broken links or a link that just brings nothing up other than a page not found. Make sure that your website has redirects in place that takes the user to a page apologizing for the missing page or to a decent message that lets the user know that they are on the right site, and that the site isn’t neglected or in a mess. Mod Rewrite (.htaccess, .httpd.conf or ISAPI) can be used to achieve this.

6. Don’t allow just anyone to design your website

Nowadays, almost everyone knows how to build their website. With all the tools that are available now, developing websites couldn’t be easier. That being said, that doesn’t mean you should allow just anyone to build your website. Rather opt for spending some bucks on a website to be designed and built properly which could potentially SAVE you money further down the line. Having your website built professionally will show to your visitors how serious you are about your business – remember that first impressions last!

7. Standardise your website

Keeping a website looking professional is important and one way to do that is to most certainly keep a standard on the website. Make sure each page is consistent with the next e.g. use the same colours, fonts, bullets, link colours, etc throughout the site.

8. Avoid overdoing flashing content

Flash is a powerful tool that is used now to allow websites to have animation and certainly adds to the professional aspect of many sites. Make sure that if you have animation on the website, that it isn’t overdone e.g. animated gifts or moving text on the page – these can distract and in some cases, even annoy a user.

9. Avoid adding music to your site

We’ve implemented music on clients’ website and yes, it can add to a website, but we’ve come to dislike it in our line of work. Music is not only irritating when you really don’t like the music, it takes forever to download and can slow your site down dramatically. Not having a feature which stops the music can also be just as annoying to a visitor. Especially if they have been listening to a song of their choice, and have forgotten to turn down the volume! Avoid adding music if you can – you can very easily lose a visitor who has to wait for the music to load and is then presented with a clip they do not like or cannot switch off. It’s all about impressions, again.

10. VERY IMPORTANT: No More Than 2  – 3 clicks

This should fall under easy navigation, but we felt this deserved to be mentioned separately. Whether people are on dial up or broadband or some other connection, people do not want to have difficulty finding information on a website. Websites that lead people to different pages that requires them having to click…read… click… read… click… read… can result in losing a client. We live in an era where time is money – people don’t want to drill down deep into a website to find some basic information – this is where both navigation and simplicity work together. This is a very important rule – make sure a user can find important things by having to click no more than 2 to 3 times on the site. The fewer clicks required, the better.

Image Stock Libraries

As the internet grows, so does the number of Image Stock libraries. These libraries are useful tools that allow web developers and designers (web / print / other media) to find photos or pictures online without having to whip out the camera and worry about lighting and costs involved.

Images assist in making a website look alive and not so plain. Images not only add colour and variety, but they are able to bring out the feel of the website.

Often when designing websites, clients don’t have the images they need to compliment or display their business. In some cases, clients simply don’t have suitable images available that reflect what they do e.g. a plumber may want a website, but doesn’t have any websites applicable to plumbing. In these cases, we would assist the client in finding images that would suit their website e.g. in the plumbers case, photos with plumbing tools or happy clients with a plumber may be useful for their website.

What is an Image Stock Library?

Image Stock Libraries offer a range of photos that anyone can purchase online. Typically, the image stock libraries provide the user or visitor with different resolution options, photo sizes and in some instances, different licences.

The most frequently used licenses include:

  • Royalty Free describes a license whereby a user can purchase the image once and re-use the image as many times as they like.
  • Rights Managed or Licensed Images describes a licence whereby a user purchases the image(s) on a use-by-use basis.

Other licenses include:

  • Rights Ready
  • Creative Subscription

VERY IMPORTANT:

When purchasing images from an image stock library, it’s crucial you understand the licensing and the costing relating to that image.

How much do the images cost and how does one pay for the images?

Every image stock library website has different costing structures for different licences. You will need to understand the licences and check the costing on each individual image you like.

We have found over time that IStock.com offers affordable stock imagery for our clients, specifically in South Africa. A number of the image libraries are overseas, therefore one needs to take into the exchange rate if buying on a UK or US website.

When purchasing the images, you would use your credit card. You are able to buy credits – this is particularly useful if you are a web agency that uses an image library website regularly for different websites. You can spend a set amount which buys you credits. You can then use your credits at any time to purchase as images you would like. Credits can be topped up at any point time.

What Image Stock Libraries can I use?

You can do a search on your favourite search engine and you will more than likely receive loads of results of different image stock libraries.

Stock libraries we make use of include:

  • IStock.com
  • Dreamstime.com
  • Getty Images