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.
Guía básica sobre HTML y CSS para marketers
Obtén una introducción básica a HTML y CSS diseñada para profesionales del marketing, que te permitirá comprender y utilizar estos lenguajes para mejorar tus habilidades digitales.
- Conoce qué es el HTML y el CSS.
- Descubre códigos esenciales de HTML.
- Aprende a actualizar el CSS.
- HTML y CSS: aspectos a evitar.
Descargar ahora
Todos los campos son obligatorios.
Qué son los colores en HTML
Son códigos que los navegadores interpretan para mostrar tonalidades específicas en elementos web. Pueden definirse con modelos como RGB (rojo, verde y azul), HEX (versión hexadecimal de RGB) o HSL (matiz, saturación y luminosidad), permitiendo millones de combinaciones para personalizar textos, fondos y bordes y lograr un diseño atractivo y funcional de los sitios web.
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. Pero antes, te dejamos esta tabla con algunos conceptos clave que nos acompañarán en el recurrido.
Qué colores están disponibles en HTML
La respuesta más precisa a esta pregunta es que existen 16.777.216 colores disponibles para ser usados en el diseño web. Pero ¿de dónde surge este número? Intentemos aclarar este punto.
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.
Qué son los colores hexadecimales
Son los colores más utilizados en sitios web y aplicaciones (están en formato HTML), y suelen ser conocidos como colores HEX. Se componen de códigos de 3 bytes (precedidos por un asterisco) que permiten representar la intensidad de los colores primarios (rojo, verde y azul), justo como el formato RGB, y forman un sistema de numeración de 16 símbolos.
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 código 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:
| COLOR | NOMBRE DEL COLOR | CÓDIGO DE COLOR HEX | CÓDIGO DE COLOR RGB |
|---|---|---|---|
| BLANCO | #FFFFFF | 255, 255, 255 | |
| Plata | #C0C0C0 | 192, 192, 192 | |
| Negro | #000000 | 0, 0, 0 | |
| Rojo | #FF0000 | 255, 0, 0 | |
| Marrón | #800000 | 128, 0, 0 | |
| Amarillo | #FFFF00 | 255, 255, 0 | |
| Oliva | #808000 | 128, 128, 0 | |
| Lima | #00FF00 | 0, 255, 0 | |
| Verde | #008000 | 0, 128, 0 | |
| Aqua | #00FFFF | 0, 255, 255 | |
| Turquesa | #008080 | 0, 128, 128 | |
| Azul | #0000FF | 0, 0, 255 | |
| Azul marino | #000080 | 0, 0, 128 | |
| Fucsia | #FF00FF | 255, 0, 255 | |
| Púrpura | #800080 | 128, 0, 128 | |
| Gris | #808080 | 128, 128, 128 | |
| Rojo oscuro | #8B0000 | 139, 0, 0 | |
| Coral | #FF7F50 | 255, 127, 80 | |
| Dorado | #FFD700 | 255, 215, 00 | |
| Azul cielo | #87CEEB | 135, 206, 150 |
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.
Cuándo es mejor usar colores RGB en lugar de HEX o HSL
El modelo RGB es más útil en animaciones CSS o situaciones donde necesitas manipular colores dinámicamente. Por ejemplo, con RGBA puedes ajustar la transparencia:
Por otro lado, el HEX es más compacto para almacenar colores estáticos, y HSL es ideal cuando quieres controlar la saturación y la luminosidad sin alterar el tono, facilitando el diseño de paletas armónicas.
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 poner un 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 poner un 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 poner un 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. Puedes apoyarte de nuestra tabla de código de colores para elegir la gama cromática correcta y crear una mayor interacción en tu sitio web.
Cómo combinar colores en HTML de forma armoniosa
Al diseñar una página web, la elección de colores no solo debe ser estética, sino también funcional. Colores bien combinados crean experiencias visuales coherentes, transmiten emociones específicas y refuerzan la identidad de la marca.
Veamos los principios básicos para crear combinaciones armoniosas que eleven tu sitio web, y algunas herramientas útiles para facilitar el proceso.
Existen varios principios y esquemas de color que pueden guiar la creación de combinaciones equilibradas. Estos esquemas ayudan a organizar los colores de manera que se complementen entre sí, mejorando la experiencia visual de tu sitio:
-
Colores complementarios
-
Combina dos colores opuestos en el círculo cromático, como el azul y el naranja.
-
Ejemplo: un fondo azul claro (#ADD8E6) con detalles en naranja brillante (#FFA500).
-
Ideal para generar contraste y atraer atención en botones o llamados a la acción.
-
-
Colores análogos
-
Usa colores adyacentes en el círculo cromático, como verde, verde-amarillo y amarillo.
-
Ejemplo: Verde menta (#98FF98) junto a un verde más oscuro (#32CD32).
-
Este esquema da un toque suave y coherente, perfecto para fondos o elementos secundarios.
-
-
Triádico
-
Tres colores equidistantes en el círculo cromático, como rojo, amarillo y azul.
-
Ejemplo: Fondo blanco con detalles en rojo tomate (#FF6347) y azul real (#4169E1).
-
Produce un efecto vibrante pero equilibrado.
-
-
Esquema monocromático
-
Usa diferentes tonos de un mismo color.
-
Ejemplo: Variantes de azul (#1E90FF, #4682B4, #B0C4DE) en diferentes secciones.
-
Este enfoque es ideal para diseños minimalistas y sofisticados.
-
Herramientas para la selección de colores armoniosos en tu sitio web
- Adobe Color: una plataforma que permite experimentar con esquemas cromáticos como complementarios, análogos o triádicos. También ofrece accesibilidad mediante pruebas de contraste. Visitar Adobe Color aquí.
- Coolors: esta herramienta genera paletas aleatorias que puedes modificar a tu gusto. Además, permite exportar las paletas en diferentes formatos, facilitando su integración en proyectos web.Visitar Coolors aquí.
- Paletton: es una opción ideal para experimentar con combinaciones avanzadas. Permite previsualizar paletas en tiempo real y ajustar matices y saturación. Visitar Palettom aquí.
- ColorZilla: esta extensión de navegador te ayuda a identificar colores de cualquier sitio web y crear paletas personalizadas. Es especialmente útil para diseñadores que buscan inspiración. Descarga ColorZilla aquí.
Ya sabes, crear combinaciones armoniosas de colores no es solo una cuestión de estética; es una estrategia que impacta la forma en que los usuarios experimentan tu sitio web. Con las herramientas y principios adecuados, puedes diseñar espacios digitales atractivos, accesibles y funcionales.
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.
Preguntas frecuentes acerca de los colores HTML
A continuación encontrarás algunas de las preguntas más comunes que recibimos en la comunidad de HubSpot sobre este tema:
1. Qué criterios debo considerar al elegir colores para mi sitio web
Considera tres factores clave: identidad de la marca, asegurando que los colores reflejen su personalidad; accesibilidad y legibilidad, utilizando combinaciones con contraste adecuado; y la psicología del color, que influye en la percepción del usuario (por ejemplo, el verde transmite calma y los amarillos pueden evocar optimismo o advertencia).
2. Cómo optimizar los colores para la accesibilidad web
Utiliza herramientas como Contrast Checker y Adobe Color para medir el contraste entre fondo y texto, asegurando que cumplan con los estándares WCAG (un mínimo de 4.5:1 para texto normal y 3:1 para títulos). Además, evita usar únicamente colores para transmitir información; incorpora íconos o patrones adicionales que faciliten la comprensión para usuarios con daltonismo o discapacidades visuales.
3. Qué pasa si elijo un color que no está en la lista estándar de HTML
Si el nombre del color no está en la lista predefinida de HTML, el navegador no lo reconocerá. En estos casos, es mejor utilizar un código hexadecimal o RGB para asegurar que el color se muestre correctamente. Por ejemplo, en lugar de intentar usar un nombre como “skyblue2”, puedes usar su equivalente en código: #87CEEB o rgb (135, 206, 235).
