Tintes y Sombras
El generador de tintes y sombras crea tintes más claros (mezclados con blanco) y sombras más oscuras (mezcladas con negro) de cualquier color base en 5, 10 o 20 pasos, con salida en variables CSS.
Acerca de esta herramienta
El generador de tintes y sombras crea tintes más claros (mezclados con blanco) y sombras más oscuras (mezcladas con negro) de cualquier color base en 5, 10 o 20 pasos, con salida en variables CSS.
Cómo se usa
- Elige un color base.
- Escoge 5, 10 o 20 pasos.
- Haz clic en cualquier muestra para copiar su valor hex.
- Haz clic en Copiar como variables CSS para exportar toda la escala.
Datos útiles
- Un tinte es un color mezclado con blanco; una sombra es un color mezclado con negro.
- El generador mezcla en pasos RGB iguales, así que cada paso cambia el color en la misma cantidad.
- Sistemas de diseño como Tailwind usan una escala de 50–900 construida con tintes y sombras de cada color de marca.
- Comprueba el contraste de los colores de texto sacados de una escala, porque los pasos intermedios a menudo no cumplen WCAG AA sobre blanco.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Qué diferencia hay entre un tinte y una sombra?
Un tinte aclara un color añadiendo blanco; una sombra lo oscurece añadiendo negro. Un tono añade gris.
¿Cuántas variantes debe tener un color de un sistema de diseño?
Lo habitual son unos 10 pasos, por ejemplo 50, 100 … 900 en Tailwind. Da suficiente rango para fondos, bordes, texto y estados hover.
¿Cómo uso la escala en CSS?
Copia la escala como propiedades personalizadas y úsalas con var(--color-name), por ejemplo en fondos, bordes o estados hover.
¿Por qué algunos tintes se ven apagados?
Mezclar con blanco reduce la saturación además de aumentar la luminosidad. Para variantes claras más vivas, ajusta la saturación por separado en HSL.