Los colores y HTML

  • Por
En este artículo aprenderás a crear colores en notación RGB con valores en hexadecimal, la manera más habitual de expresar un color en el lenguaje HTML. Explicamos la correcta utilización de los colores en el HTML.

En la composición de webs juegan un papel muy importante los colores. Usar una paleta de colores definida suele ayudar a la consistencia de un diseño y a transmitir ciertas sensaciones al usuario. Como parte de nuestro aprendizaje de HTML tenemos que detenernos a comprender cómo se expresan los colores en el lenguaje.

En HTML se usa una notación específica de especificar un color, compuesta por tres valores "RGB": Red, Green, Blue. Rojo, Verde y Azul. Es decir, que para conseguir un color cualquiera mezclaremos cantidades de cada uno de esos colores. RGB es el modelo usado para la creación de colores de los monitores y televisores, así que es un excelente modo de expresar color en un medio digital como una web.

Los valores RBG en HTML se indican en numeración hexadecimal, en base 16. (Los dígitos pueden crecer hasta 16. Como no hay tantos dígitos numéricos, se utilizan las letras de la A a la F).

Para conseguir un color, mezclaremos valores asignando dos dígitos a cada valor RBG. De esta manera: "#RRGGBB"

Como has observado, colocamos también una almohadilla "#" al principio, para indicar que esa cadena es un valor de color en hexadecimal.

Más adelante en el artículo veremos ejemplos en una grande paleta, com sus valores en RGB. No obstante ejemplos podrían ser #000000 para el negro, #FFFFFF para el blanco, #660000 sería un rojo oscuro o #FF0000 un rojo brillante.

Nota: Habrás podido observar en alguna ocasión que los colores también se pueden expresar con algunas palabras, de hecho en el artículo sobre Color y tipo de letra ya lo comentamos. No obstante, es bastante más común escribir en RGB, porque es más versátil y podemos conseguir más fácilmente cualquier tonalidad deseada.

Atributos de color en etiquetas HTML

En HTML existen numerosas etiquetas que soportan atributos de color. Para que tengas una primera referencia, así se cambiaría la fuente para escribir en rojo:

<font color="#FF0000">Rojo</font>

Como ves, al Atributo color le damos un valor RGB en formato hexadecimal. El caracter # se coloca al principio de la cadena.

Nota: De nuevo tenemos que advertir sobre la necesidad de expresar todo lo que son estilos mediante CSS. En HTML nos debemos centrar en lo que es escribir el contenido y en CSS en aplicar el estilo. Por supuesto, el color es más estilo que contenido, así que debería ir en el CSS. Es motivo por el cual toda la etiqueta FONT ha quedado en desuso, porque solamente nos servía para aplicar estilo. Para tu tranquilidad, en CSS los colores se pueden expresar de la misma manera que en HTML, por lo que no tendrás que aprender nada nuevo.

Por poner otro ejemplo, la etiqueta TABLE admite que se le exprese el color de fondo de la tabla. La veremos más adelante, pero lo consigues con el atributo bgcolor.

<table bgcolor="#ff8030">

Combinar otros colores

Al principio puede parecer difícil crear combinaciones de color con valores hexadecimales, pero con la práctica nos iremos acostumbrando y hasta seremos capaces de pensar un color y conseguir de cabeza un valor RGB aproximado. Nos vendrá bien tener en mente la rueda de colores:

Rueda de los colores

Pero al final de lo que resulta más fácil echar mano es de un programa de diseño gráfico, que tiene selectores de color que nos suelen dar los valores RGB para que los podamos usar en cualquier programa. Algunos editores vienen con "color pickers" integrados para facilitar esta tarea, sin tener que cambiar de programa. La mayoría de los editores puede instalar de manera adicional plugins para implementar selectores de color, ya que es una demanda muy habitual de los desarrolladores.

Por ejemplo, otros colores RGB los puedes combinar así. Aunque al final de este artículo tienes una tabla de color completa.

Colores seguros

Debemos estar preparados para recibir visitas desde todo tipo de dispositivos y a todos les debemos ofrecer una adecuada experiencia de usuario. En lo que respecta a los colores, no podemos saber a priori qué tipo de pantalla va a tener la persona que nos visita y la resolución de color. Por eso una buena idea es usar aquellos colores considerados seguros: "Safe colors", colores compatibles con todos los sistemas.

Nota: Hoy la necesidad de usar colores seguros (aquellos que se verán bien en todos los monitores, independientemente de su paleta de color), no es tan grande como hace años, porque la tecnología ha evolucionado mucho y es raro encontrar un monitor que solo soporte 256 colores. No obstante es un conocimiento que resulta interesante por el hecho de remarcar la naturaleza universal de la web y la necesidad de construir páginas que sean capaces de adaptarse a cada medio donde va a ser consultada. En este manual de HTML no vamos a entrar en este tipo de detalles, pero si te interesan deberías leer el Manual de Responsive Web Design.

La forma de conseguir colores seguros es limitando nuestros colores a los que se pueden conseguir utilizando los siguientes valores:

  • 00
  • 33
  • 66
  • 99
  • AA
  • CC
  • FF

Es interesante comentar que, cuando usamos colores seguros, podemos resumir la notación RGB usando tres caracteres en vez de 6. Por ejemplo, #000 equivale a #000000. O #ABC equivale a #AABBCC.

Usando todas las combinaciones de "safe colors", conseguimos la siguiente paleta de colores:

Nota para la curiosidad: Este fue el primer artículo publicado en DesarrolloWeb.com. Aunque revisado en 2016 su publicación original es de 1999.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

José María López Molina

28/5/2005
Aparte de los códigos RGB, también se pueden utilizar sus nombres en inglés.
Tengo hecha una página web con dichos nombres con su código correspondientes.

La página es la siguiente: http://webs.ono.com/semarimoli

18/6/2007
La aplicación de color la he guardado el archivo tal como está en esta página (en zip) lo he descomprimido en una carpeta pero en Mozilla Firefox junto la extensión No Script no me funciona y la dirección file:// la tengo permitida. En cambio, si cambio de motor a Internet Explorer con el ietab me funciona.

nando

23/10/2007
cual es el codigo del color transparente

Carolina

03/11/2008
tambien puede usarse el selector de colores de algun programa de diseño para obtener las combinaciones apropiadas. Personalmente, los que se muestran aki... pues si son lindos pero siempre se puede hacer algo mejor

redpoing

07/4/2009
paletas de colores con html
tambien he escrito un articulo referente al atributo &quot;color&quot; de la propiedad font, lo podeis ver aqui http://bobuu.blogspot.com/2009/04/60-html-estilos-y-efectos-de-fuentes.html

Miguel Ruiz

13/5/2009
Sonbras
Hola
Gracias por su didáctica página. Es excelente.
Deseo poner una bonita sombra a una foto, una que la destaque, pero no encuentro información en cuanto a cómo escribir el código. ¿Podrían ayudarme?
Mil gracias

Pablo

24/5/2009
¿que norma de color?
Lo primero felicitaros por vuestra web
y además haceros dos preguntas de este Tema 8:

¿que norma de color es la que se aplica para usar unos "colores limitados" que explicais en este tema?

¿ y esa norma se aplica sólo a html, o a todos los lenguajes de diseño de webs?

gracias por adelantado y felicitaros por esta excelente web

Pedro

23/9/2009
Color texto
¿Hay alguna forma de hacer que el color del texto sea el que tenga el usuario configurado en su sistema?
Por ejemplo Ubuntu Studio, usado por muchos diseñadores del mundo del software libre usa fondos oscuros y textos blancos, pero en muchas webs y en formularios, el color de fondo es el del sistema pero la fuente negra, con lo que no se lee nada. ¿Cómo es posible que la página respete el color de fondo del sistema del usuario pero no el de la fuente?, y sobre todo ¿cómo hacer que tembién el color de la fuente sea respetado?

Gracias y saludos.

Dani Good

20/6/2010
Excelente explicacion
Gracias por esplicar como se llegan a esos códigos HMTL

Dani Good
http://www.color-es.net

Lucas

02/8/2010
Cual es o como se pone el color de fuente transparente
tambien necesito el codigo dle color transparente. Aclaro q me refiero al color dela fuente, no del background. Eso necesito mucho, a ver si eso se puede hacer o no. Muchas gracias.
color transparente de fuente.

Felicidades por esta maravillosa web, de todo corazon. Es muy util, practica y comoda, ya q no nos obligan a registrarnos ni a loguearnos para poder hacer un comentario, pues algunas otras web tienes q registrarte si o si para poder ver el contenido. Cuando veo esa clase de webs asi no aguanto ni 1 segundo mas y me largo, xD...Gracias gracias gracias!!!

nora

07/10/2010
html
hola intente colocar con font-family varias letras y no funciona podrian ayudarme a resolver eso

misael__segura_perdomo

03/5/2011
convinacion de colores RGB
Cual es el codigo para que al elegir los colores de numero decimales, me muestre el color y la intencidad de contiene segun su mescla. o como puedo hacerlo breve y que lo pueda mostrar en valores y color.... Gracias;

Martin

13/7/2011
Colores definidos en sistema decimal
?Como represento cada color con un valor decimal?

eglis2010

20/10/2011
Colores
Esto es una buena página para trabajar en las páginas web para los sitios