Convierte un color en escalas completas de tintes, sombras y tonos y expórtalas como variables CSS, en tu navegador.
Un sistema de diseño rara vez necesita un color: necesita una familia. Los tintes, las sombras y los tonos son las tres formas clásicas de construir esa familia a partir de un solo tono. Un tinte es el color mezclado con blanco, lo que da versiones más claras y suaves para fondos, superficies de hover y estados desactivados. Una sombra es el color mezclado con negro, lo que da versiones más oscuras para texto sobre fondos claros, bordes y estados presionados. Un tono es el color mezclado con gris, lo que baja la saturación sin cambiar la luminosidad de forma tan brusca — el menos conocido de los tres y el que produce ese aspecto apagado y editorial que los tintes y las sombras puros no consiguen.
Las matemáticas de aquí son deliberadamente simples y predecibles: cada paso es una interpolación lineal de los canales RGB entre tu color base y el destino (blanco #ffffff, negro #000000 o gris medio #808080), en incrementos del 10%, de modo que el décimo paso cae exactamente sobre el destino. Es la misma convención que usan los generadores clásicos de tintes y sombras, y hace que cada valor sea reproducible — puedes recalcular cualquier muestra a mano. Conviene conocer la contrapartida: como la interpolación ocurre en sRGB y no en un espacio perceptual como OKLCH, los pasos de luminosidad percibida no son perfectamente uniformes, sobre todo en amarillos y cianes muy saturados. Para escalas de interfaz eso suele estar bien y a menudo se prefiere, ya que los resultados se mantienen cerca del tono original.
La exportación es lo que hace esto práctico. Un clic copia la paleta como propiedades personalizadas CSS, listas para pegar en un bloque :root, o como una lista simple de códigos hex para una herramienta de diseño. Si activas los nombres al estilo Tailwind, la paleta se reasigna a la familiar escala 50–900 — de 50 a 400 aclarando, 500 como tu color base, de 600 a 900 oscureciendo — que encaja directamente en un tema de Tailwind o en cualquier archivo de tokens que siga la misma convención. También puedes descargar la paleta como un archivo .css. Todos los cálculos y el propio archivo se producen 100% en tu navegador; el color que elijas nunca se envía a un servidor.
Un tinte es tu color mezclado con blanco, una sombra es tu color mezclado con negro y un tono es tu color mezclado con gris. Los tintes y las sombras cambian la luminosidad; los tonos sobre todo reducen la saturación, dando un resultado apagado a una luminosidad similar.
Cada paso es una mezcla lineal directa de los canales RGB entre tu color base y el blanco, el negro o el gris al 50%, en incrementos del 10% — así el décimo tinte es blanco puro y la décima sombra es negro puro. Los valores son totalmente reproducibles.
Sí. Activa los nombres al estilo Tailwind y la exportación usará la escala 50–900, con el 500 como tu color base, lista para pegar en la configuración de tu tema o en un archivo de variables CSS.
No automáticamente. La escala es matemáticamente uniforme, no perceptualmente uniforme, así que sigues teniendo que comprobar las parejas de texto y fondo frente a los umbrales de contraste de WCAG — como regla práctica, combina los tintes más claros con las sombras más oscuras.
No. La paleta, la exportación CSS y el archivo descargado se generan todos localmente en JavaScript en tu dispositivo — no se transmite ni se almacena nada en ningún servidor.
Vai.la convierte cualquier URL en un enlace corto con estadísticas de clics, código QR y tu propio biolink.
Vai.la no se hace responsable del uso de las herramientas ni de las decisiones tomadas a partir de sus resultados.