Generador de Tonos de Color
Genera tonos más claros y más oscuros a partir de cualquier color base. Mismo tono y saturación, variando la luminosidad — perfecto para sistemas de diseño, variables CSS y paletas estilo Tailwind. Copia hex, RGB, HSL o un bloque completo de variables CSS.
#ECF3FE#C0D7FC#94BBFA#689FF8#3C83F6#0B5EE5#0844A6#052A66#021027Tabla de Contenidos
¿Qué son los tonos de color?
Los tonos son variaciones de un solo color hechas cambiando solo la luminosidad (en HSL). El tono y la saturación permanecen iguales, por lo que obtienes una familia consistente de muy claro a muy oscuro — ideal para fondos, bordes, texto y estados hover en sistemas de diseño (p. ej. la escala 50–900 de Tailwind) o variables CSS.
A diferencia de los tintes (añadir blanco) o los tonos (añadir gris), la generación de tonos mediante luminosidad HSL preserva la viveza del color en toda la escala, evitando esa apariencia deslavada en los pasos más claros.
Esta herramienta coloca tu color base en el centro de la escala y genera pasos más claros y más oscuros. Puedes copiar valores individuales o exportar el conjunto completo como propiedades personalizadas CSS.
Casos de uso
- Sistemas de diseño — Define una escala primaria (o secundaria) una vez y reutilízala en todos los componentes.
- Paletas estilo Tailwind — Genera 9 u 11 pasos (50–900) a partir de un color de marca.
- Variables CSS — Copia el bloque "Copiar como variables CSS" en tu :root para tematización instantánea.
- Accesibilidad — Usa tonos más claros para fondos y más oscuros para texto para cumplir con las pautas de contraste.
Formatos de salida
Copia colores como:
- Hex — #EFF6FF, #DBEAFE, etc.
- RGB — rgb(239, 246, 255)
- HSL — hsl(214, 100%, 97%)
- Variables CSS — Bloque :root listo para pegar con --color-100, --color-200, etc.
Consejos para mejores resultados
- Empieza con tu tono 500 — Piensa en tu color base como el centro del rango, no el más oscuro.
- Verifica el contraste temprano — Usa tonos más claros (50–200) para fondos con texto oscuro; los tonos más oscuros (700–900) garantizan texto legible sobre fondos claros.
- Evita bases de negro/blanco puro — Comienza con colores que tengan algo de saturación (10%+) para escalas de apariencia más natural.
Preguntas frecuentes
Mantenemos fijo el tono y la saturación de tu color base y solo cambiamos la luminosidad en HSL. El color base se coloca en el centro; los pasos superiores son más claros (hasta 96% de luminosidad) y los pasos inferiores son más oscuros (hasta 8% de luminosidad), para que obtengas una progresión uniforme de claro a oscuro.
Sí. Elige 9 tonos para obtener una escala similar a la 100–900 de Tailwind (con etiquetas 50–900). Copia los valores hex o el bloque de variables CSS y pégalos en tu configuración de Tailwind o CSS global.
3 tonos: Paleta mínima (claro, base, oscuro). 5–7 tonos: Proyectos simples con necesidades básicas de color. 9 tonos: Estándar de Material Design (100–900). 11 tonos: Estándar de Tailwind (50–950) — Recomendado. 13–15 tonos: Máxima granularidad para sistemas de diseño complejos.
La luminosidad HSL funciona mejor con colores que tienen saturación moderada (20–80%). Los colores base muy saturados o muy desaturados pueden necesitar ajuste manual. Intenta ajustar ligeramente la saturación de tu color base si la escala no parece correcta.
No en esta herramienta — está diseñada para escalas matemáticas consistentes. Para ajuste manual, copia los valores hex en un selector de color o herramienta de diseño.
No. Toda la generación se ejecuta en tu navegador. Tu color base y configuraciones solo se almacenan en la URL (parámetros de consulta) si compartes el enlace; nada se envía a un servidor.