EnglishGenerador de tonos de un color
Elige el color base. La herramienta arma 11 tonos, del casi blanco al casi negro, manteniendo el matiz. Toca un tono para copiar el código.
Tonos de un color
Todo se hace en tu dispositivo: nada se envía a internet.
Disponible en: 
Generador de tonos de un color: para qué sirve
Elige un color y la herramienta genera 11 tonos, del casi blanco al casi negro, calculados en el espacio de color OKLCH: el matiz queda igual y la luminosidad cambia en cada paso. El color base entra en el paso de luminosidad más parecida, sin cambios.
Toca un tono para copiar el HEX, o copia todas las variables CSS o el objeto para el tailwind.config con el nombre que elijas.
Cómo usar
- Elige el color base en el selector o escribe el HEX.
- Dale un nombre al color.
- Copia un tono, las variables CSS o la escala para Tailwind.
Cuándo usar
- Crear la paleta de un sitio o de un sistema de diseño.
- Tener tonos claros para fondos y oscuros para texto del mismo color.
- Armar el color de la marca en Tailwind.
Preguntas frecuentes
¿Cómo se calculan los tonos?
En el espacio de color OKLCH, que sigue la percepción del ojo: la herramienta mantiene el matiz del color base, cambia la luminosidad de cada paso y reduce la saturación en los extremos para que los tonos claros y oscuros no queden chillones.
¿Dónde queda mi color en la escala?
El color base se coloca en el paso con la luminosidad más parecida a la suya, y ese paso usa exactamente tu color. Aparece marcado.
¿Cómo usarlo en Tailwind o en CSS?
Copia las variables CSS (--cor-50 a --cor-950) o el objeto para el tailwind.config. Cambia el nombre del color en el campo nombre.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas y funcionan directo en tu navegador.