Generador de Sombras y Tintes de Color | Crea una escala de 21 pasos de claro a oscuro

Introduce un solo color HEX base y obtén 10 sombras más oscuras y 10 tintes más claros dispuestos como una única escala. Cada muestra indica sus valores HEX y RGB, de modo que puedes tomar exactamente los pasos que necesitas para estados hover, bordes, superficies en modo oscuro y tokens de diseño.

💡 Sobre esta herramienta

Elegiste el color de marca y enseguida llega el muro que todo desarrollador front-end conoce: ¿qué color usas para el :hover del botón, el estado deshabilitado, el borde sutil o el fondo apagado? Ajustar la luminosidad a mano suele producir una escala que se desvía de tono y se ve inconsistente entre componentes.

Esta herramienta interpola el RGB base hacia el negro puro y el blanco puro en pasos iguales. Las sombras multiplican cada canal por un factor decreciente; los tintes rellenan la distancia hasta 255 con un factor creciente. El resultado es una escala de 21 pasos —10 sombras, tu base y 10 tintes— con una progresión lineal y predecible que puedes asignar directamente a nombres de tokens como shade-1 hasta tint-10.

Cada muestra superpone su lectura HEX y RGB en un color de texto con contraste automático, para que los pasos claros y oscuros sigan siendo legibles. Puedes copiar una muestra individual o exportar toda la escala como una lista comentada de variables CSS, lo que convierte el salto de un mockup de Figma a una hoja de estilos en algo casi inmediato.

🧐 Preguntas Frecuentes

¿Cuál es la diferencia entre una sombra y un tinte? Una sombra es tu color mezclado hacia el negro (más oscuro); un tinte es la mezcla hacia el blanco (más claro). La mezcla hacia el gris da un tono — esta herramienta se centra a propósito en los dos ejes más útiles: sombra y tinte.

¿Cómo se calculan los 10 pasos? Las sombras multiplican cada canal RGB por i/11, con i de 10 a 1. Los tintes usan canal + (255 − canal) × i/11, con i de 1 a 10. El denominador 11 mantiene el negro puro y el blanco puro fuera del conjunto, así cada paso sigue siendo utilizable y fiel a la marca.

¿Por qué no cambiar simplemente la luminosidad HSL? Mover solo la L de HSL puede desplazar el brillo percibido de forma desigual entre matices. La interpolación lineal en RGB es más simple y predecible. Si necesitas uniformidad perceptual, combínala con una herramienta Lab/OKLCH.

¿Acepta HEX abreviado de 3 dígitos? Sí. Un valor como #f0c se expande a seis dígitos (#ff00cc) antes de procesarse.

¿Puedo exportar toda la escala de una vez? Copiar todo genera cada sombra y tinte como una lista etiquetada y comentada, lista para pegar en una hoja de estilos como inicio de tus definiciones de variables.

📚 Datos Curiosos

¿Te preguntaste por qué Tailwind y Material Design numeran sus colores del 50 al 900? Es para que un único tono de marca se expanda en una escala reutilizable y tokenizada. Si derivas los pasos de forma mecánica desde el principio, añadir un tema oscuro más adelante se reduce a decidir qué número invertir en lugar de volver a elegir colores a ojo. La división entre sombra y tinte también recuerda a la impresión por semitonos, donde variar el tamaño del punto de tinta —no la tinta en sí— es lo que crea pasajes más claros y oscuros en la página.