Generador de Tonos de Color: tintes, sombras y tonos
El Generador de Tonos de Color convierte cualquier color base en un conjunto completo de variaciones más claras, más oscuras y apagadas. Elige un color y, al instante, arma tres escalas — tintes, sombras y tonos — que puedes copiar o exportar directo a tu proyecto.
Está pensado para diseñadores y desarrolladores que necesitan pasos de color consistentes para un sistema de diseño: los estados hover y activo, los bordes, los fondos y las rampas de modo oscuro parten todos de un mismo color de origen. Ajusta cuántos pasos quieres y qué tan grande es cada salto, y luego toma los valores como CSS, SCSS, Tailwind o JSON.
Cómo generar tonos de color
Elige tu color base
Haz clic en el cuadro de color para abrir el selector, escribe un código HEX en el campo (completo #3B82F6 o abreviado #F00) o pulsa Color aleatorio para empezar desde un punto nuevo.
Define los pasos y el incremento
Elige cuántas variaciones generar con Pasos (5, 10, 15 o 20) y qué tan grande es cada salto con Incremento (5 %, 10 % o 20 %). Los tintes, sombras y tonos se actualizan en tiempo real.
Copia un solo color
Haz clic en cualquier muestra para copiar su código HEX al portapapeles. Cada muestra también indica el porcentaje de mezcla, así sabes exactamente qué tan clara, oscura o apagada es.
Exporta la paleta completa
Abre el menú Copiar todo y elige Variables CSS, Variables SCSS, Configuración de Tailwind o JSON. La paleta completa se copia a tu portapapeles, lista para pegar en tu código.
Funciones
Tres tipos de variaciones de color
Genera tintes (mezclados con blanco para valores más claros), sombras (mezcladas con negro para valores más oscuros) y tonos (mezclados con gris para valores apagados) a partir de un solo color base.
Controles flexibles
Elige 5, 10, 15 o 20 pasos por escala y define el salto de intensidad en 5 %, 10 % o 20 % para que la rampa se ajuste a tu sistema de diseño.
Varios métodos de entrada
Usa el selector de color visual, escribe un código HEX directamente (los abreviados como #F00 se expanden solos) o genera un color aleatorio con un clic.
Vista previa en tiempo real
Cada escala se redibuja al instante cuando cambias el color base, los pasos o el incremento, así puedes afinar el resultado sin esperas.
Opciones de exportación
Copia la paleta completa como propiedades personalizadas de CSS, variables SCSS, una configuración de color de Tailwind o JSON estructurado para cualquier flujo de trabajo.
Copia con un clic
Haz clic en cualquier muestra para copiar su código HEX por separado, o usa Copiar todo para tomar de una vez la paleta generada completa.
URL para compartir
El enlace de la página se actualiza con tu color, tus pasos y tu incremento, así cualquiera con quien lo compartas abre exactamente la misma paleta.
Funciona en tu navegador
Todos los cálculos de color ocurren en tu dispositivo. No se sube nada, así que la herramienta funciona al instante y mantiene tus elecciones privadas.
Preguntas frecuentes
¿Cuál es la diferencia entre un tinte, una sombra y un tono?
Un tinte añade blanco a un color para aclararlo, una sombra añade negro para oscurecerlo y un tono añade gris para apagarlo sin cambiar mucho su luminosidad. Esta herramienta arma las tres escalas a partir de tu color base al mismo tiempo.
¿Cómo genero las sombras de un color?
Elige un color base con el selector, un código HEX o el botón de color aleatorio. La escala de sombras aparece de inmediato debajo del color base, volviéndose cada vez más oscura. Ajusta Pasos e Incremento para controlar cuántas sombras obtienes y qué tan separadas están.
¿Cómo funcionan juntos Pasos e Incremento?
Pasos define cuántas muestras generar e Incremento define el porcentaje de separación entre ellas. Con 10 pasos y un incremento del 10 % obtienes valores en 10 %, 20 %, 30 %, y así sucesivamente hasta 100 %. Como la mezcla se detiene en 100 %, un incremento del 20 % limita cada escala a 5 muestras (20 %, 40 %, 60 %, 80 %, 100 %).
¿Puedo exportar las sombras como variables de CSS, SCSS o Tailwind?
Sí. Abre el menú Copiar todo y elige Variables CSS, Variables SCSS, Configuración de Tailwind o JSON. La paleta completa se copia a tu portapapeles, lista para pegar en tu hoja de estilos, tu archivo Sass, tu tema de Tailwind o cualquier configuración basada en datos.
¿Qué formatos de color puedo ingresar?
Defines el color base con el selector visual o escribiendo un código HEX. Funcionan tanto los códigos completos de 6 dígitos como #3B82F6 como los abreviados de 3 dígitos como #F00: el abreviado se expande automáticamente (por ejemplo, #F00 se convierte en #FF0000). Las muestras generadas también se entregan como valores HEX.
¿Cómo comparto mi paleta?
Copia el enlace de la barra de direcciones de tu navegador. Lleva tu color base, la cantidad de pasos y el incremento, de modo que abrirlo recrea exactamente el mismo conjunto de tintes, sombras y tonos.
¿Se guardan mis datos en algún lugar?
No. Cada cálculo se ejecuta en tu navegador, no se envía nada a un servidor y tus elecciones de color no se guardan ni se registran.
Aún no hay comentarios. ¡Sé el primero en comentar!