Generador de Tintes y Sombras
Color
Desde un color de marca, los diseñadores suelen necesitar una rampa completa: tintes claros para estados hover y fondos, sombras oscuras para texto y estados activos. Esta herramienta mezcla tu color base hacia blanco (tintes), negro (sombras) o gris (tonos) en pasos espaciados uniformemente. Elige el conteo (2–20), formato de salida (HEX, RGB, HSL) y copia cualquier muestra con un clic. Útil para construir escalas de color tipo Tailwind (50-900), estados de botón y paletas UI accesibles.
Tintes (más claros)
Sombras (más oscuros)
Clic en cualquier muestra para copiar su valor. Tintes son útiles para fondos y hover, sombras para texto y estados activos.
Cómo usar
- Elige el color base — usa el selector o pega un valor HEX.
- Elige modo: ambos (tintes + sombras), solo tintes, solo sombras o tonos (con gris).
- Ajusta el conteo de pasos y formato, luego clic en cualquier muestra para copiar.
Preguntas frecuentes
- ¿Diferencia entre tinte, sombra y tono?
- Un tinte mezcla con blanco (más claro), una sombra mezcla con negro (más oscuro), un tono mezcla con gris (más apagado). Los tres mantienen el matiz pero cambian luminosidad/saturación diferente.
- ¿Es lo mismo que ajustar luminosidad HSL?
- No — mezclar en RGB hacia blanco es perceptualmente diferente de aumentar luminosidad HSL. La mezcla RGB pura reduce saturación al aclarar (más 'pastel'), que es usualmente lo que quieren los diseñadores para tintes.
- ¿Cómo mapea a escalas Tailwind 50–900?
- Genera ~9 tintes y ~9 sombras desde tu base. El extremo claro aproxima el rango 50–400, el oscuro aproxima 600–900. Las rampas exactas de Tailwind están ajustadas manualmente para uniformidad perceptual, así esto es un punto de partida — ajusta al ojo.
- ¿Por qué los tintes más claros no son blanco puro?
- Cada paso es una fracción del camino al blanco. Con 10 pasos, paso 1 está ~9% hacia blanco. Para blanco puro necesitarías pasos infinitos — pero el último paso usualmente está suficientemente cerca para un fondo 'más claro'.
Herramientas relacionadas
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.