Propiedad color de CSS
La propiedad color describe el color del contenido de texto y de las decoraciones de texto. Un color de fondo puede combinarse con un color de texto para facilitar la lectura. Puedes encontrar colores web en nuestra sección de Colores HTML y probar a elegir tus colores preferidos con nuestra herramienta Selector de color. El valor predeterminado de esta propiedad es currentcolor.
| 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
INFO
Puedes establecer valores hexadecimales, RGB, HSL o nombres de colores como valor para la propiedad color. Nota: El valor inicial es currentcolor, lo que significa que hereda el color de 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 un 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 un 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 un 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 un 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>Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| color | Describe el color del texto y de las decoraciones de texto. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl(), hsla(). | Probarlo » |
| initial | Hace que la propiedad use su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles son las tres formas de especificar colores en CSS según el contenido de la URL proporcionada?