Modelo de color HTML

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.

Modelo de color HTML

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).

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

  1. Contenido web
  2. Ghostwriter (escritor fantasma)
  3. Sobrecarga de información (infoxicación)
  4. Copyleft
  5. Cross-browser
  6. CSS
  7. Desarrollo web con Firefox
  8. Diseño web adaptativo (Responsive Web Design)
  9. Editor de páginas web
  10. Enlace roto
  11. Estándares web
  12. Favicon
  13. GIF animados con The Gimp
  14. Hacer una página web
  15. Hiperenlace (hyperlink)
  16. Hipertexto
  17. HTML (HyperText Markup Language)
  18. Linkware
  19. Modelo de color HTML
  20. Navegador móvil
  21. Navegador web
  22. Nube de tags
  23. Páginas web estándar
  24. FAQ (Frequently Asked Questions)
  25. Páginas web gratuitas
  26. Páginas web para móviles
  27. Psicología del color
  28. Web 2.0
  29. Web 3.0
  30. Sitio web (website)
  31. Blog
  32. Blogosfera
  33. Comunidad virtual
  34. Internet superficial, Internet profunda e Internet oscura
  35. Podcast (podcasting)
  36. Web semántica
  37. Mashup
  38. Fotoblog
  39. Wiki
  40. Microblogging
  41. Página web
  42. Portal
  43. Redes sociales
  44. Videoblog
  45. WordPress
  46. WWW (World Wide Web)

Los comentarios están cerrados