Niets is erger voor een webdesigner dan urenlang aan het perfecte design te
sleutelen en later vast te moeten stellen dat de afbeeldingen, elementen en
kleuren van de gehele site op een ander systeem opeens niet meer kloppen.
De kern van het kwaad is de kleurdiepte van de gebruikte videokaart. Het mooiste
is natuurlijk om een videokaart te gebruiken die een kleurenpalet van 16 miljoen
of meer heeft en dit type kaart is momenteel vrijwel standaard. Toch zullen
nog veel mensen bij o.a. universiteiten en bedrijven moeten werken met een goedkope
kaart in computers die voor niet-graphische doeleinden worden gebruikt. Resulterend
zullen er nog veel kaarten voorkomen die maar een 8-bits kleurdiepte hebben
waarmee dus maximaal 256 kleuren kunnen worden weergegeven.
Op een systeem dat een geringere kleurdiepte gebruikt moeten de vele kleuren
van jouw site worden gereduceerd, wat verschillende effecten, zoals dithering
oplevert. Afhankelijk van welke browser gebruikt wordt zal dit dus tot verschillende
en afwijkende resultaten leiden.
De oplossing is door gebruik te maken van een uniform kleurenpalet met maximaal 256 kleuren (8 bits) wat door alle browsers correct wordt weergegeven.
De keuze van de kleuren uit een palet van meer dan 16 miljoen is wiskundig
opgelost.
Om een gelijke verdeling van de 256 combinaties van de 3 hoofdkleuren te krijgen
nemen we de derdemachtswortel uit 256 met als resultaat 6,3496. Er mogen dus
6,3496 stappen worden gekozen voor zowel Rood, Groen en Blauw (6,3496 x 6,3496
x 6,3496 = 256). Omdat we allen maar hele stappen kunnen maken komen we dus
op 6 stappen per kleur wat resulteerd in een browser safe palet van 6 x 6 x
6 = 216 kleuren. De resterende 40 kleuren worden trouwens gereserveerd door
de besturingssystemen voor de grafische gebruikers interfaces en zodoende uniforme
kleuren te hebben.
Deze 6 stappen per kleur worden gelijkelijk verdeeld over de 256 mogelijke
waarden (0-255) per RGB-kleur, met als resultaat 0, 51, 102, 153, 204 en 255.
Hexadecimaal komt dat overeen met de getalllen #00, #33, #66, #99, #CC en #FF.
Dit nieuwe browseronafhankelijke kleurenpalte bestaat nu uit alle mogelijke
combinaties van deze 6 hexadecimale getallen.
#000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF | ||||||
#330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF | ||||||
#660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF | ||||||
#990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF | ||||||
#CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF | ||||||
#FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF | ||||||
#003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF | ||||||
#333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF | ||||||
#663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF | ||||||
#993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF | ||||||
#CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF | ||||||
#FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF | ||||||
#006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF | ||||||
#336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF | ||||||
#666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF | ||||||
#996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF | ||||||
#CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF | ||||||
#FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF | ||||||
#009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF | ||||||
#339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF | ||||||
#669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF | ||||||
#999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF | ||||||
#CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF | ||||||
#FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF | ||||||
#00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF | ||||||
#33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF | ||||||
#66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF | ||||||
#99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF | ||||||
#CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF | ||||||
#FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF | ||||||
#00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF | ||||||
#33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF | ||||||
#66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF | ||||||
#99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF | ||||||
#CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF | ||||||
#FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |