Manual de HTML: Colores seguros para la web

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.

Color tramado

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:

Paleta web-safe colors

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

Artículos en la categoría "Manual de HTML"

  1. Manual de HTML: Cómo tener una web
  2. Manual de HTML: Cabecera
  3. Manual de HTML: Estilos CSS
  4. Manual de HTML: Cajas (div)
  5. Manual de HTML: Texto
  6. Manual de HTML: Glosarios y Listas
  7. Manual de HTML: Enlaces
  8. Manual de HTML: Tablas
  9. Manual de HTML: Imágenes
  10. Manual de HTML: Frames (marcos)
  11. Manual de HTML: Colores HTML
  12. Manual de HTML: Colores seguros para la web
  13. Manual de HTML: Formularios
  14. Manual de HTML: Fuentes
  15. Manual de HTML: Objetos
  16. Manual de HTML: Eventos y scripts
  17. Manual de HTML: Caracteres especiales
  18. Manual de HTML: Unidades
  19. Manual de HTML: URL encoding
  20. Manual de HTML: Responsive Web Design (diseño web adaptativo)
  21. Manual de HTML: Geolocalización HTML5 en aplicaciones web