Generador de tonos y sombras
21 colores
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Detalles técnicos
Cómo funciona el Generador de Tintos y Sombras
Qué hace la herramienta
El Generador de Tintos y Sombras crea tintos más claros (mezclados con blanco) y sombras más oscuras (mezcladas con negro) a partir de cualquier color base. Ingresa un color y elige la cantidad de pasos para generar un degradado suave de variaciones. Cada paso muestra valores HEX, RGB y el porcentaje de mezcla, lo que facilita crear escalas de color consistentes para diseño de UI, branding y visualización de datos.
Casos de uso comunes para desarrolladores
Los desarrolladores usan generadores de tintos y sombras al construir escalas de tokens de diseño (p. ej., blue-100 hasta blue-900), crear estados hover y active para elementos interactivos, diseñar jerarquías de color accesibles y producir colores de fondo y superficie consistentes para temas claros y oscuros. La herramienta es esencial para crear paletas de colores personalizadas de Tailwind CSS o sistemas de color de Material Design.
Cómo funcionan los Tintos y las Sombras
Un tinto se crea mezclando un color con blanco, aumentando su luminosidad. Una sombra se crea mezclando con negro, disminuyendo la luminosidad. La fórmula para los tintos es: new = base + (255 - base) × factor. Para las sombras: new = base × (1 - factor). Los pasos se distribuyen uniformemente entre el color base y el blanco puro (tintos) o el negro puro (sombras), produciendo un degradado lineal de valores de color.
Errores comunes y casos límite
La mezcla lineal con blanco o negro puede producir tintos deslavados o sombras opacas para algunos tonos. Los amarillos pueden verse verdosos al oscurecerse, y los azules pueden perder viveza al aclararse. Para escalas perceptualmente uniformes, considera usar los espacios de color OKLCH o CIELAB. Verifica siempre que tus tintos más claros y sombras más oscuras mantengan suficiente contraste contra sus fondos previstos.
Cuándo usar esta herramienta vs código
Usa esta herramienta del navegador para exploración rápida y para generar escalas de color durante el trabajo de diseño. Para sistemas de diseño en producción, genera tintos y sombras de forma programática usando librerías de color como chroma.js o culori que admiten espacios de color perceptualmente uniformes y pueden exportar tokens de diseño en cualquier formato.