DESIGNING WITH COLOURS AND STYLES
Colour can add interest to a web page when it's used well. Too much colour or bad colour combinations can make pages difficult to read. Some basic rules are:
• A white background generally gives the page a more professional look.
• Consider using the same background colour for like sets of pages.
• Keep heading colours, styles and layout consistent.
• Avoid using too many different type styles and sizes.
Black text on a white background is the easiest to read, while white text on a dark background can be difficult and may cause eye strain for some users.
Some colour combinations are more stressful on the eye than others, and are said to "vibrate" when placed next to each other; for example, yellow and purple, blue and orange, or green and red. Be careful when using these colour combinations. Also, these colour combination can be difficult for people with colour vision deficiency who will be unable to tell the difference between the colours in these pairs.
When layout out your pages, make sure your design includes enough free space (also called "white space", though that terms is actually referring to space free of text or graphics). Good use of white space promotes readability of your content and makes for clearer, more usable pages.
The key is to be consistent and use colour sensibly. Carefully applying a colour theme adds to the professionalism of your site, and when done with some thought, can enhance navigation and usability for your users.
Although it might be tempting to use a large variety of font, styles and colours, the end result may appear overly complicated, cluttered and confused. Good design is almost always the careful choice of a few design elements, which are well proportioned and thoughtfully placed. The “less is more” principle is very true in graphic design – as they say, “if in doubt, leave it out”.
COLOUR
Colour can be added to HTML elements (e.g. table, p, div etc.) through the use of the color and bgcolor attributes – note the American spelling of “color”. Remember to use the American spelling in your HTML and CSS code.
Colours used in HTML code are expressed as either a hexadecimal code or a name. The following two snippets of code produce the same result:
Hexadecimal code:
<td bgcolor="#cccccc">cell content</td>
Named colour:
<td bgcolor="silver">cell content</td>
Understanding Hexadecimal
Hexadecimal, also called base-16, is a counting system based on counting in 16s instead of 10s (called decimal which we are all used to and familiar with). The 16 symbols are 0-9 then A, B, C, D, E and F.
This counting system is used in computing as an easier representation of binary numbers (which use only 0 and 1). One of the most common usages is in representing digital colour. This is done by grouping 3 hexadecimal numbers together, where the first pair represents the red value, the second pair represents the green value and the last pair is the blue value, and that is why the colour system is referred to as RGB.
In the above example, CCCCCC, because CC is the hexadecimal for 204, this is interpreted as:
R = 204, G = 204, B = 204
Black is 000000, which means no red, green or blue components. White (FFFFFF) means full red, green and blue, which when mixed produces white. In between black and white are all the grey colours, which are produced by setting red, green and blue to the same value (see the above example CCCCCC) To define the solid maximum red the hex code would be FF0000; solid green would be 00FF00 and a solid blue is 0000FF. All other colours are created by mixing the R, G and B component by different amounts.
Named Colours
In the early days of personal computing and colour screens, computers were only able to display 16 colours. These colour values have since been given names, and are referred to as "named colours". HTML supports using these names instead of hexadecimal values.
Named Colours Vs Hexadecimal
There is no difference between using named colours over hexadecimal colours, except to note that the range of named colours is somewhat limited.
Web Safe Colours
To standardise colours on websites, and ensure that they are correctly displayed on all the different types of computers used today, designers frequently restrict their colour use to the 216 colours that display as solid (non-dithered, i.e. 'spotty') colours. These colours are called the Web Safe (or Browser Safe) colours.
On the internet there are many free colour picker sites which can assist you to pick colours and work out the hexadecimal value. Also, Appendix 2 has a list of all colours, including the 16 named colours and the Web Safe colour palette.
These notes are an extract from one of our courses - See our IT Courses at https://www.acsedu.co.uk/Courses/Information-Technology-Courses.aspx