Crea colores nuevos a partir de los canales y valores de otro color.
En Chrome 119 es una función de color muy potente del nivel de color 5 de CSS. Sintaxis de colores relativos crea una ruta suave para la manipulación del color dentro de CSS y ofrece maneras de a los autores y diseñadores:
- Lighten
- Oscurecer
- Saturación
- Desaturación
- Potenciador de croma
- Ajusta la opacidad
- Invertir
- Complemento
- Conversión
- Contraste
- Paletas de colores
Antes de la sintaxis de color relativo, para modificar la opacidad de un color, debes crear propiedades personalizadas para los canales de un color, generalmente HSL, y ensamblar con un color final y un color final de la variante. Esto significa gestionar una gran cantidad de piezas de color, que rápidamente pueden volverse una carga.
:root {
--brand-hue: 300deg;
--brand-saturation: 75%;
--brand-lightness: 50%;
--brand-hsl:
var(--brand-hue)
var(--brand-saturation)
var(--brand-lightness);
--brand-color: hsl(var(--brand-hsl));
/* all this work just so I can set the opacity to 50% in a variant */
--brand-color-variant: hsl(var(--brand-hsl) / 50%);
}
Después de la sintaxis de color relativo, puedes crear un color de marca con cualquier espacio de color. o la sintaxis que necesites, y crea una variante de media opacidad con mucho menos código. Es y es más fácil leer la intención de los estilos y el sistema.
:root {
--brand-color: hsl(300deg 75% 50%);
--brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}
Esta publicación te ayudará a aprender la sintaxis y a demostrar manipulaciones de color comunes.
Si prefieres usar un video, puedes tratar casi todo el artículo que aparece a continuación en este desafío de la GUI.
Descripción general de la sintaxis
El objetivo de la sintaxis de color relativo es permitir derivar un color de otro
color. El color base se denomina color de origen, este es el color que
aparece después de la nueva palabra clave from. El navegador
convertir, dividir este color de origen y ofrecer
las partes como variables para usar en la nueva definición de color.
En el diagrama anterior, se muestra que el color de origen green se convierte en
el espacio de color del nuevo color
se convirtieron en números individuales representados como r, g, b y alpha
variables, que luego se usan directamente como valores nuevos de un color rgb().
Si bien en esta imagen se muestra el desglose, el proceso y las variables, cambiando el color. Las variables se devuelven al color sin cambios, por lo que lo que da como resultado una imagen estática de color verde.
La palabra clave from
La primera parte de la sintaxis que hay que aprender es la parte from <color> de suma de
especificando un color. Va justo antes de que especifiques los valores. Aquí tienes un código
ejemplo en el que todo lo que se agregó es from green, justo antes de los valores
para rgb().
.syntax-introduction_same-colors {
color: green;
color: rgb(0 128 0);
color: rgb(from green r g b); /* result = rgb(0 128 0) */
}
Esa palabra clave from, cuando se la ve como el primer parámetro en notación funcional,
convierte la definición del color en un color relativo. Después de la palabra clave from, CSS
espera un color, un color que inspirará el próximo color.
Conversión de color
En términos más sencillos, convierte el verde en canales r g y b para usarlos en una nueva color.
rgb(from green r g b) /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b); /* r=0 g=128 b=0 */
Colores de las propiedades personalizadas
La lectura de rgb from green es muy clara y fácil de entender. Esta es la razón por la que
las propiedades personalizadas y la sintaxis relativa de color hacen una muy buena coincidencia, porque
puedes quitar el misterio del color from. Tampoco es necesario
conoces el formato de color del color de la propiedad personalizada, cuando creas una nueva
en el formato que elijas.
rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b) /* clear */
Trabaja en tu espacio de color preferido
Puedes elegir el espacio de color con la notación funcional que prefieras.
rgb(from hsl(120 100% 25%) r g b) /* r=0 g=128 b=0 */
hsl(from hsl(120 100% 25%) h s l) /* h=120 s=100% l=25% */
hwb(from hsl(120 100% 25%) h w b) /* h=120 w=0% b=50% */
lch(from hsl(120 100% 25%) l c h) /* l=46 c=68 h=134 */
La sintaxis de color relativo incluye ese paso de conversión; el color después de from es
convertido en el espacio de color, como se especifica al comienzo de la regla
color. No es necesario que la entrada y la salida coincidan, lo que es muy liberador.
La capacidad de elegir un espacio de color también es motivadora, ya que elegir un color espacio suele estar más enfocada en el tipo de alternancia de colores que en una preferencial. La preferencia está en los resultados, no en el formato de color ni en el canal de tipos de datos. Esto será mucho más claro en las secciones que demuestran los casos de uso, ya que diferentes espacios de color sobresalen en diferentes tareas.
Mezcla, combina, omite y repite las variables
Algo extraño, pero emocionante en esta sintaxis, no hace falta que las variables volver a poner en orden y repetirse.
rgb(from green g g g) /* rgb(128 128 128) */
rgb(from green b r g) /* rgb(0 0 128) */
rgb(from green 0 0 g) /* rgb(0 0 128) */
Opacidad como variable
La sintaxis también proporciona la opacidad como una variable llamada alpha. Este campo es opcional
y va después de / en la notación de color funcional.
rgb(from #00800080 r g b / alpha) /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha) /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha) /* alpha=50% */
Usar calc() u otras funciones de CSS en las variables
Hasta ahora, hemos creado el color verde una y otra vez. Aprender la sintaxis y familiarizarse con los pasos de conversión y desestructuración. Ahora es tiempo de modificar las variables, alterar el resultado para que no sea igual al entrada.
green /* h=120 s=100% l=25% */
hsl(from green calc(h * 2) s l) /* h=240 s=100% l=25% */
¡Ahora está en la marina! El matiz se duplicó, tomando un tono de 120 y convirtiéndolo en
240, alterando por completo el color. Esto rotó el matiz a lo largo del color
de la rueda de la fortuna, un truco muy simple con espacios de color cilíndricos
como HSL,
HWB
LCH y
OKLCH.
Para ver visualmente los valores de los canales, de modo que puedas hacer los cálculos sin adivinar ni tener que memorizar la especificación, prueba esta herramienta de valores relativos de canales de sintaxis de colores. Revela el valor de cada canal en función de la sintaxis que especifiques, lo que te permite saber exactamente con qué valores tienes disponibles para jugar.
Cómo verificar la compatibilidad con navegadores
@supports (color: rgb(from white r g b)) {
/* safe to use relative color syntax */
}
Casos de uso y demostraciones
Los siguientes ejemplos y casos de uso tienen muchas sintaxis alternativas para lograr resultados similares o iguales. Las variaciones provienen de los espacios de color y de canales que ofrecen.
Además, muchos ejemplos mostrarán ajustes de color con el texto by y
to Un cambio de color by es un cambio de color relativo. un cambio que utiliza el
valor de la variable y realiza un ajuste en función de su valor actual. R
cambio de color to es un cambio de color absoluto; un cambio que no utiliza el
de la variable y, en su lugar, especifica un valor completamente nuevo.
Puedes encontrar todas las demostraciones en esta colección de CodePen.
Aclarar un color
The OKLCH, OKLAB, XYZ o Los espacios de color sRGB proporcionan los resultados predecibles al aclarar los colores.
Aclarar una cantidad
En el siguiente ejemplo, .lighten-by-25 toma el color blue y lo convierte en
OKLCH, luego aclara el azul aumentando el canal l (luminosidad) multiplicando
el valor actual por 1.25. Esto lleva la luminosidad azul a blanco en un 25%.
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
Aclarar hasta un valor específico
En el siguiente ejemplo, .lighten-to-75 no usa el canal l para hacer lo siguiente:
aclarar blue, en cambio, reemplaza por completo el valor por 75%.
.lighten-to-75 {
background: oklch(from blue 75% c h);
}
Cómo oscurecer un color
Los mismos espacios de color eficaces para iluminar un color también son ideales para oscurecer el color.
Oscurecer una cantidad
En el siguiente ejemplo, .darken-by-25 toma el color azul y lo convierte en
OKLCH, luego oscurece el azul disminuyendo el canal l (luminosidad) en un 25% en
multiplicando el valor por .75. Esto hace que el color azul avance hacia el negro en un 25%.
.darken-by-25 {
background: oklch(from blue calc(l * .75) c h);
}
Oscurecer hasta un valor especificado
En el siguiente ejemplo, .darken-to-25 no usa el canal l para oscurecer
blue; en cambio, reemplaza por completo el valor por 25%.
.darken-to-25 {
background: oklch(from blue 25% c h);
}
Satura un color
Saturar una cantidad determinada
En el siguiente ejemplo, .saturate-by-50 usa s de hsl() para aumentar
vitalidad de orchid según un 50% relativo.
.saturate-by-50 {
background: hsl(from orchid h calc(s * 1.5) l);
}
Saturar a una cantidad específica
En el siguiente ejemplo, .saturate-to-100 no usa el canal s de
hsl(), especifica un valor de saturación deseado. En este ejemplo,
la saturación se incrementa a 100%.
.saturate-to-100 {
background: hsl(from orchid h 100% l);
}
Desatura un color
Desaturar en una cantidad
En el siguiente ejemplo, .desaturate-by-half usa s de hsl() para disminuir
la saturación de indigo por la mitad.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Desaturar a un valor específico
En lugar de reducir la saturación en una cantidad determinada, puede reducir la saturación hasta alcanzar un valor deseado
valor. En el siguiente ejemplo, .desaturate-to-25 crea un nuevo color basado en
indigo, pero establece la saturación en 25%.
.desaturate-to-25 {
background: hsl(from indigo h 25% l);
}
Refuerzo de croma
Este efecto es similar a saturar un color, pero es diferente en un par de
maneras. En primer lugar, se trata de un cambio de chroma, no de saturation, y esto es
porque los espacios de color que pueden realzarse a un alto rango dinámico no usan
la saturación. Los espacios de color que incluyen chroma son de alto rango dinámico
y permite a los autores aumentar la intensidad del color más allá de la saturación
que eres capaz de hacer.
.increase-chroma {
background: oklch(from orange l calc(c + .1) h);
}
Cómo ajustar la opacidad de un color
La variante semitransparente de un color es uno de los colores más comunes ajustes realizados en los sistemas de diseño. Consulta el ejemplo en la introducción de esta artículo, por si te lo perdiste, describe muy bien el espacio del problema.
Ajustar la opacidad
.decrease-opacity-by-25 {
background: rgb(from lime r g b / calc(alpha / 2));
}
Ajustar la opacidad a un valor específico
.decrease-opacity-to-25 {
background: rgb(from lime r g b / 25%);
}
Invertir un color
La inversión de color es una función común de ajuste de color que se encuentra en las bibliotecas de colores. Una forma de lograr esto es convertir un color a RGB y, luego, restar cada uno valor del canal de 1.
.invert-each-rgb-channel {
background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}
Complementa un color
Si tu objetivo no era invertir un color, sino complementarlo, entonces el tono
es probable que lo que estés buscando sea la rotación. Elige un espacio de color que ofrezca las
como un ángulo y, luego, usa calc() para rotar el tono el valor que desees.
Para encontrar el complemento de un color, se rota media vuelta, en este caso.
puedes sumar o restar del canal h por 180 para lograr el resultado.
.complementary-color {
background: hsl(from blue calc(h + 180) s l);
}
Cómo contrastar un color
Como método para lograr relaciones accesibles de contraste de color, considera L* (Lstar).
Esto utiliza el canal de luminosidad (L) (aproximadamente) uniforme a nivel de la percepción del
LCH y OKLCH, en un calc(). Según si la segmentación es baja, media o alta
el contraste, la L* delta es de ~40, ~50 o ~60.
Esta técnica funciona bien con cualquier tono en LCH u OKLCH.
Cómo contrastar un color más oscuro
La clase .well-contrasting-darker-color muestra L* con un delta de 60.
Dado que el color de origen es un color oscuro (valor bajo de luminosidad), se agrega un 60% (0.6).
al canal de luminosidad. Esta técnica se utiliza para encontrar un punto bien contrastado
mismo tono y color de texto oscuro sobre un fondo claro.
.well-contrasting-darker-color {
background: darkred;
color: oklch(from darkred calc(l + .60) c h);
}
Contrastar un color más claro
La clase .well-contrasting-lighter-color muestra L* con un delta del 60%.
también. Dado que el color de origen es un color claro (claridad de alto valor), 0.60 es
se restan del canal de luminosidad.
.well-contrasting-lighter-color {
background: lightpink;
color: oklch(from lightpink calc(l - .60) c h);
}
Paletas de colores
La sintaxis de color relativa es muy buena para crear paletas de colores. Es especialmente útil y potente debido a la cantidad de espacios de color disponibles. Lo siguiente ejemplos usan OKLCH porque el canal de luminosidad es confiable y el tono se pueda rotar sin efectos secundarios. El último ejemplo demuestra un combinación de ajustes de luminosidad y rotación de tono para obtener resultado.
Abre el código fuente de ejemplo para estos y, luego, intenta cambiar --base-color a
ver cuán dinámicas son estas paletas. Es divertido.
Si te gustan los videos, te daré información detallada sobre cómo crear paletas de colores en CSS con OKLCH en YouTube.
Paletas monocromáticas
Para crear una paleta monocromática, debes hacerla con el mismo tono, con variaciones en luminosidad y oscuridad. El color del medio es el color de origen para la paleta, en la que dos variantes más claras y dos más oscuras se ponen lado derecho.
:root {
--base-color: deeppink;
--color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
--color-1: oklch(from var(--base-color) calc(l + .10) c h);
--color-2: var(--base-color);
--color-3: oklch(from var(--base-color) calc(l - .10) c h);
--color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}
Prueba un montón de paletas creadas con sintaxis de color relativa y OKLCH.
Open Props, una biblioteca de variables de CSS gratuitas, ofrece paletas de colores creadas con esta estrategia y permite usarlas fácilmente con una importar. Además, todas se crearon con un color que puedes personalizar, solo tienes que le da un color y emite una paleta.
Paletas análogas
Dado que la rotación de matiz es tan fácil con OKLCH y HSL, es trivial crear un paleta de colores análoga. Rota el matiz según la cantidad de resultados que te guste y cambia el color base. y ver cómo el navegador crea nuevas paletas.
:root {
--base-color: blue;
--primary: var(--base-color);
--secondary: oklch(from var(--base-color) l c calc(h - 45));
--tertiary: oklch(from var(--base-color) l c calc(h + 45));
}
Paletas triádicas
Similar a los colores complementarios, las paletas de colores triádicas
son rotaciones de tono opuestas pero armoniosas según un color de base. Donde un valor
el color complementario se encuentra en el lado opuesto de un color, como una línea recta
dibujada en el medio de la rueda de colores, las paletas triádicas son como una
triángulo de líneas, buscando 2 colores rotados de forma equitativa a partir de un color base.
Para lograrlo, rota el tono 120deg.
Esta es una leve simplificación de la teoría del color, pero es suficiente para dar empezarás con paletas triádicas más complejas si te interesa.
:root {
--base-color: yellow;
--triad-1: oklch(from var(--base-color) l c calc(h - 120));
--triad-2: oklch(from var(--base-color) l c calc(h + 120));
}
Paletas tetrádicas
Las paletas tetrádicas son cuatro colores divididos uniformemente alrededor de la rueda de colores, lo que hace que una paleta sin valor dominante claro. También podrías pensar en ello, como dos pares de colores complementarios. Si se usa con prudencia, puede ser muy significativo.
Esta es una leve simplificación de la teoría del color, pero es suficiente para dar empezarás con paletas tetrádicas más complejas si te interesa.
:root {
--base-color: lime;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) l c calc(h + 90));
--color-3: oklch(from var(--base-color) l c calc(h + 180));
--color-4: oklch(from var(--base-color) l c calc(h + 270));
}
Monocromático con una leve rotación de tono
Muchos expertos en color mantienen este truco bajo la manga. El problema es que un la escala de colores monocromática puede ser bastante aburrida. La solución es agregar rotación de matiz menor o mayor a cada color nuevo a medida que se cambia la luminosidad
En el siguiente ejemplo, se reduce la luminosidad un 10% de cada muestra y también rota el matiz 10 grados. El resultado, una paleta de rosa a índigo que parece ser combinarse perfectamente como un gradiente.
:root {
--base-color: deeppink;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
--color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
--color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
--color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}
Prueba esta tabla de clasificación creada con OKLCH y rotación de matiz
La siguiente interfaz de tabla de clasificación usa esta estrategia de rotación de matiz. Cada lista
elemento realiza un seguimiento de su índice en el documento como una variable llamada --i. Este índice es
y luego se usa para ajustar el croma, la luminosidad y el tono. El ajuste es solo de un 5% o
5°, es mucho más sutil que el ejemplo anterior
con deeppink y, por lo tanto, toma un
observar la razón por la que esta tabla de clasificación puede tener cualquier matiz con tales
elegancia.
Asegúrate de cambiar el tono en el control deslizante debajo de la tabla de clasificación y observa la sintaxis relativa de color crea hermosos momentos de color.
li {
--_bg: oklch(
/* decrease lightness as list grows */
calc(75% - (var(--i) * 5%))
/* decrease chroma as list grows */
calc(.2 - (var(--i) * .01))
/* lightly rotate the hue as the list grows */
calc(var(--hue) - (var(--i) + 5))
);
}