Need Help? Try me!

Your answer is just one search away!

Website Design Tools

Posted on

Web Safe Colours

This chart contains all 216 web safe colours – so it is a great reference tool. To help us design your website, select the colours you would like us to use from the colour chart below. Quote the colour to us using the reference at the top of each square (e.g. #FFCCCC and #FF9900).

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

Web Safe Fonts & Font Sizes

When designing a website, it is important to use standard colours and fonts to ensure that the site will display correctly on anyone’s pc or mac. You do not want your beautifully designed website to look completely different on different machines. It should display in the same way on any machine!

Sounds good, but the catch is that this can limit your creativity! There are only 10 web safe fonts and only 256 web safe colours! Sad, but true! You can, of course, use any fonts and colours you want in web site graphics (like your banner, buttons and images), but when it comes to page layout and text – it is web safe all the way!

The table below outlines the fonts that are safe to use on your website – to ensure the website will render correctly on both PCs and Macs.

 

Web Safe Fonts

Arial The quick brown fox jumped over the lazy dog…
Arial Black The quick brown fox jumped over the lazy…
Comic Sans The quick brown fox jumped over the lazy dog…
Courier New The quick brown fox jumped over the lazy…
Georgia The quick brown fox jumped over the lazy dog…
Impact The quick brown fox jumped over the lazy dog…
Times New Roman The quick brown fox jumped over the lazy dog…
Trebuchet MS The quick brown fox jumped over the lazy dog…
Verdana The quick brown fox jumped over the lazy dog…

 

Web Font Sizes

Another thing to think about is the size of the font. When you are using a program like Microsoft Word, you have many different size options for your font – from 1pt to 1638pt! On the web though, you have only seven options. These web font sizes are shown in the table below.

xx-small The quick brown fox jumped over the lazy dog.
x-small The quick brown fox jumped over the lazy…
small The quick brown fox jumped…
medium The quick brown fox jumped…
large The quick brown fox…
x-large The quick brown…
xx-large The quick…

If WebCare is designing your website, we can make decisions on fonts style, sizes and colours. You will, of course, have the option of changing any of these elements during the design process. However, if you would like to have some input at the outset, then please send us through your ideas.

If you have any questions, please give us a call on 1300 656 902.