El espacio de color estándar que la mayoría de las pantallas ha usado durante décadas. Todos los valores hexadecimales pertenecen a él. Su gama es limitada: una pantalla moderna puede mostrar colores que sRGB no puede describir.
#4080c0Un espacio de color más amplio compatible con la mayoría de las pantallas modernas. Permite colores más vivos, sobre todo verdes y rojos, que sRGB no puede alcanzar.
P3 requiere una pantalla y un navegador compatibles. En otras pantallas, ambos círculos muestran el color alternativo sRGB.
Un espacio de color que se ajusta a cómo percibimos el brillo. A diferencia de HSL, dos colores con el mismo valor de luminosidad realmente se ven igual de brillantes. Es útil para generar paletas y mezclas de color accesibles.
HSL · L 65%OKLCH · L 65%Todos los colores de una fila comparten el mismo valor L. Compara los cambios de brillo de cada fila.
El componente de transparencia de un color, desde totalmente opaco hasta totalmente invisible. Un borde con alfa se integra en la superficie inferior. Un color hexadecimal opaco queda por encima. La diferencia es sutil, pero se percibe de forma constante.
#808080Compara un borde con alfa y uno opaco #808080 sobre distintos fondos.
Una variable de color nombrada por su función y no por su valor. --color-border-subtle en lugar de #e0e0e0. Cuando cambia el valor, se actualiza todo lo que usa el token.
--color-border-subtle
#e0e0e0Cambia --color-border-subtle para actualizar los tres bordes a la vez.
La diferencia de luminancia entre un color de primer plano y uno de fondo. WCAG exige 4,5:1 para el texto normal, y 3:1 para el texto grande y los componentes de interfaz.
WCAG AA: 4,5:1 para texto normal; 3:1 para texto grande y componentes de interfaz.