Generador de Tintes y Sombras
Genera una escala completa de 10 tintes (claros) y sombras (oscuras) desde un color base.
#
Tinte vs Sombra
| Propiedad | Tinte (Tint) | Sombra (Shade) |
|---|---|---|
| Mezcla con | Blanco | Negro |
| Efecto | Aclara | Oscurece |
| En HSL | Aumenta L | Reduce L |
| Uso común | Fondos, hover, disabled | Texto, bordes, active |
| Ejemplo | Pastel | Granate |
Preguntas Frecuentes
¿Qué es un tinte?
Un tinte es el color base mezclado con blanco. Incrementa la luminosidad manteniendo el tono. Ejemplo: rosa es un tinte de rojo.
¿Qué es una sombra?
Una sombra es el color base mezclado con negro. Reduce la luminosidad manteniendo el tono. Ejemplo: granate es una sombra de rojo.
¿Cuántas variantes necesita un design system?
La convención es 9-11 pasos (50-950). Esto da suficiente rango para fondos, bordes, texto y estados hover.
¿Estas variantes sirven para Tailwind?
Sí. Puedes mapear los 10 pasos a la escala Tailwind: 50, 100, 200, 300, 400, 500 (base), 600, 700, 800, 900.
¿Puedo generar variantes con OKLCH?
Sí, OKLCH produce variantes perceptualmente más uniformes. Esta herramienta usa HSL por compatibilidad universal.