CSS3 Color (Color)

CSS3se ofrecen varios nuevos métodos para definir valores de color.

En CSS3definir colores

En la sección anterior, aprendiste cómo usarla palabra clave color y la notación RGBDefinir el color. Además de CSS3Se han añadido nuevos símbolos de funciones para establecer valores de color como rgba(), hsl() y hsla().

En la siguiente sección, discutiremos uno por uno estos modelos de color.

el valor de color RGBA

Se puede usar el símbolo de función rgba() en el modelo RGBA (rojo-Verde-Azul-alpha) para definir el color. El modelo de color RGBA es una extensión del modelo de color RGB con canal alpha, utilizado para especificar la opacidad del color.

El parámetro alpha acepta valores desde 0.0 (completamente transparente) hasta1.0 (completamente opaco) del valor.

h1　{
　　　　color: rgba(0,0,255,0.5);
}
p {
　　　　background-color: rgba(0%,0%,100%,0.3);
}

Valores de color HSL

El color también se puede definir usando el símbolo de función hsl() en el modelo HSL (tono-Saturación-brillo）。El tono se representa como el ángulo de un círculo o rueda (es decir, un arco iris representado en un círculo) desde 0 hasta360）。Este ángulo se proporciona con menos unidades porque el ángulo se mide generalmente en grados, por lo que la unidad se implícitamente en CSS.

La saturación y el brillo se expresan en porcentajes.100% saturación representa un color completo y 0% es una sombra gris. Sin embargo,100% brillo es blanco, 0% brillo es negro,50% brillo es normal. Vea el siguiente ejemplo:

h1　{
　　　　color: hsl(360,70%,60%);
}
p {
　　　　background-color: hsl(480,50%,80%);
}

Valores de color HSLA

Se puede usar el símbolo de función hsla() en el modelo HSLA (tono saturación-Brillo-alpha) para definir el color. El modelo de color HSLA es una extensión del modelo de color HSL con canal alpha, que especifica la opacidad del color.

El parámetro alpha acepta valores desde 0.0 (completamente transparente) hasta1.0 (completamente opaco) del valor.

h1　{
　　　　color: hsla(360,80%,50%,0.5);
}
p {
　　　　background-color: hsla(480,60%,30%,0.3);
}