La Propiedad COLOR

Se utiliza para establecer el color del texto de un elemento HTML. Es una de las propiedades fundamentales en CSS para controlar la apariencia visual de tu página web.

Principalmente: Con la propiedad color del CSS, es posible establecer un valor para el color del texto, es decir, define el color del texto para todo el contenido del Elemento HTML al que se le aplica esta propiedad.

TIP: Puede combinar esta propiedad color con la propiedad background-color para hacer el texto más legible para los visitantes y/o usuarios.

Alternativamente: al quedar establecido este valor de color con esta propiedad CSS, queda también establecido como el valor de color predeterminado del Elemento HTML, anulando así, el valor predeterminado que le establece el navegador web del visitante y/o usuario, y con esto, es posible extender el valor a otras propiedades; tanto en el mismo ámbito del elemento HTML como en la propiedad border-color, o en propiedades de elementos HTML anidados como en la propiedad background-color, solo estableciéndoles el valor currentcolor a estas.

Sintaxis CSS

color: color|initial|inherit;

Valores de la Propiedad

Valor	Descripción
`initial`	Se establece la propiedad a su valor inicial, es decir, a el valor predeterminado del elemento HTML.
`inherit`	Se establece la propiedad a el valor heredado, es decir, toma el valor que tiene el Elemento HTML que lo contiene (el Elemento Padre).
`unset`	Se establece la propiedad a no definida, es decir, sin valor.
`currentcolor`	Si el Elemento HTML Padre, se le estableció un valor a la propiedad `color`, entonces este valor queda establecido como el valor predeterminado y entonces se puede aplicar con el valor `currentcolor`. (No confundir con `inherit`).
nombre_color	Se especifica el nombre de un color definidos en ingles, como por ejemplo: `red`, `yellow`, `blue`, `gray`, `pink`, `orange`, etc.
valor_hexadecimal	Se establece el valor hexadecimal para un color determinado, en formato #RRGGBB. Por ejemplo, para definir el color rojo es especificado como `#ff0000`, para darle transparencia se agregan dos dígitos al final del formato como `#ff000000`. Una versión corta es también aceptada como `#f00` y con transparencia como `#f000`.
valor_rgb	El valor rgb se especifica por medio de la función `rgb( rojo, verde, azul )` los valores se definen con uno de los dos formatos disponibles: en valores numéricos (del 0 al 255) ó en porcentaje (del 0% al 100%).
valor_rgba	El valor rgba (con canal alpha para transparencia) se especifica por medio de la función `rgba( rojo, verde, azul, transparencia )` los valores se definen con uno de los dos formatos disponibles: en valores numéricos (del 0 al 255) ó en porcentaje (del 0% al 100%).
valor_hsl	El valor hsl se especifica por medio de la función `hsl( matiz, saturación, luminosidad )` Los valores para el matiz se especifica con un valor numérico de 0 a 360 (360 grados de una rueda de color). La Saturación se especifica en porcentaje (de 0% al 100%) 100% es color total y la Luminosidad también se especifica en porcentaje (de 0% al 100%) 0% es totalmente negro.
valor_hsla	El valor hsla (con canal alpha para transparencia) se especifica por medio de la función `hsla( matiz, saturación, luminosidad, transparencia )` Los valores para el matiz se especifica con un valor numérico de 0 a 368 (360 grados de una rueda de color). La Saturación se especifica en porcentaje (de 0% al 100%) 100% es color total y la Luminosidad también se especifica en porcentaje (de 0% al 100%) 0% es totalmente negro. El parámetro alpha es un número entre 0.0 (totalmente transparente) a 1.0 (totalmente opaco).

JavaScript

Sintaxis DOM

object.style.color="#ff0000"

La propiedad color en CSS se utiliza para establecer el color del texto de un elemento HTML. Es una de las propiedades fundamentales en CSS para controlar la apariencia visual de tu página web.

Sintaxis Básica

La sintaxis básica para usar la propiedad color es la siguiente:

CSS 

selector {
  color: valor;
}

Donde selector es el elemento HTML al que quieres aplicar el estilo y valor es la forma en la que defines el color. CSS ofrece varias maneras de especificar un color.

Formas de Definir Colores

A continuación, exploraremos las diferentes formas en las que puedes definir el valor de la propiedad color:

1. Nombres de Colores

CSS tiene definidos una serie de nombres de colores predefinidos (aproximadamente 140). Puedes simplemente usar estos nombres como valores para la propiedad color.

Ejemplo:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  h1 {
    color: blue;
  }
  p {
    color: green;
  }
</style>
</head>
<body>

  <h1>Este encabezado es azul</h1>
  <p>Este párrafo es verde.</p>

</body>
</html>

En este ejemplo, el texto del <h1> será de color azul y el texto del <p> será de color verde.

2. Valores Hexadecimales

Los valores hexadecimales son una forma común de especificar colores en CSS. Utilizan una notación de seis dígitos precedida por un signo de almohadilla (#). Los dos primeros dígitos representan el rojo, los dos siguientes el verde y los dos últimos el azul (RGB). Cada par de dígitos puede variar de 00 a FF (en hexadecimal), lo que representa intensidades de 0 a 255 en decimal.

Ejemplo:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  h2 {
    color: #FF0000; /* Rojo */
  }
  span {
    color: #008000; /* Verde */
  }
  div {
    color: #0000FF; /* Azul */
  }
</style>
</head>
<body>

  <h2>Este encabezado es rojo</h2>
  <span>Este texto es verde</span>
  <div>Este texto está en azul</div>

</body>
</html>

También existe una notación hexadecimal abreviada de tres dígitos, donde cada dígito representa el rojo, el verde y el azul. Esta notación es equivalente a duplicar cada dígito. Por ejemplo, #ABC es lo mismo que #AABBCC.

Ejemplo (Notación Abreviada):

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  h3 {
    color: #F00; /* Rojo (#FF0000) */
  }
  em {
    color: #0F0; /* Verde (#00FF00) */
  }
  b {
    color: #00F; /* Azul (#0000FF) */
  }
</style>
</head>
<body>

  <h3>Este encabezado es rojo (abreviado)</h3>
  <em>Este texto es verde (abreviado)</em>
  <b>Este texto está en azul (abreviado)</b>

</body>
</html>

3. Valores RGB

RGB (Red, Green, Blue) es otro modelo de color común. En CSS, los valores RGB se especifican usando la función rgb() seguida de tres valores (entre 0 y 255) separados por comas, que representan la intensidad del rojo, el verde y el azul respectivamente.

Ejemplo:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  p.rojo {
    color: rgb(255, 0, 0); /* Rojo */
  }
  p.verde {
    color: rgb(0, 128, 0); /* Verde */
  }
  p.azul {
    color: rgb(0, 0, 255); /* Azul */
  }
</style>
</head>
<body>

  <p class="rojo">Este párrafo es rojo (RGB).</p>
  <p class="verde">Este párrafo es verde (RGB).</p>
  <p class="azul">Este párrafo está en azul (RGB).</p>

</body>
</html>

4. Valores RGBA

RGBA (Red, Green, Blue, Alpha) es una extensión del modelo RGB que incluye un canal alfa para especificar la opacidad del color. El valor alfa es un número entre 0.0 (totalmente transparente) y 1.0 (totalmente opaco). Se especifica usando la función rgba() seguida de cuatro valores separados por comas: rojo, verde, azul y alfa.

Ejemplo:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .transparente {
    color: rgba(255, 0, 0, 0.5); /* Rojo con 50% de opacidad */
  }
  .opaco {
    color: rgba(255, 0, 0, 1.0); /* Rojo totalmente opaco */
  }
</style>
</head>
<body>

  <p class="transparente">Este texto es rojo con transparencia.</p>
  <p class="opaco">Este texto es rojo totalmente opaco.</p>

</body>
</html>

5. Valores HSL

HSL (Hue, Saturation, Lightness) representa el color utilizando tres componentes:

Hue (Tono): Un valor que representa la posición en la rueda de colores (de 0 a 360 grados). Por ejemplo, 0 es rojo, 120 es verde y 240 es azul.
Saturation (Saturación): Un valor porcentual (de 0% a 100%) que representa la intensidad del color. 100% es un color puro y 0% es un tono de gris.
Lightness (Luminosidad): Un valor porcentual (de 0% a 100%) que representa la claridad del color. 50% es la luminosidad normal, 0% es negro y 100% es blanco.

Los valores HSL se especifican usando la función hsl() seguida de tres valores separados por comas: tono, saturación y luminosidad.

Ejemplo:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .hsl-rojo {
    color: hsl(0, 100%, 50%); /* Rojo */
  }
  .hsl-verde {
    color: hsl(120, 100%, 50%); /* Verde */
  }
  .hsl-azul {
    color: hsl(240, 100%, 50%); /* Azul */
  }
</style>
</head>
<body>

  <p class="hsl-rojo">Este párrafo es rojo (HSL).</p>
  <p class="hsl-verde">Este párrafo es verde (HSL).</p>
  <p class="hsl-azul">Este párrafo está en azul (HSL).</p>

</body>
</html>

6. Valores HSLA

HSLA (Hue, Saturation, Lightness, Alpha) es una extensión del modelo HSL que incluye un canal alfa para especificar la opacidad del color. Al igual que RGBA, el valor alfa es un número entre 0.0 y 1.0. Se especifica usando la función hsla() seguida de cuatro valores separados por comas: tono, saturación, luminosidad y alfa.

Ejemplo:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .hsla-transparente {
    color: hsla(0, 100%, 50%, 0.5); /* Rojo con 50% de opacidad */
  }
  .hsla-opaco {
    color: hsla(0, 100%, 50%, 1.0); /* Rojo totalmente opaco */
  }
</style>
</head>
<body>

  <p class="hsla-transparente">Este texto es rojo con transparencia (HSLA).</p>
  <p class="hsla-opaco">Este texto es rojo totalmente opaco (HSLA).</p>

</body>
</html>

Ejemplos Prácticos

Aquí tienes algunos ejemplos de cómo podrías usar la propiedad color en situaciones reales:

Ejemplo 1: Dar énfasis a un texto importante:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .importante {
    color: #FF8C00; /* Naranja oscuro */
    font-weight: bold;
  }
</style>
</head>
<body>

  <p>Este es un texto normal. <span class="importante">Este texto es muy importante y está en naranja.</span></p>

</body>
</html>

Ejemplo 2: Cambiar el color de un enlace al pasar el ratón:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  a {
    color: blue;
    text-decoration: none;
  }

  a:hover {
    color: purple;
  }
</style>
</head>
<body>

  <p>Haz clic en este <a href="#">enlace</a>.</p>

</body>
</html>

Conclusión

La propiedad color es esencial para controlar la apariencia del texto en tus páginas web. Entender las diferentes formas de definir colores en CSS te permitirá tener un mayor control sobre el diseño y la estética de tus sitios. Experimenta con los diferentes valores y encuentra la combinación perfecta para tus proyectos. ¡Sigue practicando y explorando las posibilidades que ofrece CSS!