2,424 lecturas

Funciones de color CSS en 2023: todo lo que necesita saber para comenzar

por Rahul9m2023/02/24

Demasiado Largo; Para Leer

Las funciones de color CSS son una forma de especificar colores en CSS utilizando funciones matemáticas en lugar de un simple código de color. Las funciones brindan más control y flexibilidad sobre los colores que se utilizan en su hoja de estilo. Con las funciones de color, puede ajustar el tono, la saturación, la luminosidad y la opacidad de un color, e incluso mezclar dos o más colores.

featured image - Funciones de color CSS en 2023: todo lo que necesita saber para comenzar

¡Hola, compañeros desarrolladores! Hoy vamos a sumergirnos en el mundo de las funciones de color CSS.

Es posible que haya utilizado CSS para cambiar el color de un elemento en una página web, pero ¿alguna vez ha oído hablar de las funciones de color CSS? Si no, ¡abróchense los cinturones de seguridad porque están a punto de aprender algo nuevo y súper útil!

Comencemos con una cita que leí ayer en Buenas lecturas .

El color es el teclado, los ojos son las armonías, el alma es el piano con muchas cuerdas. El artista es la mano que toca, tocando una u otra tecla, para provocar vibraciones en el alma.

¿Qué son exactamente las funciones de color CSS?

Las funciones de color CSS son una forma de especificar colores en CSS utilizando funciones matemáticas en lugar de un simple código de color.

Las funciones brindan más control y flexibilidad sobre los colores que se utilizan en su hoja de estilo.

Con las funciones de color, puede ajustar el tono , la saturación , la luminosidad y la opacidad de un color, e incluso mezclar dos o más colores.

Hay múltiples funciones CSS disponibles, veamos algunas:

rgb() : toma tres valores, que representan rojo, verde y azul respectivamente, y devuelve un color. Los valores pueden variar de 0 a 255. Ejemplo: color: rgb(255, 0, 0) da como resultado un color rojo.
rgba() - Es similar a rgb() , pero también te permite establecer la opacidad del color. El cuarto valor, alfa, puede variar de 0 a 1. Ejemplo: color: rgba(255, 0, 0, 0.5) da como resultado un color rojo semitransparente.
hsl() : toma tres valores, que representan el tono, la saturación y la luminosidad, y devuelve un color. Ejemplo: color: hsl(0, 100%, 50%) da como resultado un color rojo.
hsla() - Es similar a hsl() , pero también te permite establecer la opacidad del color. Ejemplo: color: hsla(0, 100%, 50%, 0.5) da como resultado un color rojo semitransparente.
mix() - Le permite mezclar dos colores, con un parámetro de peso opcional. Ejemplo: color: mix(red, blue) da como resultado un tono de púrpura.

Aprendamos sobre ellos en detalle.

RGB()

Muy bien, continuemos nuestro viaje al mundo de las funciones de color CSS y profundicemos en la función RGB. La función RGB es una de las funciones de color más utilizadas en CSS, ¡y por una buena razón!

Es fácil de entender y le da mucho control sobre los colores que usa en su sitio web.

La función RGB toma tres valores, cada uno de los cuales representa la intensidad de

rojo,

verde, y

azul respectivamente.

Estos valores pueden oscilar entre 0 y 255. Al mezclar diferentes intensidades de rojo, verde y azul, puede crear cualquier color que desee.

Ejemplo:

Para color rojo - rgb(255, 0, 0)
Para color verde - rgb(0, 255, 0)
Para color azul - rgb(0, 0, 255)

 div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/

HSL()

Muy bien, pasemos a otra función de color útil en CSS: ¡la función HSL!

La función HSL es similar a la función RGB, pero en lugar de usar valores para rojo, verde y azul, usa valores para:

matiz,

saturación, y

ligereza.

Esto hace que sea un poco más fácil de entender y usar, especialmente para aquellos que son nuevos en teoría del color .

El valor de tono en la función HSL representa el color en sí , con valores que van de 0 a 360.

El valor de matiz de 0 representa el rojo, un valor de matiz de 120 representa el verde y un valor de matiz de 240 representa el azul.
El valor de saturación en la función HSL representa la intensidad del color, con valores que van del 0% al 100%. Un valor de saturación del 100 % significa que el color está completamente saturado, mientras que un valor del 0 % significa que el color es gris.
El valor de luminosidad en la función HSL representa el brillo del color, con valores que van del 0% al 100%. Un valor de luminosidad del 50% significa que el color es un gris neutro , mientras que un valor del 100% significa que el color es completamente claro y un valor del 0% significa que el color es completamente oscuro .

 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */

RGBA()

Muy bien amigos, ¡hablemos de la función RGBA!

La función RGBA es como la función RGB pero con una ventaja adicional:

le permite especificar la opacidad de un color.

Esto puede ser útil cuando desea crear un efecto translúcido para sus elementos, como cuando desea que un color de fondo sea parcialmente transparente.

La función RGBA toma cuatro valores, los primeros tres son los valores rojo, verde y azul al igual que la función RGB.

El cuarto valor es el valor alfa , que representa la opacidad del color y va de 0 a 1.

Un valor de 0 significa que el color es completamente transparente, mientras que un valor de 1 significa que el color es completamente opaco.

 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

HSLA()

Muy bien amigos, ¡hablemos de la función HSLA!

La función HSLA es como la función HSL, pero con una ventaja adicional: le permite especificar la opacidad de un color.

Esto puede ser útil cuando desea crear un efecto translúcido para sus elementos, como cuando desea que un color de fondo sea parcialmente transparente.

La función HSLA toma cuatro valores, los primeros tres son los valores de matiz, saturación y luminosidad al igual que la función HSL.

El cuarto valor es el valor alfa, que representa la opacidad del color y va de 0 a 1.

Un valor de 0 significa que el color es completamente transparente, mientras que un valor de 1 significa que el color es completamente opaco.

 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

Es todo lo mismo A significa Alfa que somos nosotros (valor alfa de 0.75) para el efecto translúcido en ambas funciones, simple.

Propiedades personalizadas o variables CSS

Ahora, hablemos de las propiedades personalizadas en CSS, también conocidas como variables CSS. Las propiedades personalizadas le permiten almacenar valores que puede reutilizar en toda su hoja de estilo, lo que facilita el mantenimiento de sus estilos y hace que su código sea más modular y flexible

Para crear una propiedad personalizada, simplemente use la sintaxis -- seguida del nombre de la propiedad, seguido de un valor

 :root { --primary-color: blue; }

Aquí, hemos creado una propiedad personalizada llamada --primary-color con el valor blue .

Ahora, para usar esta propiedad personalizada, puede usar la función var() en sus selectores de CSS.

 button { background-color: var(--primary-color); }

El código anterior establece el color de fondo de todos los elementos <button> en azul porque estamos usando la propiedad personalizada --primary-color .

Si queremos cambiar el valor de --primary-color , solo necesitamos cambiarlo en un lugar, y se actualizará automáticamente a lo largo del hoja de estilo .

Las ventajas de usar propiedades personalizadas incluyen:

Reutilización de código : en lugar de repetir valores a lo largo de su hoja de estilo, puede almacenar valores en propiedades personalizadas y reutilizarlos según sea necesario.

Capacidad de mantenimiento : las propiedades personalizadas facilitan el mantenimiento de sus estilos porque solo necesita actualizar los valores en un solo lugar.

Flexibilidad : las propiedades personalizadas le permiten cambiar la apariencia de su sitio cambiando los valores en un lugar en lugar de realizar cambios en varios selectores.

Mejores prácticas de funciones de color CSS

Muy bien, hablemos de las mejores prácticas para usar funciones de color CSS en sus proyectos.

Estos consejos lo ayudarán a crear una imagen consistente y visualmente atractiva. paleta de color para su sitio web, así como asegurarse de que sus colores sean legibles y accesibles para todos los usuarios.

Crear una paleta de colores para su sitio web:

Una de las primeras cosas que debe hacer cuando trabaja con colores CSS es crear una paleta de colores para su sitio web. Esto puede ser tan simple como elegir algunos colores que te gusten y que funcionen bien juntos.

Puede utilizar las funciones RGB, HSL, RGBA o HSLA para definir sus colores.

Un buen lugar para comenzar es elegir un color principal y luego elegir 2 o 3 colores de acento para complementarlo.

 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); }

Uso de funciones de color CSS para contraste y jerarquía:

Es importante usar el color para crear contraste y jerarquía en tus diseños. Por ejemplo, puede usar un color más claro para el fondo y un color más oscuro para el texto para asegurarse de que sea fácil de leer.

También puede usar el color para llamar la atención sobre elementos específicos, como botones o enlaces.

 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); }

Prueba de funciones de color para legibilidad y accesibilidad:

Finalmente, es importante probar la legibilidad y accesibilidad de los colores. Asegúrese de que sus colores tengan suficiente contraste para que sean fáciles de leer, especialmente para los usuarios con deficiencias en la visión del color.

Puede usar herramientas en línea para verificar el contraste de sus colores y asegurarse de que cumplan con los estándares de accesibilidad.

Comprobador de contraste WebAIM

Generador de paleta de colores Muzli

Experte - Comprobador de contraste

coolors - Generador de Paletas

Generador de paletas de Canva

Funciones de color CSS Técnicas avanzadas

En esta sección, nos sumergiremos en algunas técnicas avanzadas con funciones de color CSS.

Uso de variables CSS para esquemas de color dinámicos

¿Alguna vez ha querido cambiar el esquema de color de su sitio web con solo unas pocas líneas de código? ¡Con las variables CSS, también conocidas como propiedades personalizadas, puede hacerlo!

Puede crear un conjunto de variables para almacenar su paleta de colores y luego usarlas en su hoja de estilo.

De esta manera, si alguna vez desea cambiar su combinación de colores, solo tiene que actualizar los valores en sus variables.

 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); }

En este ejemplo, creamos dos propiedades personalizadas para nuestros colores primario y secundario. Luego los usamos para diseñar nuestros elementos h1 y button .

Creación de animaciones con funciones de color CSS

¡Una de las mejores cosas que puedes hacer con las funciones de color CSS es animarlas! Puede crear transiciones suaves entre colores para agregar algo de dinamismo a su sitio web. Por ejemplo, puede hacer que un botón cambie de color cuando un usuario pasa el cursor sobre él.

 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); }

Aquí, configuramos el color de fondo predeterminado de nuestro botón en un tono verde ( hsl(120, 100%, 50%) y agregamos una transición para hacer que el color cambie suavemente cuando se pasa el mouse sobre el botón.

Cambiamos el color a un tono azul ( hsl(240, 100%, 50%) ) para el estado de desplazamiento.

Uso de funciones de color CSS para degradados y transparencia

Otra cosa divertida que puedes hacer con las funciones de color CSS es crear gradientes y transparencia. Puede usar las funciones de color RGBA y HSLA para crear colores semitransparentes y luego combinarlos para crear degradados.

 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); }

Aquí, creamos un degradado lineal que va desde un color RGBA rojo a un color HSLA verde. Ambos colores tienen un valor alfa de 0,5, lo que los hace semitransparentes.

¡Y ahí lo tienes!

Algunas técnicas avanzadas con funciones de color CSS. ¡Diviértete experimentando con estas técnicas y deja volar tu creatividad!

Recursos