The Use of Colors
The Use of Colors
[note: this is NOT my article. This content is from the link above. I posted the content here just so that I can do my own text-search at a later time. I did not put this up for anyone to use.(This )]
The use of colour Article icon
This article explains the use of colour, what colours signify, and how to find colours that fit with each other in your web pages. smile
In the web design world, one of the main mistakes made by designers is the incorrect usage of colours. Bad colour schemes can make your site look unfriendly, amaturish, and inaccessible.
This article will identify common mistakes with selecting colours, how to create good colour schemes, and accessibility issues that arise from colours.
Colour associations and moods
Colours can be perceived by people as different moods and emotions. When designing a site you should consider what mood you aim to set with your design, with careful use of colour.
These moods can vary from person to person, depending on their life experiences, however in general, these are the following meanings:
Blue - Blue is one of the most used colours on the web, and in most things. This is because it is a safe colour because the moods it conveys are mostly good.
Blue can represent peace, tranquility, reliability, trust, honesty, cleanlyness, clarity. However it can also represent depression. (e.g feeling blue).
Green - Green has always been associated with nature. It also can represent environment, health, luck, youth. However, in some places it can represent distrust and danger.
Yellow - Yellow is a very happy colour (look at smilys for instance smile). Yellow can represent joy, happyness, the sun, friendship. Bad moods can be things such as cowardice, and illness. Me personally, i hate pale yellow, it reminds me of vomit and scum, i have no idea why, but it must be a childhood experience i had.
Orange - My favorite colour smile. Orange can convey warmth and energy. Orange is a good attention grabber when used correctly.
Red - Danger! Caution, blood. Good things include love and warmth. Red is a good attention grabber, maybe because people notice danger and notice the red.
Purple - Purple is a mysterious, creative colour, It can also be associated with royalty, and exotic items. Look at dairy milk chocolate bars, the purple packaging make it look more luxorious.
Pink - A very feminine colour, also assiciated with babies, and childhood.
Black - Black can convey power, darkness, and evil. However it is a useful colour (like grey) for making things stand out from a page. Black along with red is an example of this. A black page with a red item will make the red stand out more.
White - White represents purity, and goodness. It can also represent coldness and winter.
Colour combinations
To find a good combination of colours look at a colour wheel.
A colour wheel shows the colours in the colour spectrum, and by looking at it you can see what colours will work with others.
Complementary
complementary
Split-complementary
Split
Triad
Triad
Tetrad
Tetrad
Analogous
analog
Monochromatic - Different shades
mono
Shades of colours
Different shades of colours work well in different situations. For example, using very saterated colours all the time is not always good, by using shades you can make certain things stand out more or less than others. For example, it would be good to have elements in the main content stand out more than in the sidebar, because that is where you want to draw the users eyes to look.
Common sense
When making sites you have to use your common sense when picking colours. For example, if you were making a business site you wouldent use bright pink, because this would look childish and unprofessional.
Another example, if you were making a laser eye clinic site, you wouldent use red as this would imply danger and blood. Scary.
Web safe/smart
You may or may not be aware that mac's display colours differently to PC's, also browsers render colours differently. Heres a bit of history.
In 1994, Netscape (big players in the browser market at the time) selected a web safe palette that would work on both PC's and Mac's by using the current 256 colours (thats all the pc's could display at the time, 8bits) and removing the 40 colours that were incompatible. Thus leaving 216 web safe colours.
Using these web safe colours meant that there was greater chance of your site looking the same on different hardware.
These days computers support millions of colours (16bit or 32bit) meaning the compatible colours between systems have increased. The new pallete, based on 16bit systems, is the web smart pallete which supports 4096 web smart colours. I personally try to use web smart colours when ever possible, to ensure it will look simular to what on want on different systems.
You just note, that the colours will never be the same on different machines, because so many things affect them, e.g OS, Monitor settings, monitor type, graphics card etc.
Accessibility issues
When changing colours you must ensure the contrast between the colour and the text on it is enough for people with poor eyesight to see, or at least offer a high contrast version. Ive seen sites with grey text on slightly greyer background making it very hard to read, this is bad accessibility wise.
Also note some colours can be annoying together, for example some people have difficulty looking at green and red together, green text on red would be a very bad idea.
Also remember the colour blind poeple on the web, ensure they have options to see a version they can actually read.
My tips
Dont use pure black/pure white all the time. Try shades, e.g #111111 hex is nearly black but not quite, and looks nicer in most situations.
Dont use more than 3/4 colours in your colour scheme, keep it simple for more impact.
If you have an image you want to base you page on, pick colours directly from the image.
[note: this is NOT my article. This content is from the link above. I posted the content here just so that I can do my own text-search at a later time. I did not put this up for anyone to use.(This )]
The use of colour Article icon
This article explains the use of colour, what colours signify, and how to find colours that fit with each other in your web pages. smile
In the web design world, one of the main mistakes made by designers is the incorrect usage of colours. Bad colour schemes can make your site look unfriendly, amaturish, and inaccessible.
This article will identify common mistakes with selecting colours, how to create good colour schemes, and accessibility issues that arise from colours.
Colour associations and moods
Colours can be perceived by people as different moods and emotions. When designing a site you should consider what mood you aim to set with your design, with careful use of colour.
These moods can vary from person to person, depending on their life experiences, however in general, these are the following meanings:
Blue - Blue is one of the most used colours on the web, and in most things. This is because it is a safe colour because the moods it conveys are mostly good.
Blue can represent peace, tranquility, reliability, trust, honesty, cleanlyness, clarity. However it can also represent depression. (e.g feeling blue).
Green - Green has always been associated with nature. It also can represent environment, health, luck, youth. However, in some places it can represent distrust and danger.
Yellow - Yellow is a very happy colour (look at smilys for instance smile). Yellow can represent joy, happyness, the sun, friendship. Bad moods can be things such as cowardice, and illness. Me personally, i hate pale yellow, it reminds me of vomit and scum, i have no idea why, but it must be a childhood experience i had.
Orange - My favorite colour smile. Orange can convey warmth and energy. Orange is a good attention grabber when used correctly.
Red - Danger! Caution, blood. Good things include love and warmth. Red is a good attention grabber, maybe because people notice danger and notice the red.
Purple - Purple is a mysterious, creative colour, It can also be associated with royalty, and exotic items. Look at dairy milk chocolate bars, the purple packaging make it look more luxorious.
Pink - A very feminine colour, also assiciated with babies, and childhood.
Black - Black can convey power, darkness, and evil. However it is a useful colour (like grey) for making things stand out from a page. Black along with red is an example of this. A black page with a red item will make the red stand out more.
White - White represents purity, and goodness. It can also represent coldness and winter.
Colour combinations
To find a good combination of colours look at a colour wheel.
A colour wheel shows the colours in the colour spectrum, and by looking at it you can see what colours will work with others.
Complementary
complementary
Split-complementary
Split
Triad
Triad
Tetrad
Tetrad
Analogous
analog
Monochromatic - Different shades
mono
Shades of colours
Different shades of colours work well in different situations. For example, using very saterated colours all the time is not always good, by using shades you can make certain things stand out more or less than others. For example, it would be good to have elements in the main content stand out more than in the sidebar, because that is where you want to draw the users eyes to look.
Common sense
When making sites you have to use your common sense when picking colours. For example, if you were making a business site you wouldent use bright pink, because this would look childish and unprofessional.
Another example, if you were making a laser eye clinic site, you wouldent use red as this would imply danger and blood. Scary.
Web safe/smart
You may or may not be aware that mac's display colours differently to PC's, also browsers render colours differently. Heres a bit of history.
In 1994, Netscape (big players in the browser market at the time) selected a web safe palette that would work on both PC's and Mac's by using the current 256 colours (thats all the pc's could display at the time, 8bits) and removing the 40 colours that were incompatible. Thus leaving 216 web safe colours.
Using these web safe colours meant that there was greater chance of your site looking the same on different hardware.
These days computers support millions of colours (16bit or 32bit) meaning the compatible colours between systems have increased. The new pallete, based on 16bit systems, is the web smart pallete which supports 4096 web smart colours. I personally try to use web smart colours when ever possible, to ensure it will look simular to what on want on different systems.
You just note, that the colours will never be the same on different machines, because so many things affect them, e.g OS, Monitor settings, monitor type, graphics card etc.
Accessibility issues
When changing colours you must ensure the contrast between the colour and the text on it is enough for people with poor eyesight to see, or at least offer a high contrast version. Ive seen sites with grey text on slightly greyer background making it very hard to read, this is bad accessibility wise.
Also note some colours can be annoying together, for example some people have difficulty looking at green and red together, green text on red would be a very bad idea.
Also remember the colour blind poeple on the web, ensure they have options to see a version they can actually read.
My tips
Dont use pure black/pure white all the time. Try shades, e.g #111111 hex is nearly black but not quite, and looks nicer in most situations.
Dont use more than 3/4 colours in your colour scheme, keep it simple for more impact.
If you have an image you want to base you page on, pick colours directly from the image.
posted by BofYonkers at 1:07 PM
<< Home