Si queremos que nuestra web deje de parecer un documento de texto recién salido de 1997, tenemos que empezar a pintarla. Para eso, necesitamos aplicar colores.
Técnicamente, un color en CSS es un valor dentro de un espacio de color (como sRGB). Este dice al navegador el tono, luminosidad y transparencia que debe aplicar.
CSS nos permite controlar de muchos elementos, como el color del texto, los fondos, los bordes, las sombras y hasta transiciones suaves entre colores.
En este artículo vamos a profundizar en las diferentes sintaxis y formatos que nos ofrece el estándar.
Dónde usamos colores
En CSS los colores aparecen en muchas propiedades distintas. Algunas son obvias, como color o background-color. Otras aparecen más adelante, como border-color, box-shadow o incluso text-decoration-color.
.tarjeta {
color: #222222;
background-color: #ffffff;
border: 1px solid #dddddd;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
Formas de escribir un color
En CSS no hay una única manera de decir “rojo”. El navegador entiende varios formatos, cada uno con sus ventajas y sus pequeñas manías.
Nombres predefinidos
CSS incluye una lista de más de 140 nombres de colores en inglés que el navegador reconoce directamente.
p {
color: red;
background-color: tomato;
border-color: lightblue;
}
Son cómodos para pruebas rápidas, ejemplos o prototipos. Para proyectos reales se quedan un poco cortos, porque no nos dan demasiado control sobre tonos exactos, transparencias o escalas de color.
Hexadecimal
El formato hexadecimal es el clásico de la web. Se escribe con una almohadilla # seguida de seis caracteres que representan rojo, verde y azul.
h1 {
color: #ff0000; /* Rojo puro */
background: #336699; /* Azul grisáceo */
}
Los dos primeros caracteres son el canal rojo, los dos siguientes el verde y los dos últimos el azul. Cada canal va de 00 (nada de luz) a ff (luz a tope).
También existe la versión corta, como #fff para blanco o #000 para negro. Y en CSS moderno podéis añadir transparencia con ocho caracteres, por ejemplo #00000080 para un negro al 50%.
RGB y transparencia
El sistema RGB mezcla rojo, verde y azul con valores numéricos del 0 al 255.
.caja {
color: rgb(255, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}
El cuarto valor es el canal alpha, que controla la transparencia. 0 significa totalmente transparente y 1 totalmente opaco.
.velo {
background: rgb(0 0 0 / 50%);
}
La sintaxis moderna permite escribirlo con espacios y barra (/). Es la misma idea, pero más cómoda cuando trabajamos con transparencias.
HSL
El formato HSL suele ser más intuitivo para las personas, porque separa el color en tono, saturación y luminosidad.
.alerta {
background-color: hsl(0 100% 50%);
color: hsl(0 100% 50% / 50%);
}
- Hue: El tono en la rueda de color.
0es rojo,120verde,240azul. - Saturation: La intensidad del color.
0%es gris,100%es color vivo. - Lightness: La luminosidad.
0%es negro,100%blanco.
HSL es muy útil para crear variantes. Por ejemplo, podéis mantener el mismo tono y cambiar solo la luminosidad para crear estados hover, bordes o fondos suaves.
