Generador de tonalidades de color
Convierte un color en una escala 50–950 al estilo de Tailwind, además de tintes, sombras y tonos. Calculado en OKLCH y sRGB y exportado como variables CSS, Tailwind o JSON.
Ajustes de tonalidades
Exportar
La escala 50–950 mantiene tu color como 500 y ajusta la luminosidad y el croma OKLCH de los demás pasos, conservando el tono.
Escala 50–950
Tintes, sombras y tonos
Mezcla en sRGB como color-mix(in srgb, …) en pasos iguales; haz clic en un color para copiarlo.
:root {
--brand-50: #eef5ff;
--brand-100: #e1edff;
--brand-200: #c9deff;
--brand-300: #a3c6ff;
--brand-400: #73a8ff;
--brand-500: #3b82f6;
--brand-600: #266ad8;
--brand-700: #1554b8;
--brand-800: #074095;
--brand-900: #002d72;
--brand-950: #012156;
}Herramientas Relacionadas
Ver Todas¿Qué es Generador de tonalidades de color?
Amplía un solo color a una escala de 11 pasos 50–950 como las paletas de Tailwind, y a filas de tintes (mezclados con blanco), sombras (mezcladas con negro) y tonos (mezclados con gris). Todos los valores se pueden copiar uno a uno o exportar como variables CSS, SCSS, Tailwind v3/v4 o JSON.
Cómo usar Generador de tonalidades de color
- Introduce el Color base.
- Lee la escala 50–950; tu color es el paso 500.
- Ajusta el número de Pasos de tintes / sombras / tonos para las filas de mezcla.
- Haz clic en cualquier muestra para copiarla.
- Elige un Formato de exportación y un Nombre del token y copia la escala.
Ejemplo
#3b82f6, variables CSS, nombre del token brand
:root {
--brand-50: #eef5ff;
--brand-100: #e1edff;
--brand-200: #c9deff;
--brand-300: #a3c6ff;
--brand-400: #73a8ff;
--brand-500: #3b82f6;
--brand-600: #266ad8;
--brand-700: #1554b8;
--brand-800: #074095;
--brand-900: #002d72;
--brand-950: #012156;
} Cuándo usar Generador de tonalidades de color
Úsalo para crear una rampa de color completa para un sistema de diseño o un tema de Tailwind a partir de un color de marca, o para obtener variantes de hover/activo. La escala es un punto de partida algorítmico razonable; para sistemas de diseño en producción quizá quieras afinar pasos concretos y comprobar el contraste para texto.
Cómo funciona Generador de tonalidades de color
Para la escala, el color base se convierte a OKLCH y se mantiene sin cambios en el 500. Los pasos más claros acercan la luminosidad una fracción fija hacia 0,985 (95 %, 88 %, 75 %, 55 %, 30 % para 50–400) y reducen el croma; los más oscuros se acercan a 0,2 (18 %–85 % para 600–950) con el croma ligeramente reducido. El tono se mantiene y cada paso se ajusta a la gama sRGB. Los tintes, sombras y tonos son mezclas en sRGB con codificación gamma, como color-mix(in srgb, …), en pasos iguales de 1/(n+1).
Casos de Uso Comunes
- Rampas de color personalizadas para Tailwind
- Tokens de sistema de diseño a partir de un color de marca
- Variantes de estado hover y pulsado
- Fondos y bordes en temas claro y oscuro
- Tonos apagados para ilustraciones
Preguntas Frecuentes
¿Qué diferencia hay entre un tinte, una sombra y un tono?
Un tinte es el color mezclado con blanco, una sombra es la mezcla con negro y un tono es la mezcla con gris.
¿Por qué mi color queda en el 500?
Como en las paletas de Tailwind, el 500 es el paso de referencia; los pasos más claros (50–400) se usan para fondos y los más oscuros (600–950) para texto y bordes.
¿Coincidirá exactamente con los colores incluidos en Tailwind?
No. Las paletas de Tailwind se ajustaron a mano; esta herramienta genera algorítmicamente una rampa de aspecto similar para cualquier color.