Sobre esta herramienta
Las sombras y los tintes son la base de un sistema de color de interfaz utilizable. Un solo color de marca rara vez basta por sí solo: necesitas tintes más claros para fondos, estados hover y rellenos sutiles, y sombras más oscuras para texto, bordes y estados que deben seguir siendo legibles sobre fondos claros. "Sombra" (shade) y "tinte" (tint) tienen significados precisos en terminología de diseño: una sombra mezcla el color base con negro, un tinte lo mezcla con blanco, a diferencia de un "tono" (tone), que lo mezcla con gris y que esta herramienta no genera.
Elige un color base y un número de pasos para generar una progresión completa de oscuro a claro: la sombra más oscura primero, tu color original en el medio y el tinte más claro al final. Haz clic en cualquier muestra para copiar su código hexadecimal al portapapeles y usarlo en tus variables CSS, tokens de diseño o configuración de Tailwind. Todo ocurre localmente en tu navegador mientras ajustas el color o el número de pasos; no se sube nada.
Preguntas frecuentes
¿Cuál es la diferencia entre una sombra y un matiz?
Una sombra es tu color base mezclado hacia el negro (más oscuro), mientras que un matiz es tu color base mezclado hacia el blanco (más claro). Ambos mantienen el mismo tono.
¿Cuántos pasos debo generar para una paleta de sistema de diseño?
La mayoría de los sistemas de diseño usan 5-10 pasos (similar a la escala 50-900 de Tailwind), suficiente para cubrir fondos, bordes, texto y estados hover sin demasiados colores casi duplicados.