Colores CSS
Ya sabes apuntar a elementos. Ahora píntalos. La primera habilidad de color es sencilla: define el color del texto con la propiedad color. Fondos, degradados y la matemática completa del color vienen después — hoy, color de primer plano legible y reutilizable.
¿Qué hace color?
La propiedad color define el color de primer plano — sobre todo el de las letras. El navegador también usa ese color calculado para lo que sigue currentColor (bordes, algunos SVG y decoraciones). No rellena la caja detrás del texto; eso es background-color (módulos siguientes).
Colores con nombre de un vistazo
CSS trae muchos colores con nombre — palabras clave como teal y navy. Memoriza primero un conjunto cotidiano pequeño. Hex exacto y rgb() llegan en la lección de valores de color.
📊 Colores con nombre cotidianos
| Nombre | Sensación | Uso típico |
|---|---|---|
black / white |
Contraste máximo | Cuerpo de texto o lienzo (con cuidado) |
navy / teal |
Acentos de marca calmados | Enlaces, títulos, notas |
maroon / crimson |
Aviso o énfasis fuerte | Errores, etiquetas de oferta (con mesura) |
gray / silver |
Texto secundario suave | Pies de foto, etiquetas apagadas |
transparent |
Totalmente transparente | Ocultar un borde sin quitar la propiedad |
Color de texto con un nombre
Escribe una declaración normal: propiedad color, valor un color con nombre. Empieza por el párrafo para que la página se sienta intencionada.
Color con nombre en el texto del párrafo
cssp {
color: teal;
}Cómo leer el resultado
Cada <p> que coincida dibuja sus letras en teal. El nombre de la propiedad siempre es color — no text-color ni font-color.
Los títulos pueden diferir del cuerpo
A menudo quieres un título más oscuro y un párrafo más calmado. Selectores aparte, colores aparte.
Acento de título frente a cuerpo
cssh1 {
color: navy;
}
.lead {
color: gray;
}Hábito de diseño
Los títulos de alto contraste ayudan a escanear. El texto secundario suave evita que los pies griten. Aun así, deja contraste suficiente para leer.
El color se hereda
Los hijos toman el color del padre salvo que pongan el suyo. Por eso un color en un contenedor puede tematizar todo un bloque de texto.
Color heredado en un bloque de nota
css.note {
color: maroon;
}¿Qué se hereda?
Dentro de <div class="note">…</div>, párrafos y spans siguen maroon hasta que una regla más fuerte los cambie. La herencia es una ventaja — no un fallo.
currentColor sigue al texto
currentColor significa «usa el color calculado del elemento». Útil cuando un borde o icono debe ir a la par del texto.
El borde sigue al texto con currentColor
css.badge {
color: teal;
border: 2px solid currentColor;
padding: 0.25rem 0.5rem;
}¿Por qué molestarse?
Cambia color una vez — el borde sigue. No hace falta un segundo teal fijo que sincronizar.
Tarjeta con tema (todo junto)
Combina color de contenedor, override más suave en el hijo y acento currentColor.
Tema de tarjeta con override + currentColor
css.card {
color: navy;
border: 1px solid currentColor;
padding: 1rem;
}
.card .muted {
color: gray;
}color no es el fondo
Los principiantes suelen escribir color cuando querían el relleno detrás del texto. Sepáralos desde el primer día:
color→ texto (primer plano)background-color→ la caja pintada detrás del contenido (pronto)
Pruébalo tú
- Página con título,
<p class="lead">y<div class="note">con un párrafo corto. - Pon
h1 { color: navy; },p { color: teal; }y.note { color: maroon; }— comprueba cada zona. - Añade
.badge { color: teal; border: 2px solid currentColor; }en un span pequeño — el borde debe coincidir con el texto. - Dentro de
.card, navy en la tarjeta ycolor: grayen.muted— el override del hijo gana en esa línea. - Opcional:
color: transparenten una etiqueta decorativa — el texto desaparece y el espacio de maquetación permanece.
Errores frecuentes
- Pintar el fondo de la caja con
color— usabackground-colormás adelante - Inventar nombres (
lightishblue) — quédate con palabras CSS reales o espera hex/rgb - Esperar que toda propiedad herede como
color— muchas no lo hacen - Saltar ya a cadenas hex largas antes de dominar los colores con nombre
- Ignorar el contraste (gris pálido sobre blanco) — bonito pero ilegible
Resumen
colordefine el color de texto en primer plano- Los colores con nombre (
teal,navy,maroon, …) bastan al principio - Los hijos heredan
colorhasta que lo anulen currentColorreutiliza el color de texto calculado para bordes y similares- Formatos profundos (hex, rgb, hsl) en Valores de color; fondos en lecciones posteriores
- Practica con título / lead / note hasta que la propiedad sea automática
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior