El término colores seguros para la web o "web-safe colors", proviene de una época en la que los monitores a color sólo podían mostrar una paleta de colores limitada a 8-bits, donde cada pixel estaba representado por 1 byte y sólo podía reproducir 256 colores diferentes.
En HTML los colores se representan mediante un número hexadecimal formado por seis dígitos hexadecimales (tres pares), precedidos por una almohadilla, como por ejemplo #FFFFFF. Cada dígito hexadecimal puede tomar hasta dieciséis valores distintos, siendo el conjunto de símbolos empleado 0-9 y A-F.
Cada uno de los tres pares hexadecimales correspondientes a los tres colores primarios RGB (rojo, verde y azul) puede tomar 256 valores, que van del 0 al 255 decimal (00 a FF hexadecimal). Así pues, existen 16.777.216 combinaciones distintas:
256 x 256 x 256 = 16.777.216
Para poder visualizar por completo todos los colores posibles es necesario un sistema de 24-bits, estándar actualmente, donde cada pixel está representado por 3 bytes, lo que recibe el nombre de color verdadero o "truecolor" debido a que es aproximadamente el número de colores que el ojo humano puede percibir.
Cuando algún color empleado en una página web no está disponible en un navegador, porque sólo dispone de 256 colores, éste intenta crearlo mezclando pixels de colores, generando lo que se denomina un tramado o "dithering". De esta manera, se consigue una sustitución aproximada del color no disponible, aunque el resultado no sea demasiado estético.
Por ejemplo, si colocamos en una página web un botón de color #1875C6 y no está disponible en el navegador por estar limitado a una visualización con 256 colores, se generará un tramado para visualizar el botón mediante una mezcla de colores.
Para evitar la generación de tramados se diseñó una paleta de colores denominada "paleta de colores seguros para la web" o "web-safe colors palette", que se genera empleando seis tonos de cada color primario RGB (rojo, verde y azul), con lo que se obtienen:
6 x 6 x 6 = 216 colores
Los tonos empleados para cada color son 00, 33, 66, 99, CC y FF.
Este conjunto de colores se presentan como inmunes a la generación de tramados, por lo que pueden ser visualizados sin tramado en las pantallas de 256 colores, estando disponibles en los principales Sistemas Operativos, como Windows, Mac o Linux.
Utilizando los 216 colores de la paleta web se evita el proceso de mezcla de colores, dado que todos los navegadores contienen dicha paleta, con lo que los diseñadores web se aseguran de que los visitantes verán las páginas tal y como han sido diseñadas independientemente del navegador, el hardware o el Sistema Operativo.
El inconveniente de usar colores seguros es que la paleta disponible se reduce considerablemente:
En la actualidad el uso de los colores seguros ha caído en desuso, dado que la práctica totalidad de computadoras personales e incluso los dispositivos móviles tienen al menos 16-bits de color y por lo general 24-bits (color verdadero).
Tabla de colores seguros para la web
#FFFFFF | #FFCCFF | #FF99FF | #FF66FF | #FF33FF | #FF00FF |
#FFFFCC | #FFCCCC | #FF99CC | #FF66CC | #FF33CC | #FF00CC |
#FFFF99 | #FFCC99 | #FF9999 | #FF6699 | #FF3399 | #FF0099 |
#FFFF66 | #FFCC66 | #FF9966 | #FF6666 | #FF3366 | #FF0066 |
#FFFF33 | #FFCC33 | #FF9933 | #FF6633 | #FF3333 | #FF0033 |
#FFFF00 | #FFCC00 | #FF9900 | #FF6600 | #FF3300 | #FF0000 |
#CCFFFF | #CCCCFF | #CC99FF | #CC66FF | #CC33FF | #CC00FF |
#CCFFCC | #CCCCCC | #CC99CC | #CC66CC | #CC33CC | #CC00CC |
#CCFF99 | #CCCC99 | #CC9999 | #CC6699 | #CC3399 | #CC0099 |
#CCFF66 | #CCCC66 | #CC9966 | #CC6666 | #CC3366 | #CC0066 |
#CCFF33 | #CCCC33 | #CC9933 | #CC6633 | #CC3333 | #CC0033 |
#CCFF00 | #CCCC00 | #CC9900 | #CC6600 | #CC3300 | #CC0000 |
#99FFFF | #99CCFF | #9999FF | #9966FF | #9933FF | #9900FF |
#99FFCC | #99CCCC | #9999CC | #9966CC | #9933CC | #9900CC |
#99FF99 | #99CC99 | #999999 | #996699 | #993399 | #990099 |
#99FF66 | #99CC66 | #999966 | #996666 | #993366 | #990066 |
#99FF33 | #99CC33 | #999933 | #996633 | #993333 | #990033 |
#99FF00 | #99CC00 | #999900 | #996600 | #993300 | #990000 |
#66FFFF | #66CCFF | #6699FF | #6666FF | #6633FF | #6600FF |
#66FFCC | #66CCCC | #6699CC | #6666CC | #6633CC | #6600CC |
#66FF99 | #66CC99 | #669999 | #666699 | #663399 | #660099 |
#66FF66 | #66CC66 | #669966 | #666666 | #663366 | #660066 |
#66FF33 | #66CC33 | #669933 | #666633 | #663333 | #660033 |
#66FF00 | #66CC00 | #669900 | #666600 | #663300 | #660000 |
#33FFFF | #33CCFF | #3399FF | #3366FF | #3333FF | #3300FF |
#33FFCC | #33CCCC | #3399CC | #3366CC | #3333CC | #3300CC |
#33FF99 | #33CC99 | #339999 | #336699 | #333399 | #330099 |
#33FF66 | #33CC66 | #339966 | #336666 | #333366 | #330066 |
#33FF33 | #33CC33 | #339933 | #336633 | #333333 | #330033 |
#33FF00 | #33CC00 | #339900 | #336600 | #333300 | #330000 |
#00FFFF | #00CCFF | #0099FF | #0066FF | #0033FF | #0000FF |
#00FFCC | #00CCCC | #0099CC | #0066CC | #0033CC | #0000CC |
#00FF99 | #00CC99 | #009999 | #006699 | #003399 | #000099 |
#00FF66 | #00CC66 | #009966 | #006666 | #003366 | #000066 |
#00FF33 | #00CC33 | #009933 | #006633 | #003333 | #000033 |
#00FF00 | #00CC00 | #009900 | #006600 | #003300 | #000000 |