W3docs
es
Iniciar sesión

Propiedad color de CSS

The CSS color property describes the color of the text content and text decorations. Please, try yourself the CSS color Property examples and see the results.

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 inicialcurrentcolor
Se aplica aTodos los elementos. También se aplica a ::first-letter y ::first-line.
HeredadoSí.
AnimableSí. El color es animable.
VersiónCSS1
Sintaxis DOMobject.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>
Pruébalo tú mismo »

Resultado

CSS color Property

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>
Pruébalo tú mismo »

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>
Pruébalo tú mismo »

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>
Pruébalo tú mismo »

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>
Pruébalo tú mismo »

Valores

ValorDescripciónProbarlo
colorDescribe el color del texto y de las decoraciones de texto. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl(), hsla().Probarlo »
initialHace que la propiedad use su valor predeterminado.Probarlo »
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

¿Cuáles son las tres formas de especificar colores en CSS según el contenido de la URL proporcionada?