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 propiedadcolor
con la propiedadbackground-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ónrgb( 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ónrgba( 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ónhsl( 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ónhsla( 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:
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:
<!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:
<!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):
<!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:
<!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:
<!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:
<!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:
<!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:
<!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:
<!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!