Saltar al contenido principal

Colores

La sección Colors del panel, con el primario y la base y sus tonos calculados

Primario, base, y dos colores opcionales​

Todo sitio tiene un color primario (tu color de marca) y un color base (para el texto y las superficies neutras). Un color secundario y uno terciario son opcionales —enciende cualquiera de los dos desde su propia tarjeta en el panel.

Tonos, calculados para un contraste garantizado​

Cada color recibe siete tonos —ultra oscuro, oscuro, semioscuro, medio, semiclaro, claro, ultra claro— calculados en OKLCH con una luminosidad fija por tono, sea cual sea el color de marca. Eso es lo que hace posible la promesa de contraste: --text-on-primary (y la variable equivalente para secundario y terciario, en cuanto los enciendas) es siempre blanco o el tono base más oscuro, el que llegue a 4,5:1 contra ese color —elegido automáticamente, recalculado en el momento en que cambias el color.

También puedes poner cualquier tono a mano, desde su propio editor bajo el color —hacerlo renuncia a la garantía de contraste calculado para ese tono en concreto, y el panel te dice ahí mismo su contraste real contra texto blanco y contra texto oscuro, para que lo sepas antes de confirmarlo.

Transparencias​

La tira de transparencias del primario, encendida en pasos del 10%, con los nombres de sus variables

Cada color —primario, secundario, terciario, base, blanco, negro, y cualquier color propio— puede tener pasos de transparencia cada 10% o cada 5%, encendidos color por color desde un interruptor debajo de él.

Tus propios colores con nombre​

Añadiendo un color propio, con su nombre y los interruptores de tonos y transparencias

Más allá de primario/secundario/terciario, puedes añadir tantos colores con nombre como quieras —cada uno recibe los mismos siete tonos calculados y las mismas transparencias opcionales que los que vienen de serie. Renombrar uno mueve sus tonos y sus transparencias con él.

La insignia de contraste​

Junto al campo del color primario, una insignia muestra su contraste contra texto blanco y te dice si se lee "bajo" para texto normal —medido contra el texto que el framework pondrá de verdad sobre ese color, no una suposición genérica.