Home

Browseronafhankelijke kleuren

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.

Nog maar 216 kleuren

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

Terug naar begin