El modelo de color HTML se basa en el sistema de color RGB (Red Green Blue, rojo verde azul), que asigna un valor comprendido entre 0 y 255 (un byte, 8 bits) a cada uno de los colores primarios, para indicar en qué proporción es mezclado cada color. En el código CSS y HTML los colores son especificados como valores numéricos, aunque algunos colores tienen nombre propio.

Qué es el modelo de color HTML

A la hora de diseñar una página web, una de las herramientas que debemos considerar es la elección y aplicación de los colores, muy importantes para el aspecto de las páginas web y para su legibilidad.

En el diseño, los colores y sus características, como la intensidad y el brillo, serán el elemento diferencial de la página web, ya que posibilitarán captar la atención de los usuarios, siempre y cuando sean bien escogidos y aplicados.

En el diseño de páginas web conviene especificar todos los colores para no estar a merced de la configuración por defecto del navegador, que puede ser inadecuada para nuestra página.

El modelo de color que se utiliza en las páginas web, tanto en HTML como en las hojas de estilo CSS (Cascading Style Sheets), es el modelo de color RGB (Red Green Blue, rojo verde azul en español), un modelo de color basado en la síntesis aditiva, de tal manera se representa un color mediante la mezcla por adición de los tres colores de luz primarios.

Para indicar en qué proporción está presente cada color primario, se asigna un valor a cada uno de los colores primarios. Dado que cada valor se codifica con un byte (8 bits), eso permite 256 valores, que van del 0 al 255 decimal (00 a FF hexadecimal). Así, la intensidad de cada uno de los componentes se mide según una escala que va del 0 al 255, de tal manera que cada color individual es definido por un conjunto de 3 valores correspondientes a Red, Green y Blue.

Veamos cómo se expresan algunos colores característicos con este sistema:

• Rojo (255,0,0)
• Verde (0,255,0)
• Azul (0,0,255)
• Negro (0,0,0)
• Amarillo (255,255,0)
• Cian (0,255,255)
• Magenta (255,0,255)
• Blanco (255,255,255)

En vez de usar notación decimal también se puede usar numeración hexadecimal, e incluso algunos colores tienen nombre. De esta manera, en CSS podemos expresar el color rojo de tres maneras:

• Nombre: sistema poco recomendable, le damos el control del color al navegador.
  p {background: red;}
• RGB hexadecimal: el sistema más utilizado.
  p {background: #FF0000;}
• RBG decimal: sistema poco utilizado.
  p {background: rgb(255,0,0);}

Puesto que cada uno de los tres números correspondientes a los tres colores primarios RGB (Red, Green y Blue) puede tomar 256 valores, 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 3 bytes (24-bits), estándar actualmente, lo que recibe el nombre de "color verdadero" (truecolor) debido a que es aproximadamente el número de colores que el ojo humano puede percibir.

Colores seguros para la web

En la época de los monitores a color de 1 byte (8-bits), sólo podían mostrar una paleta de colores formada por 256 colores diferentes. Cuando algún color empleado en una página web no está disponible en el navegador, éste intenta sustituirlo por un color similar mezclando pixels de colores, generando lo que se denomina un "tramado" (dithering).

Para evitar la generación de tramados se diseñó una paleta de colores denominada "paleta de colores seguros para la web" (web-safe colors palette), que se genera empleando seis tonos de cada color primario RGB (Red, Green y Blue), 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 pueden ser visualizados sin tramado en las pantallas de 256 colores, estando disponibles en los principales Sistemas Operativos, como Windows, Mac o Linux.

En la actualidad ya no se utilizan en la web los colores seguros, dado que la práctica totalidad de computadoras personales y dispositivos móviles tienen 24-bits (color verdadero).

25 Artículos en la categoría "Diseño web"

1. Contenido web
2. Copyleft
3. Cross-browser
4. CSS
5. Editor de páginas web
6. Enlace roto
7. Diseño web adaptativo (Responsive Web Design)
8. Estándares web
9. Favicon
10. GIF animados con The Gimp
11. Hiperenlace (hyperlink)
12. Desarrollo web con Firefox
13. Hipertexto
14. Modelo de color HTML
15. Hacer una página web
16. HTML (HyperText Markup Language)
17. MS-Explorer en Linux
18. Navegador móvil
19. Navegador web
20. Nube de tags
21. Páginas web estándar
22. Páginas web gratuitas
23. Páginas web para móviles
24. Podcast
25. Psicología del color