CodeKitHub¿Qué es esta herramienta?
Una rampa de tonos es una serie de variaciones de un mismo color en distintos niveles de luminosidad, usada en el diseño de interfaces para cosas como estados de hover, estados deshabilitados, bordes y fondos que necesitan relacionarse con un color de marca sin ser idénticos a él.
Esta herramienta convierte tu color base a HSL, mantiene fijos el tono y la saturación, y desplaza la luminosidad desde aproximadamente 95% (matiz casi blanco) hasta aproximadamente 10% (tono casi negro), con tu color original ubicado en su posición natural en medio de la rampa.
¿Por qué utilizarlo?
- Genera una rampa al estilo de un sistema de diseño (como la escala 50/100/200.../900 de Tailwind) a partir de un solo color, no solo de una paleta predefinida fija.
- Elige 7, 9 u 11 pasos según qué tan detallada necesites la rampa.
- Cada paso muestra su código HEX exacto y su porcentaje de luminosidad — clic para copiar.
- Mantiene el tono y la saturación constantes en toda la rampa, así que todos los tonos se leen claramente relacionados con el color base en lugar de derivar hacia el gris.
- Gratis, instantáneo y totalmente local.
Cómo utilizarlo
- Elige tu color base con el selector de color o escribiendo un código HEX.
- Elige cuántos pasos quieres en la rampa (7, 9 u 11).
- Lee el código HEX y el porcentaje de luminosidad de cada tono directamente en su muestra.
- Haz clic en cualquier muestra para copiar su código HEX.
Ejemplo
Entrada
#3B82F6 (un azul medio), 9 pasosResultado
9 tonos desde un matiz casi blanco (~95% de luminosidad) hasta un tono casi negro (~10% de luminosidad), con #3B82F6 mismo posicionado como el paso centralEl tono y la saturación permanecen fijos en los 9 pasos — solo cambia la luminosidad — así que cada tono se lee claramente como parte de la misma familia de color.
Preguntas frecuentes
¿Es el mismo sistema que usa Tailwind CSS para sus escalas de color?
Es la misma idea subyacente (tono/saturación fijos, luminosidad variable) pero no una réplica exacta de la paleta específica de Tailwind — las escalas 50-900 de Tailwind fueron ajustadas a mano por diseñadores, no generadas por una única fórmula. Esta herramienta te da una estructura comparable generada a partir de cualquier color que elijas, útil cuando tu color base no es uno de los predefinidos de Tailwind.
¿Por qué mi color se ve casi igual en dos pasos adyacentes?
Eso puede pasar cerca de los extremos muy claro o muy oscuro de la rampa, donde la luminosidad percibida cambia más lento de lo que sugiere el porcentaje numérico (una propiedad conocida de la percepción del color humano, no específica de esta herramienta). Elegir menos pasos (7 en lugar de 11) separa más los valores de luminosidad y reduce las muestras casi duplicadas.
¿Puedo usar estos tonos directamente como propiedades personalizadas de CSS?
Sí — copia cada código HEX y pégalo en tus variables CSS (por ejemplo, --color-brand-100 hasta --color-brand-900), haciendo coincidir la posición en la rampa con la escala de nombres que use tu proyecto.
¿Debería usar esto o el Mezclador de Colores?
Si estás creando versiones más claras y más oscuras de un solo color — estados de hover, fondos sutiles, bordes relacionados con un color de marca — usa este generador de tonos. Si en cambio necesitas el color entre dos colores distintos (digamos, un paso entre tu azul primario y un naranja secundario), usa el Mezclador de Colores, que interpola los canales RGB de dos colores en cualquier proporción en lugar de variar la luminosidad de uno solo.
¿Qué pasa si mi color base ya es muy claro o muy oscuro?
El color base siempre queda en la fila central, con matices que suben hasta cerca del 95% de luminosidad por encima y tonos que bajan hasta cerca del 10% por debajo. Si tu base ya es casi blanca, la mitad de matices de la rampa se comprime en un rango de luminosidad estrecho (filas casi duplicadas) mientras que la mitad de tonos se extiende ampliamente — y viceversa para una base muy oscura. Para la rampa más equilibrada, parte de una versión de luminosidad media de tu color (aproximadamente 40-60% de luminosidad).
¿Puede generar también tonalidades apagadas (el color mezclado con gris)?
No — esta herramienta solo varía la luminosidad manteniendo fija la saturación, lo que produce matices y tonos, pero no tonalidades apagadas. Si quieres una rampa más apagada, desatura primero tu color base (elige una versión más grisácea en el selector de color) y genera la rampa a partir de ese; cada paso heredará la saturación más baja.