unique visitors counter

Web safe colours and the safe palette

Now, in my HTML/JavaScript course that I teach, I suggested to my students how they could quickly and effectively determine if a colour is in the safe palette. Admittedly, the safe palette is not so important in this day and age where few devices connect to the internet with a display showing 256 colours or less.

Background:
6-digit hex codes are used in HTML and CSS
3-digit hex codes are used in CSS

a 6 digit hex code is of the form : #RRGGBB (where R=red digit, G=green digit and B=blue digit)
a 3 digit hex code is of the form : #RGB

what is a safe palette? the safe palette is the set of colours which are guaranteed to display correctly on ALL browsers viewing your page without dithering. there are 216 of them. yes, very limited.

First, the key thing to remember is “666.” 6×6x6 = 216 colours in the safe palette. 256 colours - 40 windows system reserved colours = 216 colours.

a 6 digit hex code can be represented in 3 digit hex code (used in CSS) if the R digits are pairs, the G digits are pairs and the B digits are pairs.

so:
#AA7733 = #A73
#CC00FF = #C0F
#DD9933 = #D93

now,
#AEAEAE has no 3 digit representation for obvious reasons. those pairs aren’t there.

here’s how we determine just by looking at a number if it is in the safe palette or not.

0
0 + 3 = 3
3 + 3 = 6
6 + 3 = 9
9 + 3 = C
C + 3 = F

the safe digits are 0 3 6 9 C and F

so:
#36A is not safe because A is not among the safe digits
#990 is definitely safe
#CCC is definitely safe

and so on…

here’s how we approximate the safe colour from any given 6 digit hex code

given #B71369, how do we find the nearest safe colour?

first.. double up based on the first digit of the R, G, and B pairs.
doubling up would give us:

#BB1166

next step is to write the 3 digit hex code

#B16

next step is to check each digit and see which one of the safe digits it’s closest to:

B is closer to C than to 9
1 is closer to 0 than to 3
6 is safe

our nearest safe colour is #B16

now, have fun with this code. it will dynamically generate the safe palette using javascript.This example uses JavaScript to construct a 216
cell table which shows all the colours of the
safe palette. The example incorporates:

  • DIV containers
  • Functions with return values
  • The IF conditional
  • The SWITCH block
  • document.write, document.writeln
  • Escape codes (\n \’ \”)
  • Error trapping (try-catch blocks)
  • The FOR loop
  • .innerHTML
  • onMouseOver and onMouseOut
  • String concatenation

Download the ZIPped example


See the code in action

Posted in HTML and CSS, JavaScript on October 28th, 2007 by me | |

Leave a reply

You must be logged in to post a comment.