LESS es uno de los lenguajes de preprocesador CSS más populares que nos ayuda a reducir la complejidad del código CSS utilizando muchas funciones. LESS tiene muchas funciones incorporadas que ayudan al usuario de diferentes maneras a escribir su código y hacen que el código sea más fácil de entender y más corto de escribir. Una de estas funciones en LESS es la función de canal de color.
En este artículo, aprenderemos sobre la función del canal de color en LESS.
La función de canal de color es una de las funciones de color disponibles en LESS. Los otros son: función de definición de color, función de operación de color y opción de combinación de colores. La función de canal de color nos ayuda a extraer los valores de diferentes canales de color del color. Al igual que con la función de canal de color, podemos extraer los componentes Tono, Saturación, Luma, Verde, Azul y muchos otros canales de color.
La lista de todas las funciones de canales de color disponibles se proporciona a continuación:
- función Tono()
- Función de saturación()
- función Brillo()
- función Hsvhue()
- función Hsvsaturation()
- función Hsvvalue()
- función roja()
- función verde()
- función azul()
- función alfa()
Ahora, entendámoslos uno por uno con un ejemplo:
1. Tono(): esta función nos ayuda a extraer el valor de tono de un canal de color dado en el espacio de color hsl (tono, saturación, luminancia). Devuelve un número entero en el rango de 0 a 360 .
Ejemplo:
background-color: hue(hsl(85,95%,100%))
Producción:
background-color: background: 85
2. Saturación(): esta función nos ayuda a extraer el valor de saturación de un canal de color dado en el espacio de color hsl (tono, saturación, luminancia). Esta función devuelve un valor porcentual en el rango 0-100% .
Ejemplo:
background-color: saturation(hsl(85,95%,100%))
Producción:
background-color: 95%
3. Luminancia(): esta función nos ayuda a extraer el canal de luminosidad (luminancia) de un canal de color dado en el espacio de color hsl. Esta función devuelve un valor porcentual en el rango 0 -100% .
Ejemplo:
background-color: luminance(hsl(85,95%,100%))
Producción:
background-color: 100%
4. Hsvhue(): Esta función nos ayuda a extraer el valor del tono en el espacio de color hsv. Esta función devuelve un valor entero de 0 a 360 .
Ejemplo:
background-color: hsvhue(hsv(90,80%,70%))
Producción:
background-color: 90
5. Hsvsaturation(): Esta función nos ayuda a extraer el valor de saturación en el espacio de color hsv. Esta función devuelve un valor porcentual de 0 a 100 .
Ejemplo:
background-color: hsvsaturation(hsv(90,80%,70%))
Producción:
background-color: 80%
6. Hsvvalue(): esta función nos ayuda a extraer el canal de valor en el espacio de color hsv. Esta función devuelve un valor porcentual de 0 a 100 .
Ejemplo:
background-color: hsvvalue(hsv(90,80%,70%))
Producción:
background-color: 70%
7. Red(): esta función nos ayuda a extraer el valor del canal rojo en el espacio de color rgb. Esta función devuelve un valor flotante de 0 a 255 .
Ejemplo:
background-color: red(rgb(20,25,35))
Producción:
background-color: 20
8. Green(): esta función nos ayuda a extraer el valor del canal verde en el espacio de color rgb. Esta función devuelve un valor flotante de 0 a 255 .
Ejemplo:
background-color: green(rgb(20,25,35))
Producción:
background-color: 25
9. Blue(): esta función nos ayuda a extraer el valor del canal azul en el espacio de color rgb. Esta función devuelve un valor flotante de 0 a 255 .
Ejemplo:
background-color: blue(rgb(20,25,35))
Producción:
background-color: 35
10. Alpha(): esta función nos ayuda a extraer el valor del canal alfa en el espacio de color rgba (rojo, verde, azul, alfa). Esta función devuelve un valor flotante de 0-1 .
Ejemplo:
background-color: alpha(rgba(20,25,35,0.5))
Producción:
background-color: 0.5
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA