Colores HTML
Colores en la Web
El propósito de una página web es el de comunicar
algo: promocionar y vender un producto, brindar información, promocionar y vender un servicio, posicionar una marca, etc.
Esto es verdadero para una gran mayoría de los
sitios. En las páginas web utilizamos colores
que faciliten esta comunicación, el contraste y
su empatía. Usar el color inadecuado puede
ocasionar que tus visitantes abandonen tu sitio
o tengan menos interés en él.
Si eres un webmaster o programador web sin duda
que alguna vez has creado páginas web o gráficos
cuyos colores se ven diferentes en máquinas
distintas. ¿Por qué sucede esto? Tomando el caso
que la configuración de color del monitor
(lo que cuenta mucho para la forma en que se
muestran los colores) es la misma, y la calidad
del monitor sea la misma, podemos decir que
plataformas distintas usan paletas de colores
distintas. Tanto las Macs como las PCs tienen
256 colores en sus sistema de colores, pero de
ellos sólo 216 son los mismos colores.
Tanto Firefox como Internet Explorer utilizan
el mismo manejo de colores.
Aún así, los colores para la web suelen ser
bastante confusos. Suelen existir dos formatos
básicos para imagenes, GIF y , y sin embargo
hay varios sistemas de colores que aplican
para el formato GIF. En este artículo nos
centraremos en lo que se denomina Colores Seguros
Web.
Hace ya algunos años, la mayoría de computadoras
eran capaces de mostrar únicamente 256 colores
al mismo tiempo.Los 256 colores eran determinados
por fórmula matemática. Los colores se describiían
en no más de 8 bits de información, el cual nos
da 256 posibilidades.
¿Cómo se muestran los colores en los Monitores?
Un monitor de computadora esta construído de manera
tal que miles y miles de pequeños puntos de colores
(rojo, verde y azul) nos dan la impresión de ser una imagen
uniforme al iluminarse. Todos los colores pueden
generarse con esta combinación de tríos. Cada uno de estos
puntos puede tener el valor de 0 a 255, lo que significa que el
posible número de colores es de 256*256*256 = 16,777,216
Cualquier color puede representarse con una específica combinación
de estos 3 números. En la línea 255,255,255 el primer número representa
el rojo, el segundo el verde, y el tercero el azul. Por consiguiente
un color puro, por ejemplo azul, será 0,0,255. Mientras más bajo el
número representado, menos brillante será el color. El color blanco
es representado por la combinación más brillante de los 3 colores:
255,255,255. Negro es completamente lo contrario: 0,0,0
Y para complicar un poco más las cosas, en la web no representas
los colores de esa manera directa, sino una representación de estos
números en valor Hexadecimal.
Números Hexadecimales
En nuestro sistema cotidiano de números, la base es 10.
Esto significa que cada vez que llegas a 10 le añades un dígito más
al número. Como sabemos, nuestro sistema decimal va del 0 al 9.
El sistema hexadecimal está basado en 16. Además de los números
base del 0 al 9, este sistema incorpora las letras A, B, C, D, E, y F
en donde las letras representan los últimos seis dígitos: A=11,
B=12, C=13, D=14, E=15, y F=16
Eso posibilita que que los colores 256,256,256, que es blanco
pueda representarse FFFFFF, ya que la combinación FF en el sistema
hexadecimal representa precisamente el 256 de 8 bits.
¿Nombre de colores?
Uno de los métodos de añadir color a tu página web
es simplemente usando el nombre del color. Los colores
deberán colocarse usando su nombre en inglés: black,
white, yellow, blue, cyan, brown, etc.
La desventaja de utilizar este tipo de coloración para tu web es
que algunos navegadores pueden no representar el color apropiado
o simplemente no colocar color alguno. Es por eso que te recomendamos
utilizar el código hexadecimal.
Red (rojo) = #FF0000
Green (verde)= #00FF00
Blue (azul) = #0000FF
Magenta (rojo y azul) = #FF00FF
Yellow (amarillo) = #FFFF00
Usar la paleta de colores seguros para la web es cuestión de
elección al crear una imagen o una página web. Es una decisión que
tiene consecuencias de diseño y presentación para tu sitio.
Por ejemplo, si colocas un color determinado, gris liviano, como un
color de fondo en una página o tabla, puede que se vea verdaderamente
bien en tu monitor de alta resolución. Sin embargo, al intentar mostrar
tu página a otra persona, con un monitor de resolución limitada (256 colores)
es muy probable que el color gris liviano sea representado más
como un color verde pálido que el color elegido por ti.
Esto se debe con certeza a que el color elegido por ti no es un
color seguro para la web. Los colores seguros son 216, y son
representados para máquina de 8 bits.
Precisamente, esta acción de no reconocer un color por parte del
monitor y elegir el más
cercano posible a la paleta de colores seguros es lo que conoce como
dithering. Eso sucede en monitores que pueden representar sólo 256
colores, los cuales son cada vez menos, pero aún se utilizan.
Entonces, en resumen podemos decir que los colores en la web
se definen utilizando una notación hexadecimal para la combinación
de rojo, verde y azul (R=red, G=green, B=blue, RGB). El valor
más pequeño es cero (0), hex= #00 y el color más alto es 255, hex= #FF
Con la notación hexadecimal podemos representar alrededor de 16millones
de colores.
Atributos HTML para especificar Colores
Al utilizar colores siempre es recomendable usar el sentido común para evitar
resultados indeseados. Por ejemplo un texto coloreado de azul con un fondo azul no será leíble.
Atributos para el tag <BODY>
<body bgcolor=»#00ff00″>
<body bgcolor=»#green»> usando el nombre del color es igualmente posible
Aplica este color al fondo de toda la página.
<body text=»#00ff00″>
Aplica el color a todo texto en la página
<body link=»#00ff00″>
Aplica el color a todo link no visitado en esa página
<body vlink=»#0000ff»>
Aplica el color a todo link visitado en esa página.
<body alink=»#ff0000″>
Aplica el color a todo link activado
Puedes igualmente aplicar color a otros TAGS en HTML.
<font color=»#cc3311″>ejemplo</font>
<table bgcolor=»#ff6610″>
Aplica color al fondo de la tabla
<th bgcolor=»#ff2200″>
Aplica color para el encabezado de la tabla
<td bgcolor=»#ff2200″>
Aplica color a la celda específica
También puedes utilizar estilos u hojas de estilos para especificar colores en tu wb
<p style=»background-color : #cccccc;»>
El uso de estilos te permite marcar no solo el tag <p>, sino
cualquier otro que quieras marcar con un color determinado. todo lo
escrito aquí tendrá un fondo color gris
Distribuidores autorizados.
Soporte técnico en español |
