Generador de tonos de color
Convierte un color HEX base en una escala de tonos 50-950 al estilo Tailwind, mezclando hacia blanco y negro, con muestra y HEX copiable.
Generador de tonos de color — Introduce un único color base en HEX y obtén al instante una escala de 11 pasos (50, 100, 200 … 900, 950) creada mezclando tu color hacia el blanco en los pasos claros y hacia el negro en los oscuros, con la misma numeración que usa Tailwind CSS. Cada paso muestra su muestra de color y su valor HEX con un botón de copia de un clic. Todo se ejecuta por completo en tu navegador; ningún color se envía a un servidor.
¿Qué es Generador de tonos de color?
El Generador de Tonos de Color es una herramienta gratuita en línea que convierte un color HEX base en una escala completa de tintes y sombras, numerada 50, 100, 200 hasta 900 y 950, igual que los tokens de color de Tailwind CSS. Construye la rampa mezclando linealmente tu color base hacia el blanco para los pasos claros (50-400) y hacia el negro para los oscuros (600-950), manteniendo el 500 como el propio color base. Diseñadores y desarrolladores front-end la usan para generar una escala de color coherente para un sistema de diseño, configurar propiedades personalizadas de CSS o colores de tema de Tailwind, y elegir variantes claras u oscuras de un color de marca. Cada paso se muestra como una muestra junto a su valor HEX con un botón de copia de un clic.
Cómo usar Generador de tonos de color
- Escribe un color base en el campo Color base (HEX) con el formato #rrggbb o #rgb, o haz clic en la muestra grande del selector de color para elegirlo visualmente.
- La escala 50-950 se actualiza al instante: los tintes claros (50-400) se mezclan hacia el blanco, el 500 es tu color base, y las sombras oscuras (600-950) se mezclan hacia el negro.
- Lee cada fila para ver, uno al lado del otro, el número de paso (50 … 950), su muestra de color y su valor HEX.
- Haz clic en el botón de copiar al final de cualquier fila para copiar el valor HEX de ese paso al portapapeles.
- Copia el HEX del color base con el botón de copiar junto al campo de entrada cuando solo necesites el paso 500.
Ejemplos
Paso más claro (50) de un base azul
Entrada
#4f86f7
Salida
#f6f9ff
Paso más oscuro (950) del mismo base
Entrada
#4f86f7
Salida
#0b1323
Crear colores de tema de Tailwind
Introduce tu color de marca y luego copia los pasos del 50 al 950 uno por uno en un color de tema de Tailwind (p. ej. colors.brand) o en propiedades personalizadas de CSS, obteniendo una escala de claro a oscuro lista para usar que coincide con la numeración de tonos predeterminada de Tailwind.
Preguntas frecuentes
- ¿Qué formatos de color puedo introducir?
- El color base se introduce como un valor HEX en formato #rrggbb (seis dígitos) o en la forma abreviada #rgb (tres dígitos). Si el valor no es un color HEX válido, aparece el mensaje 'Invalid HEX color' y no se genera ninguna escala. Cada paso de la salida se muestra como un valor HEX en formato #rrggbb.
- ¿Cómo se calculan los tonos?
- Cada paso es una mezcla lineal entre tu color base y el blanco puro o el negro puro. Los pasos 50-400 se mezclan hacia el blanco en proporciones decrecientes, el paso 500 es el color base sin cambios, y los pasos 600-950 se mezclan hacia el negro en proporciones crecientes. La numeración coincide con las escalas de color de Tailwind CSS.
- ¿Por qué el paso 500 a veces no es exactamente el número de mi color base?
- El paso 500 es siempre tu color base exacto. La herramienta no recentra tu color sobre una curva de luminosidad perceptual, así que si tu entrada es muy clara o muy oscura, la mitad clara u oscura de la escala tendrá menos rango: elige un color base de tono medio para obtener la rampa más uniforme.
- ¿Puedo elegir un color visualmente en lugar de escribir el HEX?
- Sí. Haz clic en la muestra grande con el selector de color integrado para elegir un color; el campo HEX se actualiza automáticamente y toda la escala 50-950 se recalcula al instante a medida que lo cambias.
- ¿Se suben mis datos de color a algún sitio?
- No. Todo se ejecuta por completo en tu navegador usando matemáticas de color locales: ningún valor de color se envía nunca a un servidor, por lo que funciona sin conexión y mantiene tu paleta privada.
Herramientas relacionadas
Código a imagen
Convierte un fragmento de código en una imagen PNG pulida con resaltado de sintaxis en tu navegador, con tema, fondo de degradado o transparente y relleno, sin subir nada.
Verificador de contraste de color
Comprueba la relación de contraste WCAG entre un color HEX de primer plano y uno de fondo, y si cumple AA y AAA para texto normal y grande.
Generador de box-shadow CSS
Crea sombras CSS box-shadow de varias capas con controles de desplazamiento, desenfoque, expansión, color e inset y copia la propiedad lista para usar.
Generador de degradados CSS
Crea un degradado CSS lineal, radial o cónico con paradas de color y un ángulo, previsualízalo en vivo y copia la regla background.