Generador de tonos de color: construye una paleta completa desde un solo color
📷 Pawel Czerwinski / PexelsGenerador de tonos de color: construye una paleta completa desde un solo color
Aprende a generar tonos y matices para sistemas de diseño, colores personalizados de Tailwind CSS y propiedades CSS personalizadas a partir de un único color base.
Todo sistema de diseño necesita eventualmente una escala de colores — un rango de tonos de claro a oscuro para cada color de marca. Los necesitas para fondos, bordes, texto, estados hover, anillos de enfoque y estados desactivados. Construirla a mano, tono a tono, es genuinamente tedioso. Y si lo haces a ojo, los resultados suelen ser irregulares — algunos saltos son demasiado grandes, otros demasiado sutiles.
El Generador de tonos de color toma un único color base y produce una paleta completa con pasos uniformes en aproximadamente un segundo. Este artículo explica cómo funciona, cómo usar el resultado en tus proyectos y dónde el enfoque tiene limitaciones reales.
Qué son realmente los tonos y matices
Antes de entrar en la herramienta, conviene aclarar la terminología, porque "tonos" se usa de forma vaga.
Los shades son variaciones más oscuras de un color — técnicamente, un color mezclado con negro. Los tints son variaciones más claras — un color mezclado con blanco. Juntos, shades y tints dan el rango completo desde un tono oscuro casi negro hasta un tono pálido casi blanco.
En la práctica, la mayoría de los sistemas de diseño usan el rango combinado y llaman a todo "la escala de color" o "la paleta de color". Lo que importa no es la terminología sino el resultado: un conjunto de colores coordinados de claro a oscuro que se pueden usar de forma coherente en toda una interfaz.
La estructura típica tiene este aspecto:
| Paso | Uso |
|---|---|
| 50 | Fondo muy claro, estados hover sobre blanco |
| 100 | Fondo claro, fondos de estado seleccionado |
| 200 | Bordes sobre fondos claros, rellenos sutiles |
| 300 | Texto desactivado, texto de placeholder |
| 400 | Texto secundario, etiquetas atenuadas |
| 500 | Primario — normalmente el color base en sí |
| 600 | Estados hover de botones, primario ligeramente más oscuro |
| 700 | Estados presionados, elementos interactivos más oscuros |
| 800 | Texto oscuro sobre fondos claros |
| 900 | Muy oscuro, alternativas para texto de encabezados |
| 950 | Casi negro, base del modo oscuro |
Tailwind popularizó este sistema de 11 pasos (50 a 950), y se ha convertido suficientemente en estándar como para valer la pena seguirlo incluso si no usas Tailwind.
Cómo funciona la generación: ajustes HSL
El generador trabaja en el espacio de color HSL — Matiz (Hue), Saturación (Saturation), Luminosidad (Lightness). Si no estás familiarizado con HSL: el Matiz es el ángulo de color (0-360, donde 0 es rojo, 120 es verde, 240 es azul), la Saturación es la intensidad (0% es gris, 100% es completamente vivo), y la Luminosidad va del 0% (negro) al 100% (blanco).
Dado un color base, la herramienta:
- Convierte la base a HSL
- Mantiene el Matiz fijo (es la misma familia de colores en todo momento)
- Genera valores de Luminosidad distribuidos por un rango — aproximadamente 95% para el paso más claro hasta 10% para el más oscuro
- Opcionalmente hace ajustes sutiles de Saturación en los extremos para compensar ilusiones ópticas
Ese último punto merece una explicación. La percepción del color humana es no lineal. En HSL puro, un azul claro al 90% de Luminosidad a menudo parece casi blanco y completamente deslavado — la saturación "desaparece" perceptualmente a valores de luminosidad altos. Muchos generadores de paletas profesionales compensan aumentando ligeramente la Saturación en el extremo claro para mantener el matiz visible, y reduciéndola en el extremo oscuro donde tiende a verse apagada.
El resultado es una paleta que parece espaciada uniformemente para los ojos humanos, no solo matemáticamente.
Por qué la convención 50-950
Tailwind CSS merece crédito por estandarizar esto. Antes de Tailwind, todo el mundo usaba convenciones de nomenclatura diferentes: "azul claro", "azul-más-claro", "azul-oscuro", "azul-muy-oscuro" — lo que significaba que cada proyecto tenía su propio sistema idiosincrático que no se transfería a ningún lado.
El sistema numerado (50, 100, 200... 900, 950) tiene varias ventajas prácticas:
Es fácil añadir pasos. Si necesitas algo entre 200 y 300, añades 250. Hay un lugar natural para ello.
Comunica la intención de un vistazo. Un desarrollador que ve color-100 sabe inmediatamente que es un tono de fondo claro. color-900 es obviamente territorio de texto oscuro. Los números llevan peso semántico sin necesitar nombres descriptivos.
Es compatible con herramientas. Variables de Figma, propiedades CSS personalizadas, objetos de tema JavaScript — todos funcionan naturalmente con escalas numéricas. Y como Tailwind usa los mismos números, diseñadores y desarrolladores hablan el mismo idioma.
Desalienta la sobre-especificidad. Cuando los colores tienen nombres como "azul-primario" y "azul-primario-ligeramente-más-claro-para-hover", los equipos tienden a añadir cada vez más variantes con nombre. Un sistema numerado te anima a usar la escala definida de forma coherente.
Usar la salida en tu proyecto
El generador te proporciona varios formatos de salida. Así se usa cada uno.
Propiedades CSS personalizadas
La salida de variables CSS tiene este aspecto:
:root {
--color-50: #eff6ff;
--color-100: #dbeafe;
--color-200: #bfdbfe;
--color-300: #93c5fd;
--color-400: #60a5fa;
--color-500: #3b82f6;
--color-600: #2563eb;
--color-700: #1d4ed8;
--color-800: #1e40af;
--color-900: #1e3a8a;
--color-950: #172554;
}
Pega esto en tu archivo CSS principal dentro de un bloque :root, y las variables están disponibles en toda tu hoja de estilos:
.boton-primario {
background-color: var(--color-500);
border-color: var(--color-600);
color: white;
}
.boton-primario:hover {
background-color: var(--color-600);
border-color: var(--color-700);
}
.boton-primario:focus {
outline-color: var(--color-300);
}
Este enfoque es especialmente poderoso para el theming. Si defines tus colores de marca como propiedades CSS personalizadas, cambiar de tema es tan simple como sobreescribir los valores en un selector [data-theme="dark"] o .modo-oscuro.
Configuración de Tailwind CSS
Si usas Tailwind, puedes incorporar la paleta directamente en tu archivo tailwind.config.js o tailwind.config.ts:
module.exports = {
theme: {
extend: {
colors: {
marca: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
// ... y así sucesivamente
950: '#172554',
},
},
},
},
}
Esto desbloquea el sistema completo de clases utilitarias de Tailwind para tu color de marca: bg-marca-100, text-marca-700, border-marca-300, hover:bg-marca-600, y todo lo demás. Tu color personalizado se comporta exactamente como los colores de paleta integrados de Tailwind.
Objetos JavaScript/TypeScript
Para bibliotecas de componentes o design tokens, un objeto JavaScript suele ser más útil que CSS en bruto. Puedes importar valores de color directamente en el código de los componentes, pasarlos a styled-components, o usarlos con bibliotecas CSS-in-JS.
Construir un sistema de diseño con escalas de color
Un sistema de diseño normalmente necesita al menos tres o cuatro escalas de color:
- Primaria: tu color de marca principal
- Neutral/Gris: para texto, fondos, bordes — normalmente un gris ligeramente cálido o frío en lugar de neutro puro
- Colores semánticos: Éxito (verde), Advertencia (ámbar/amarillo), Error (rojo), Información (azul)
Pasa cada uno por el generador de tonos por separado, nómbralos de forma coherente, y tendrás la base de color de un sistema de diseño.
El patrón de uso típico:
primario-50,primario-100→ fondos, rellenos de estado seleccionadoprimario-200,primario-300→ bordes sutiles, etiquetas, badgesprimario-500,primario-600→ elementos interactivos, botones, enlacesprimario-700,primario-800→ estados presionados, elementos interactivos oscurosneutral-100aneutral-900→ fondos de página hasta texto del cuerpo
Con esto en su lugar, cada componente puede tomar colores de la paleta sin que nadie elija un color arbitrario. Mantener la coherencia en una base de código grande se vuelve mucho más fácil.
Comparación con el Generador de paleta de colores
El sitio también tiene un Generador de paleta de colores, y son suficientemente similares como para que valga la pena aclarar la diferencia.
El Generador de paleta de colores genera normalmente un conjunto de colores complementarios o armoniosos — esquemas análogos, triádicos, complementarios divididos. Le das un color y sugiere otros colores que funcionan bien junto a él. Se trata más de teoría del color y encontrar una buena combinación.
El Generador de tonos de color toma un color y te da un rango completo de ese color de claro a oscuro. No se trata de encontrar otros colores — se trata de obtener todos los tonos del color que ya elegiste.
En la práctica, podrías usar ambos: el generador de paleta para encontrar tu combinación de colores de marca, y el generador de tonos para construir la escala completa para cada uno de esos colores.
Limitaciones a tener en cuenta
Estos son los puntos donde este tipo de herramientas puede decepcionar.
El negro y blanco puros producen paletas inútiles. Si introduces #000000 (negro puro) o #FFFFFF (blanco puro), el generador no tiene matiz con el que trabajar. Toda la paleta será simplemente tonos de gris. Para colores neutros, usa un color con al menos un pequeño grado de matiz y saturación — algo como un gris ligeramente cálido (#f5f0eb) producirá una escala neutral mucho más interesante que el blanco puro.
Los colores de baja saturación pueden parecer planos. Un color que ya está cerca del gris (por ejemplo hsl(220, 8%, 50%)) no producirá tints y shades vibrantes. El extremo claro de la escala parecerá casi blanco y el extremo oscuro casi negro, con muy poca diferenciación visible entre medio. Esto no es un error — es simplemente la naturaleza de los colores de baja saturación. Si tu paleta parece plana, prueba una base más saturada.
La paleta generada es un punto de partida, no una respuesta definitiva. La generación basada en HSL es sistemática y rápida, pero no sabe nada de tu contexto específico. Algunos tonos claros generados pueden no tener suficiente contraste para el texto. Verifica siempre contra el uso real de la interfaz y pasa tus combinaciones de texto/fondo por un verificador de contraste.
Para sistemas de diseño profesionales, la uniformidad perceptual importa más. La paleta de Tailwind v3 fue ajustada a mano por diseñadores, no auto-generada. Herramientas como Radix Colors usan OKLCH (un espacio de color perceptualmente uniforme) que es más preciso que HSL para pasos de apariencia uniforme. El generador de tonos te da un excelente punto de partida, pero para un sistema de diseño en producción a gran escala, puede que quieras ajustar manualmente los extremos.
Las variables CSS llamadas --color-500 son genéricas. Si tienes múltiples escalas de color en tu proyecto, querrás renombrarlas: --marca-500, --error-500, --neutral-200, etc. No vuelques múltiples paletas en :root sin darles un espacio de nombres, o se sobreescribirán entre sí.
Herramientas relacionadas para el trabajo con colores
El generador de tonos encaja en un flujo de trabajo de color más amplio:
- Selector de color: Elige tu color base visualmente y obtén su valor hex o HSL, luego pégalo en el generador de tonos.
- Generador de paleta de colores: Encuentra primero una combinación de colores armoniosa, luego genera tonos para cada color individualmente.
- Conversor de color: Si necesitas convertir los valores HEX generados a HSL o RGB para usarlos en contextos específicos.
- Generador de degradados CSS: Una vez que tienes tu escala de tonos, los degradados entre pasos adyacentes pueden quedar geniales — la herramienta de degradados te permite componerlos y previsualizarlos directamente.
Un ejemplo práctico: añadir un color personalizado a Tailwind
Aquí un flujo de trabajo completo para añadir un color de marca personalizado a un proyecto de Tailwind:
- Has elegido tu color de marca:
#0D6EFD(un azul intenso). - Abre /tools/color-shades-generator y pega
#0D6EFD. - La herramienta genera la escala completa del 50 al 950.
- Copia la salida en formato de configuración de Tailwind.
- Añádela a tu
tailwind.config.tsbajotheme.extend.colors.marca. - Ahora puedes usar
bg-marca-500para botones,text-marca-700para texto oscuro,bg-marca-50para fondos hover sobre superficies blancas, yring-marca-300para anillos de enfoque.
Sin el generador, estarías eligiendo manualmente los once tonos y esperando que parezcan coherentes. Con él, todo el proceso lleva quizás dos minutos.
Conclusión
Construir una escala de colores desde cero es el tipo de tarea que parece sencilla y no lo es. Conseguir que los pasos parezcan visualmente uniformes, mantener el matiz coherente sin que parezca soso, y asegurarse de que los extremos son realmente utilizables — requiere más cuidado que simplemente oscurecer un valor hex en una cantidad fija en cada paso.
El Generador de tonos de color gestiona todo eso automáticamente y te da una salida lista para CSS en múltiples formatos. Es una sólida solución del 80% que cubre la mayoría de los proyectos reales, y es el punto de partida correcto incluso cuando planeas ajustar a mano después.
Si estás construyendo un sistema de diseño, combinar esto con el Generador de paleta de colores para elegir tus colores y el Conversor de color para validar los formatos te da todo lo necesario para establecer rápidamente una base de color de aspecto profesional.