[ad_1]
Todos los motores principales ahora son compatibles con los nuevos espacios de color y funciones de CSS. Descubra cómo pueden darle vida a sus diseños.
CSS ahora admite espacios de color que nos permiten acceder a colores fuera de sRGB gama. Esto significa que puede admitir pantallas HD (alta definición) utilizando colores de gamas HD. Este soporte viene con nuevas características para un mejor uso del color en la web.
Accede a los espacios de color desde CSS #
Ahora tenemos una serie de funciones que nos permiten acceder a los colores en la gama sRGB:rgb(), hsl()y hwb(). Ahora compatible con los navegadores color() función, una forma normalizada de acceder a los colores en cualquier espacio de color RGB. Esto incluye sRGB, Display P3 y Rec2020. Puedes ver algunos ejemplos en el siguiente CSS:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}- Chrome 111, compatible 111
- Firefox 113, compatible 113
- Edge 111, compatible 111
- Safari 15, compatible 15
También se admiten varias funciones para permitir el acceso a espacios de color que no sean sRGB lch(), lab(), oklch()y oklab().
- Chrome 111, compatible 111
- Firefox 113, compatible 113
- Edge 111, compatible 111
- Safari 15, compatible 15
Puede obtener información sobre todos estos diferentes espacios de color en Guía de colores CSS de alta resolución.
El color-mix() función #
Además de estos nuevos espacios de color, todos los motores ahora admiten color-mix() función. Esta función permite mezclar un color con otro en cualquiera de los espacios de color. En el siguiente CSS, el 25 % del azul se mezcla con blanco en el espacio de color srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}- Chrome 111, compatible 111
- Firefox 113, compatible 113
- Edge 111, compatible 111
- Safari 16.2, compatible 16.2
Aprender más acerca de color-mix()
Estas nuevas características y espacios de color prometen traer colores HD vibrantes a la web. Para inspirarte, comienza creando hermosos degradados usando el generador de degradados HD en gradiente.estilo.
imagen de un personaje de danielle levis pelusi
[ad_2]
Créditos: Rachel Andrew (web.dev)
¡¡Si te ha gustado el post compártelo en tus redes sociales para que llegue a más gente!!
