Propiedad color de CSS
La propiedad color de CSS define el color del contenido de texto y sus decoraciones. Prueba los ejemplos de la propiedad color de CSS y observa los resultados.
La propiedad color de CSS establece el color de primer plano de un elemento — es decir, el color de su contenido de texto y cualquier decoración de texto (subrayados, sobrerayados, tachados). No afecta a fondos, bordes ni imágenes; para esos elementos se usan propiedades específicas como background-color.
Esta página cubre la sintaxis de color, todos los formatos de valor que se le pueden pasar (colores con nombre, hexadecimal, RGB/RGBA, HSL/HSLA), cómo se hereda color y cómo mantener el texto legible. Puedes explorar los valores de color web en nuestra sección colores HTML, consultar palabras clave en nombres de colores CSS y elegir un tono personalizado con nuestra herramienta Color Picker.
Dado que color se hereda, establecerlo en un contenedor se aplica en cascada a todo el texto descendiente a menos que un elemento hijo lo sobreescriba — por eso a menudo solo necesitas declararlo una vez en body. El valor predeterminado es currentcolor, una palabra clave que se resuelve con el valor de color actualmente en vigor, lo cual es útil para mantener los bordes o rellenos SVG sincronizados con el color del texto.
| Valor inicial | currentcolor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | Sí. |
| Animable | Sí. El color es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.color = "#1c87c9"; |
Sintaxis
Sintaxis de la propiedad color de CSS
color: color | initial | inherit;Ejemplo de la propiedad color:
Ejemplo de la propiedad color de CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Resultado
Puedes usar hexadecimal, RGB, HSL o nombres de color como valor para la propiedad color. Nota: El valor inicial es currentcolor, lo que significa que hereda el color del texto de su elemento padre.
Ejemplo de la propiedad color con un valor de color con nombre:
Ejemplo de la propiedad color de CSS con valor de color con nombre
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with a named blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Ejemplo de la propiedad color con un valor hexadecimal:
Ejemplo de la propiedad color de CSS con valor hexadecimal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a hexadecimal color value (#8ebf42 for green).</p>
<p>This is some paragraph for example.</p>
</body>
</html>Ejemplo de la propiedad color con un valor RGB:
Ejemplo de la propiedad color de CSS con valor RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a RGB color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Ejemplo de la propiedad color con un valor HSL:
Ejemplo de la propiedad color de CSS con valor HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with an HSL color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Elección de un formato de color
Los cuatro formatos anteriores pueden describir el mismo color — la elección depende de la legibilidad y lo que necesitas controlar:
- Colores con nombre (
blue,tomato,rebeccapurple) son los más legibles, pero están limitados a una lista fija de palabras clave. Son adecuados para prototipos rápidos. - Hexadecimal (
#8ebf42) es el más común en producción. Los tres pares representan rojo, verde y azul en base 16. Un 4.° u 8.° dígito añade alfa:#8ebf4280es ~50% opaco. - RGB (
rgb(142, 191, 66)) usa los mismos canales que el hexadecimal, pero en decimal, lo que es más fácil de leer y de generar desde código. - HSL (
hsl(89, 43%, 51%)) describe el matiz (0–360°), la saturación y la luminosidad. Es el más intuitivo cuando quieres ajustar un color a mano — sube la luminosidad para un estado hover sin tocar el matiz.
Transparencia con RGBA y HSLA
Agrega un canal alfa con rgba() o hsla() para hacer el texto semitransparente. El alfa es un número de 0 (completamente transparente) a 1 (completamente opaco):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.faded {
color: rgba(28, 135, 201, 0.5);
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p class="faded">This paragraph is 50% transparent blue.</p>
</body>
</html>Para desvanecer un elemento completo (texto, bordes, fondo e hijos juntos) en lugar de solo el color del texto, utiliza la propiedad opacity.
Elegir un color de texto es también una decisión de accesibilidad. El texto y su fondo deben tener suficiente contraste para lectores con baja visión: WCAG exige una relación de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande. El gris claro sobre blanco puede parecer elegante, pero a menudo no supera esta prueba.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| color | Describe el color del texto y las decoraciones de texto. Se pueden usar nombres de color, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla(). | Pruébalo » |
| initial | Hace que la propiedad utilice su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |