Why colors don't match

Article Overview

Introduction
Show what are web safe colours
How the list is ordered
The web safe colours list

Introduction

Ok before we start: yes I do relise I have been switching back and forth between the US and proper way of spelling color/colour. This isn't a mistake its just due to spellcheckers, and search engine indexing, etc.

Have you ever exported an image with the same background colour as you used in your html page and yet when you view your page the colours don't match?

The most likely cause of this is that you have used a colour that your browser doesn't support. Instead you need to use a web safe colour.

If you are using a complex html colour then you will end up with a slightly different colour in your image (which shows the true colour) and your browser (which shows the nearest alternative).

But don't let this put you off too much - use any colour you like as long as it blends. I use complex colours all the time including #FFB704 which is the orange I used for one of the old M World's (after old M World put before M World basic which is live now presuming it hasn't been changed). I have built hundreds of sites and hardy ever had a problem.

Show what are web safe colours?

Web safe colours were colours that were selected back when a lot of monitors only supported 256 colours. These were colours that would display properly on these old monitors. Today most of us have loads more colours and so don't need to use web safe colours however if your main audience is running 256 colours you will probably want to use them.

How the list is ordered

Hopefully you will be fairly familiar with html colour values and so will be able to work out which one's are which. Each little section goes from dark to light, in a general order of:

• black
• blue
• green
• blue
• green
• blown
• green
• red
• purple
• green
• red
• pink
• yellow
• red
• orange
• yellow
• white

The web safe colours list

#000000
#000033
#000066
#000099
#0000CC
#0000FF
#003300
#003333
#003366
#003399
#0033CC
#0033FF
#006600
#006633
#006666
#006699
#0066CC
#0066FF
#009900
#009933
#009966
#009999
#0099CC
#0099FF
#00CC00
#00CC33
#00CC66
#00CC99
#00CCCC
#00CCFF
#00FF00
#00FF33
#00FF66
#00FF99
#00FFCC
#00FFFF
#330000
#330033
#330066
#330099
#3300CC
#3300FF
#333300
#333333
#333366
#333399
#3333CC
#3333FF
#336600
#336633
#336666
#336699
#3366CC
#3366FF
#339900
#339933
#339966
#339999
#3399CC
#3399FF
#33CC00
#33CC33
#33CC66
#33CC99
#33CCCC
#33CCFF
#33FF00
#33FF33
#33FF66
#33FF99
#33FFCC
#33FFFF
#660000
#660033
#660066
#660099
#6600CC
#6600FF
#663300
#663333
#663366
#663399
#6633CC
#6633FF
#666600
#666633
#666666
#666699
#6666CC
#6666FF
#669900
#669933
#669966
#669999
#6699CC
#6699FF
#66CC00
#66CC33
#66CC66
#66CC99
#66CCCC
#66CCFF
#66FF00
#66FF33
#66FF66
#66FF99
#66FFCC
#66FFFF
#990000
#990033
#990066
#990099
#9900CC
#9900FF
#993300
#993333
#993366
#993399
#9933CC
#9933FF
#996600
#996633
#996666
#996699
#9966CC
#9966FF
#999900
#999933
#999966
#999999
#9999CC
#9999FF
#99CC00
#99CC33
#99CC66
#99CC99
#99CCCC
#99CCFF
#99FF00
#99FF33
#99FF66
#99FF99
#99FFCC
#99FFFF
#CC0000
#CC0033
#CC0066
#CC0099
#CC00CC
#CC00FF
#CC3300
#CC3333
#CC3366
#CC3399
#CC33CC
#CC33FF
#CC6600
#CC6633
#CC6666
#CC6699
#CC66CC
#CC66FF
#CC9900
#CC9933
#CC9966
#CC9999
#CC99CC
#CC99FF
#CCCC00
#CCCC33
#CCCC66
#CCCC99
#CCCCCC
#CCCCFF
#CCFF00
#CCFF33
#CCFF66
#CCFF99
#CCFFCC
#CCFFFF
#FF0000
#FF0033
#FF0066
#FF0099
#FF00CC
#FF00FF
#FF3300
#FF3333
#FF3366
#FF3399
#FF33CC
#FF33FF
#FF6600
#FF6633
#FF6666
#FF6699
#FF66CC
#FF66FF
#FF9900
#FF9933
#FF9966
#FF9999
#FF99CC
#FF99FF
#FFCC00
#FFCC33
#FFCC66
#FFCC99
#FFCCCC
#FFCCFF
#FFFF00
#FFFF33
#FFFF66
#FFFF99
#FFFFCC
#FFFFFF