16/04/2020
Dominar el color en una página web es uno de los primeros y más impactantes pasos que cualquier desarrollador o diseñador puede dar. El color no solo define la estética y la identidad de una marca, sino que también juega un papel crucial en la experiencia del usuario, la legibilidad y la accesibilidad. Cambiar el color de las letras puede parecer una tarea sencilla, pero existen múltiples formas de hacerlo, cada una con sus propias ventajas y contextos de uso. En esta guía exhaustiva, exploraremos todos los métodos para aplicar color al texto usando HTML y, principalmente, CSS, la herramienta estándar y más poderosa para esta tarea.
La forma antigua (y no recomendada): La etiqueta <font> de HTML
Antes de sumergirnos en los métodos modernos, es importante mencionar una reliquia del pasado: la etiqueta <font>. En los primeros días de la web, se utilizaba esta etiqueta de HTML para dar estilo directamente al texto, incluyendo el color.
Un ejemplo sería:
<p>Este es un texto con una <font color="red">palabra en rojo</font>.</p>¿Por qué no deberías usarla? La etiqueta <font> ha sido declarada obsoleta en HTML5. La filosofía del desarrollo web moderno se basa en la separación de responsabilidades: HTML se encarga de la estructura y el contenido, mientras que CSS se encarga de la presentación y el estilo. Mezclar estilo directamente en el HTML de esta manera hace que el código sea difícil de mantener, menos escalable y va en contra de las buenas prácticas actuales.
El método moderno y correcto: Usando CSS
CSS (Cascading Style Sheets) es el lenguaje diseñado para estilizar documentos HTML. La propiedad fundamental para cambiar el color del texto es, sencillamente, color. La verdadera pregunta es cómo y dónde aplicamos esta propiedad. Existen tres formas principales de vincular CSS a tu HTML.
1. CSS en línea (Inline CSS)
Este método consiste en aplicar estilos directamente a una etiqueta HTML específica usando el atributo style. Es rápido para pruebas o para aplicar un estilo único que no se repetirá.
Ejemplo:
<p style="color: blue;">Este párrafo entero es de color azul.</p> <p>En este otro, solo <span style="color: green;">algunas palabras</span> son verdes.</p>Ventajas:
- Rápido para cambios puntuales.
- Máxima especificidad (sobrescribe otras reglas de CSS).
Desventajas:
- Mala práctica para sitios web completos.
- Hace el mantenimiento muy complicado.
- Mezcla estructura (HTML) con presentación (CSS).
2. CSS interno (Internal CSS)
Con este método, las reglas de CSS se colocan dentro de la etiqueta <style>, que a su vez se ubica en el <head> del documento HTML. Estas reglas se aplican a toda la página.
Ejemplo:
<!DOCTYPE html> <html> <head> <title>Ejemplo de CSS Interno</title> <style> h2 { color: purple; } p { color: #333333; /* Un gris oscuro */ } .destacado { color: orange; } </style> </head> <body> <h2>Este encabezado es morado</h2> <p>Este párrafo tiene un texto gris oscuro.</p> <p class="destacado">Este párrafo es naranja gracias a una clase.</p> </body> </html>Ventajas:
- Útil para estilos que solo se aplican a una única página.
- Mantiene el CSS separado de las etiquetas HTML individuales.
Desventajas:
- Los estilos no se pueden reutilizar en otras páginas del sitio.
- Aumenta el tiempo de carga de la página si las reglas son muchas.
3. CSS externo (External CSS)
Este es el método más recomendado y profesional. Los estilos se escriben en un archivo separado con la extensión .css (por ejemplo, estilos.css) y luego se enlaza al documento HTML mediante la etiqueta <link> en el <head>.
Archivo `estilos.css`:
body { font-family: Arial, sans-serif; } h3 { color: navy; } .alerta { color: crimson; font-weight: bold; }Archivo `index.html`:
<!DOCTYPE html> <html> <head> <title>Ejemplo de CSS Externo</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <h3>Este encabezado es de color azul marino.</h3> <p class="alerta">Este es un mensaje de alerta importante.</p> </body> </html>Ventajas:
- La mejor práctica: Mantiene una separación total entre contenido y estilo.
- Reutilizable: Un solo archivo CSS puede dar estilo a todo un sitio web.
- Mantenimiento sencillo: Para cambiar el color de todos los títulos, solo modificas una línea en un archivo.
- Mejora el rendimiento: El navegador guarda el archivo
.cssen caché, por lo que las páginas subsiguientes cargan más rápido.
Formatos de color en CSS
Una vez que sabes dónde escribir tu CSS, necesitas saber cómo especificar el color. CSS ofrece varios formatos:
Nombres de color
Existen más de 140 nombres de color predefinidos que los navegadores entienden, como red, blue, green, yellow, black, white, cyan, magenta, lightgray, etc. Son fáciles de recordar y buenos para prototipos rápidos.
p { color: tomato; }
Códigos Hexadecimales (HEX)
Es el formato más común. Se representa con un # seguido de seis caracteres (0-9, A-F). Los dos primeros representan el rojo (R), los dos siguientes el verde (G) y los dos últimos el azul (B). #000000 es negro, #FFFFFF es blanco y #FF0000 es rojo puro.
h2 { color: #2E8B57; } /* Verde mar */
Si cada par de caracteres es idéntico, se puede usar una versión abreviada de tres caracteres: #F00 es lo mismo que #FF0000.
Valores RGB y RGBA
RGB significa Red, Green, Blue. El color se define especificando la intensidad de cada uno de estos componentes en una escala de 0 a 255.
div { color: rgb(46, 139, 87); } /* El mismo Verde mar de antes */
RGBA añade un cuarto valor, el canal Alfa (A), que controla la opacidad. Va de 0.0 (totalmente transparente) a 1.0 (totalmente opaco).
.subtitulo { color: rgba(0, 0, 0, 0.5); } /* Negro con 50% de transparencia */
Valores HSL y HSLA
HSL significa Hue, Saturation, Lightness (Tono, Saturación, Luminosidad). Es una forma más intuitiva de pensar en el color para los humanos.
- Tono (Hue): Es el color en sí, un valor en grados de 0 a 360 en la rueda de colores (0 es rojo, 120 es verde, 240 es azul).
- Saturación (Saturation): Es la pureza del color, un porcentaje (0% es un tono de gris, 100% es el color completo).
- Luminosidad (Lightness): Es el brillo, un porcentaje (0% es negro, 100% es blanco, 50% es el color normal).
a { color: hsl(205, 86%, 51%); } /* Un azul brillante */
HSLA, al igual que RGBA, añade un canal Alfa para la opacidad.
Tabla Comparativa de Formatos de Color
| Formato | Sintaxis de Ejemplo (Rojo) | Ventajas | Desventajas |
|---|---|---|---|
| Nombre | color: red; | Fácil de leer y recordar. | Paleta de colores muy limitada. |
| HEX | color: #FF0000; | Muy extendido, preciso, sintaxis corta. | No es intuitivo de modificar sin un selector de color. No soporta transparencia de forma nativa. |
| RGB / RGBA | color: rgb(255, 0, 0); | Fácil de entender, soporta transparencia (RGBA). | Sintaxis un poco más larga que HEX. |
| HSL / HSLA | color: hsl(0, 100%, 50%); | Muy intuitivo para crear paletas de colores (ej. cambiar solo la luminosidad para obtener tonos más claros/oscuros). Soporta transparencia (HSLA). | Menos común en algunas herramientas de diseño. |
Buenas Prácticas: Legibilidad y Accesibilidad
Aplicar colores es fácil, pero hacerlo bien requiere consideración. La legibilidad es fundamental. Un texto debe poder leerse sin esfuerzo.
El factor más importante aquí es el contraste entre el color del texto y el color del fondo. Un texto gris claro sobre un fondo blanco será casi imposible de leer para muchas personas. Las Pautas de Accesibilidad al Contenido en la Web (WCAG) establecen unos ratios de contraste mínimos para garantizar que las personas con discapacidades visuales, como la baja visión o el daltonismo, puedan navegar por tu contenido.
- Nivel AA (mínimo): Un ratio de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande.
- Nivel AAA (mejorado): Un ratio de contraste de al menos 7:1 para texto normal y 4.5:1 para texto grande.
Existen muchas herramientas en línea (buscando "contrast checker") que te permiten introducir tus colores de texto y fondo para verificar si cumplen con estos estándares de accesibilidad. Elegir colores accesibles no es solo una buena práctica; es un acto de inclusión que permite que más personas accedan a tu información.
Preguntas Frecuentes (FAQ)
¿Cuál es el mejor método para aplicar color?
Para cualquier proyecto que no sea una simple prueba, el CSS externo es la mejor opción. Mantiene tu código organizado, es fácil de mantener y mejora el rendimiento del sitio web.
¿Puedo aplicar un color diferente a una sola palabra dentro de un párrafo?
¡Sí! La mejor manera de hacerlo es envolver esa palabra o frase en una etiqueta <span> y aplicarle un estilo. El <span> es un elemento en línea que no tiene un impacto visual por sí mismo, por lo que es perfecto para aplicar estilos específicos.
<p>La mayor parte del texto es normal, pero esta <span style="color: #D2691E;">palabra es importante</span>.</p>
¿Cómo puedo hacer que el color del texto cambie cuando paso el ratón por encima?
Puedes usar la pseudo-clase :hover en CSS. Esto es muy común para los enlaces.
a { color: blue; text-decoration: none; } a:hover { color: red; text-decoration: underline; }Este código hará que los enlaces sean azules por defecto y se vuelvan rojos con un subrayado cuando el usuario coloque el cursor sobre ellos.
¿Qué pasa si defino el color en varios sitios (en línea, interno y externo)?
CSS tiene un sistema de cascada y especificidad para resolver estos conflictos. Como regla general, un estilo en línea (style="...") siempre ganará a un estilo interno o externo. Entre un estilo interno y uno externo, ganará el que se declare más tarde en el documento HTML. Sin embargo, hay reglas más complejas de especificidad (un ID tiene más peso que una clase, por ejemplo) que determinan el resultado final.
Si quieres conocer otros artículos parecidos a Cambiar el color de las letras en HTML y CSS puedes visitar la categoría Juegos.