Generador de Tintes y Sombras
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
Generador de Paleta de Colores
Elige un color base, obtén armonías clásicas de rueda de color — complementario, split-complementario, triádico, tetrádico, cuadrado, análogo, monocromático.
Paleta de Colores Tailwind
La paleta por defecto completa de Tailwind CSS — 22 matices × 11 sombras, 50 a 950 — click para copiar como clase Tailwind, HEX o rgb().
Paleta de Color desde Imagen
Suelta una imagen y la herramienta extrae una paleta de colores dominantes vía Canvas — copia HEX o llévate el set completo.
Ordenar Colores
Pega una lista de colores hex y ordénalos por tono, saturación, claridad o brillo percibido — útil pra organizar una paleta de tokens de diseño.
Paleta tonal Material Design 3
Genera una paleta tonal Material You / Material Design 3 (tonos 0–100) desde un color base, con contraste vs blanco/negro y exportación CSS/Tailwind/JSON/SCSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.