Cómo indicar colores en HTML (con tabla y ejemplos)

Darle color a tu sitio web puede provocar emociones, establecer un ambiente adecuado y hacer que tu diseño en general sea más coherente y cohesivo. 

Todos los días vemos diferentes colores, y desde tiempos antiguos los hemos clasificado: colores primarios, secundarios, entre otros. Amarillo, azul y rojo se encuentran dentro de estos colores primarios. Adicionalmente, hay cientos de tonos diversos que también tienen su propio nombre: el rosa, por ejemplo, cuenta con diferentes tonalidades como neón, fucsia, magenta, chicle, entre otros.

No obstante, lo que para alguien es de un modo para otra persona puede ser algo completamente diferente. Por ejemplo, cuando algunas personas piensan en turquesa aseguran que proviene de un tono azul y otras del verde. Lo mismo pasa con el rosa neón y el fucsia. Los colores HTML ayudan a evitar este tipo de imprecisiones a la hora de diseñar un sitio web en HTML.

Si bien la utilización de colores es parte de las tareas más simples y comunes para un diseñador web, es probable que para alguien sin experiencia suene realmente complicado. Seguramente piensas que requerirás un amplio conocimiento de programación y un dominio de códigos realmente complejos, pero no hay nada más alejado de la verdad.

Para ayudarte a conocer el proceso del uso de colores en HTML hemos creado este contenido que te ayudará a elegir una paleta de colores paso a paso y con ejemplos. 

Los píxeles son las unidades básicas de las imágenes computacionales que generalmente están compuestos por 3 canales (o bytes) que representan el color rojo (Red), verde (Green) y azul (Blue), y cada uno de ellos está compuesto por 8 bits. Es por ello que suele decirse que cada píxel está compuesto por 24 bits. El resultado de esto es que cada byte puede tener un valor que va del 0 al 255 (producto de las 256 combinaciones posibles de 0 y 1 en los 8 bits), siendo 0 la tonalidad más oscura y 255 la más luminosa. 

Esta es una explicación simplificada del funcionamiento del modelo RGB de color; en él, cada uno de los canales debe tener un valor del 0 al 255, permitiendo hasta 16.777.216 combinaciones de valores de azul, rojo y verde; por tanto, esa misma cantidad colores es posible. 

Esto significa que cada color puede tener 256 valores diferentes y, por tanto, el mismo número de colores que el modelo de color RGB.

Los valores se representan de la siguiente manera: de 00 (la intensidad más baja de un color primario) a FF (la intensidad más alta de un color primario). Esto significa que cada código hexadecimal consta de 3 pares o 6 caracteres en total. Estos pueden ser cualquier combinación de diez números (0-9) y seis letras (a-f). En total, hay 16.777.216 combinaciones posibles. Te compartimos algunos de ellos.

• El código de color hexadecimal del blanco es #FFFFFF, ya que es una mezcla de los tres colores primarios en su máxima intensidad.
• El código de color hexadecimal del negro es #000000, ya que es una falta de color primario total.
• El código hexadecimal del rojo es #FF0000, pues requiere una mayor intensidad de color rojo que del resto de los otros dos colores primarios.

En el diagrama presentado a continuación puedes observar otras combinaciones:

Imagen de Smashing Magazine

Tabla de colores para HTML en HEX y RGB

En HTML tienes la opción de utilizar diferentes códigos de color, como RGB y HEX, así como HSL y otros que incluso utilizan el nombre de forma directa y no códigos alfanuméricos.

Veamos algunos ejemplos de los colores más comunes:

Para emplear de manera más sencilla los códigos de color HTML puedes encontrar algunas aplicaciones y herramientas de diseño web en línea, como los selectores de color y ruedas.

Por ejemplo, con el selector de color que te mostramos en la siguiente imagen puedes verificar cuáles son los códigos hexadecimales y en RGB o HSL de diferentes colores. Puedes ir probando tonalidades generales como el blanco o negro, hasta colores más profundos, como las gamas de verdes o los azules más brillantes.

Imagen de HTML Color Codes

Una vez que encuentres un color que te guste, toma nota del código. De esta manera podrás reutilizarlo en varios diseños y canales. Esto es esencial para mantener una consistencia efectiva en tu imagen.

Ahora que comprendes qué son los colores HTML y los códigos de color, te diremos cómo utilizarlos con éxito.

Ejemplos sobre cómo utilizar códigos de color en HTML

Como afirmamos al inicio de este artículo, utilizar códigos de color en HTML es realmente sencillo. Solamente debes conocer la estructura HTML y algunas reglas básicas de programación en este lenguaje para saber cómo hacer el llamado a un color y dárselo a tu contenido.

1. ¿Cómo indicar color de texto?

Supongamos que queremos modificar las características del siguiente texto, que consiste en un título y dos párrafos:

Lo primero que queremos hacer es cambiar los colores del texto. Para ello será importante que usemos la propiedad <style="color:         ;">. En el espacio vacío deberás colocar el nombre o código de color que quieras aplicar.

Supongamos que queremos el título en color azul, el primer párrafo en amarillo y el segundo en gris. Debido a que es nuestro primer intento, utilizaremos los nombres de los colores que HTML es capaz de identificar y relacionar con una tonalidad específica; en este caso <blue>, <yellow> y <gray>:

2. ¿Cómo indicar color de fondo?

Como puedes ver en el ejemplo anterior, resulta necesario poner un color de fondo al texto, ya que el amarillo no tiene un buen contraste con el blanco que está detrás, lo cual dificulta la lectura. 

Para cambiar el color del fondo podemos utilizar la propiedad <style="background-color:         ;">. En el espacio vacío deberás ingresar el color esperado.

En esta ocasión utilizaremos los códigos de color HEX para dar al fondo un tono amarillo (#FFFF00) en el título, negro (#000000) en el primer párrafo y rojo (#FF0000) en el último:

3. ¿Cómo indicar el color de borde?

Como puedes ver, ahora es más legible nuestro contenido. Sin embargo, también queremos enmarcarlo en un recuadro de otro color. Para llevar a cabo esta tarea debemos utilizar la propiedad <style="border:2px solid         ;">. 

En esta ocasión utilizaremos el código de color RGB para dar al título un borde color verde, al primer párrafo uno color fucsia y al ultimo un tono aqua. Ten en cuenta que el llamado <2px> hace referencia a que queremos un borde de 2 píxeles, mientras que <solid> indica que queremos un color sólido para el borde. 

Nuestro código lucirá así:

Recuerda que en estos casos es necesario poner los valores RGB entre paréntesis y separados por una coma.

Construyendo un sitio en color

El color puede ayudarte a enfatizar un elemento en tu página, crear reconocimiento de marca y hacer que tu sitio sea más memorable. Ahora que tienes un conocimiento básico de los códigos de colores HTML, puedes agregar o cambiar el color de tu sitio para crear un diseño atractivo y coherente con la imagen de tu empresa. 

Si aun así necesitas acompañamiento para diseñar tus páginas web puedes apoyarte en el sistema gratuito de gestión de contenido de CMS Hub, que te hará más sencillo el diseño, creación y puesta en marcha de tu sitio.