Generador de Tonos de Color Gratuito en Línea
Genera tintes y tonos a partir de cualquier color base.
Who uses the Generador de Tonos de Color?
- Desarrolladores frontend creando paletas de colores de marca para sistemas de diseño y bibliotecas de componentes.
- Diseñadores eligiendo una variante más clara u oscura de un color de marca para estados de hover/activo.
- Diseñadores UI construyendo rampas de color consistentes para interfaces visualmente coherentes.
How the Generador de Tonos de Color works
Introduce un color HEX base o elige uno con el selector de color.
La herramienta genera 9 tonos más claros y 9 matices más oscuros a partir de tu color base, mostrados como muestras hex.
Haz clic en cualquier muestra para copiar su código hex al portapapeles.
El propio color base se muestra por separado entre las filas de tonos y matices.
Tips & tricks
- Haz clic en cualquier muestra — no solo el color base — para copiar ese código hex específico; un pequeño aviso «Copied!» lo confirma.
- No hay botón de exportar todo, así que para un bloque completo de variables CSS o configuración de Tailwind, copia cada muestra que necesites individualmente.
- Como la mezcla es una simple combinación RGB, los tonos muy claros de colores saturados pueden verse ligeramente descoloridos comparados con una herramienta de paleta calibrada perceptualmente.
- Introduce el código hex directamente en el campo de texto para colores precisos en lugar de depender de la cuadrícula de muestras del selector de color.
Frequently Asked Questions
¿Cuántos colores genera esta herramienta?
19 en total: 9 tonos (más claros, mezclados hacia el blanco), tu color base, y 9 matices (más oscuros, mezclados hacia el negro). Las muestras están etiquetadas con su código hex, no con pasos numerados.
¿Esta herramienta usa la convención de nomenclatura 50–950 de Tailwind?
No — las muestras se muestran como códigos hex simples, sin etiquetar con los pasos numéricos de Tailwind (50, 100, 200… 950). Puedes mapear tú mismo los valores hex generados a la nomenclatura de Tailwind si lo necesitas.
¿Cuál es la diferencia entre un matiz y un tono?
Un tono (tint) es un color mezclado con blanco (más claro). Un matiz (shade) es un color mezclado con negro (más oscuro). Esta herramienta genera ambas direcciones a partir de tu color base.
¿Qué método de mezcla de color usa esta herramienta?
Una mezcla RGB lineal simple hacia el blanco (para tonos) o negro (para matices). No usa un espacio perceptualmente uniforme como OKLCH, así que los tonos muy saturados pueden sentirse un poco desiguales al aclarar u oscurecer comparados con colores neutros — no hay un interruptor para cambiar el método de mezcla.
¿Puedo exportar la paleta como variables CSS o un archivo de configuración de Tailwind?
No automáticamente — no hay un botón de exportación masiva. Haz clic en cada muestra que quieras y pega su código hex en tus variables CSS o configuración de Tailwind a mano.
Is my data safe when using the Generador de Tonos de Color?
Completely safe. The Generador de Tonos de Color processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Generador de Tonos de Color output in commercial projects?
Yes. The Generador de Tonos de Color is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Generador de Tonos de Color follow official standards?
Yes. The Generador de Tonos de Color is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.