Generador de escala de color
Genere una escala de color suave de N pasos entre dos colores al instante. Elija colores de inicio y fin con selectores nativos o 10 pares preestablecidos, establezca entre 2 y 50 pasos y alterne entre la interpolación RGB y HSL para ver la diferencia. Vea los valores HEX, RGB y HSL de cada paso y exporte la escala como un gradiente CSS, propiedades personalizadas de CSS o configuración Tailwind. Totalmente privado, 100% gratuito y no es necesario registrarse.
Preset Pairs
Colors
Settings
RGB interpolates linearly in RGB space - good for simple gradients.
Color Scale
¿Por qué utilizar nuestro generador de escala de colores?
- Modos y recuento de pasos personalizables: el generador de escala de color le permite elegir entre 2 y 50 pasos y cambiar entre los modos de interpolación lineal RGB y de interpolación HSL. Ajuste la cantidad de pasos con un control deslizante, elija entre 10 pares de colores preestablecidos o ingrese valores HEX personalizados para ajustar su escala.
- Modos de interpolación RGB y HSL: la interpolación RGB crea una transición lineal suave entre los dos colores en el espacio RGB, mientras que la interpolación HSL viaja a través del espacio de color HSL para obtener gradientes perceptivamente más suaves. Cambie entre modos instantáneamente para comparar la diferencia.
- 100% privado: sin carga: toda la generación de escalas de colores se realiza localmente en su navegador. Sus valores de color nunca salen de su dispositivo y nunca se envían a ningún servidor: seguro para proyectos de clientes y sistemas de diseño propietarios.
- Gratis y sin límites: genere escalas de colores ilimitadas sin registro, suscripción ni límites de uso. El generador de escala de colores es completamente gratuito para siempre y no hay anuncios que bloqueen la interfaz.
Casos de uso comunes del generador de escalas de colores
- Tokens y variables de diseño CSS: los mantenedores del sistema de diseño utilizan el generador de escala de colores para crear escalas de colores escalonadas para propiedades personalizadas de CSS. Genere tokens de colores consistentes como --scale-1 a --scale-10 con pasos distribuidos uniformemente entre dos colores de marca para usar en toda una aplicación.
- Paletas de colores del sistema de diseño: los diseñadores utilizan el generador de escala de colores para crear paletas de colores estructuradas a partir de los colores de la marca. Los pasos generados proporcionan valores intermedios que se pueden usar para estados de desplazamiento, estados activos, bordes y fondos, lo que garantiza la coherencia visual en todos los componentes de la interfaz de usuario.
- Visualización de datos y gráficos: los desarrolladores de visualización de datos utilizan el generador de escalas de colores para crear escalas de colores secuenciales para cuadros, gráficos y mapas de calor. Los pasos distribuidos uniformemente garantizan que cada punto de datos tenga un color visualmente distinto mientras se mantiene un gradiente coherente en toda la visualización.
- Mapas de temperatura y gravedad: los paneles de análisis utilizan el generador de escalas de colores para crear escalas de colores para mapas de temperatura, indicadores de gravedad y barras de progreso. De rojo a verde o de azul a naranja, la escala escalonada proporciona una clara diferenciación visual para cada nivel de umbral.
- Configuraciones personalizadas de Tailwind CSS: los desarrolladores que utilizan Tailwind CSS pueden exportar la escala de colores generada directamente como tokens de configuración de Tailwind. Cada paso se convierte en una entrada de color con nombre que se puede utilizar en todo un proyecto con clases de utilidad Tailwind como bg-scale-3 o text-scale-7.
- Pautas de marca impresa y digital: los gerentes de marca utilizan el generador de escala de colores para documentar las transiciones de gradiente para el material publicitario de la marca. Los valores HEX intermedios garantizan que las transiciones de color de la marca se puedan reproducir con precisión en materiales digitales e impresos.
¿Qué es una escala de colores?
Una escala de colores es una secuencia de colores espaciados uniformemente que realizan una transición suave entre un color inicial y un color final. Cada paso de la escala representa un color intermedio en una posición específica entre los dos puntos finales. El generador de escala de color calcula estos valores intermedios mediante interpolación matemática, produciendo un conjunto de colores que se pueden utilizar en sistemas de diseño, visualizaciones de datos y bibliotecas de componentes de interfaz de usuario.
Cómo funciona nuestro generador de escala de colores
- Elija sus colores: elija un color inicial y final usando el selector de color nativo o ingrese valores HEX directamente. También puedes seleccionar entre 10 pares de colores preestablecidos como Atardecer, Océano o Lavanda para comenzar rápidamente. Haga clic en Intercambiar para invertir la dirección de su escala.
- Establezca el número de pasos: use el control deslizante o la entrada numérica para elegir entre 2 y 50 pasos. Más pasos crean un degradado más fino con diferencias de color más pequeñas entre cada paso adyacente.
- Elija el modo de interpolación: el modo RGB interpola linealmente a través del cubo de color RGB, mientras que el modo HSL interpola a través del cilindro HSL para lograr transiciones perceptualmente más suaves. Alterna entre ellos para ver cuál funciona mejor con tu par de colores.
- Explora y exporta: haz clic en cualquier muestra para ver sus valores HEX, RGB y HSL detallados. Exporte la escala completa como valores HEX, código de gradiente CSS, propiedades personalizadas de CSS o tokens de configuración de Tailwind.
Interpolación RGB frente a HSL
- La interpolación RGB cambia cada canal de color (rojo, verde, azul) de forma independiente mediante interpolación lineal. Este es el método más sencillo y rápido, ya que produce un recorrido directo y en línea recta a través del cubo de color RGB. La interpolación RGB funciona bien para la mayoría de los pares de colores y crea degradados de apariencia natural.
- La interpolación HSL convierte ambos colores al espacio de color HSL (Tono, Saturación, Luminosidad) e interpola cada componente de forma independiente. El valor del tono utiliza la interpolación del camino más corto para evitar recorrer el camino más largo en la rueda de colores. La interpolación HSL a menudo produce transiciones perceptualmente más uniformes, especialmente cuando los colores inicial y final tienen tonos diferentes.
- Elegir el modo correcto: generalmente se prefiere RGB para gradientes simples de marca a marca donde la precisión del color es importante. HSL es mejor para las escalas de color utilizadas en la visualización de datos donde la uniformidad perceptiva es importante. Experimente con ambos modos para ver cuál produce el resultado más agradable a la vista para su par de colores específico.
Privacidad, seguridad y disponibilidad
Procesamiento 100% del lado del cliente: nuestro generador de escala de colores se ejecuta completamente en su navegador usando JavaScript. Nunca se cargan, almacenan ni transmiten valores de color a ningún servidor. Esto lo hace seguro para proyectos sensibles de clientes y sistemas de diseño propietarios.
Sin registro ni límites: el generador de escala de colores es completamente gratuito, no requiere cuenta, no tiene límites de uso ni funciones premium. Genere escalas de colores ilimitadas al instante y sin restricciones.
Preguntas frecuentes
Un generador de escala de color crea una secuencia de colores espaciados uniformemente que realizan una transición suave entre un color inicial y un color final. Nuestro generador de escala de color le permite elegir entre 2 y 50 pasos, admite modos de interpolación RGB y HSL y proporciona valores intermedios HEX, RGB y HSL para cada paso.
Primero, elija un color inicial y un color final usando los selectores de color o ingrese valores HEX directamente. También puede hacer clic en cualquier par preestablecido (como Sunset u Ocean) para cargar rápidamente combinaciones de uso común. Luego use el control deslizante Pasos para elegir cuántos colores intermedios desea (2-50). Finalmente, alterna entre los modos de interpolación RGB y HSL para ver cuál produce el mejor degradado para tus colores.
La interpolación RGB realiza una transición lineal de cada canal de color (rojo, verde, azul) entre los dos colores, creando una ruta directa a través del cubo de color RGB. La interpolación HSL convierte los colores al espacio de color HSL e interpola Tono, Saturación y Luminosidad por separado, con la interpolación de tono más corta para evitar ir en el camino equivocado en la rueda de colores.
El generador de escala de colores admite de 2 a 50 pasos. El número óptimo depende de su caso de uso: de 5 a 10 pasos funcionan bien para tokens de color del sistema de diseño, de 8 a 15 pasos son ideales para escalas de visualización de datos y de 20 a 50 pasos crean un degradado muy fino adecuado para mapas de calor o rampas de color continuas.
Sí. Toda la generación de escalas de colores ocurre 100% en el lado del cliente en su navegador. Sus valores de color nunca se envían a ningún servidor, nunca se almacenan y nunca se transmiten a ningún lado. El generador de escala de colores es completamente privado y procesa todo localmente en su dispositivo.
El generador de escala de colores proporciona múltiples opciones de exportación. Puede copiar todos los valores HEX como una lista separada por comas, copiar la cadena de gradiente CSS, copiar propiedades personalizadas de CSS (variables CSS) o copiar un fragmento de configuración de CSS de Tailwind. También se puede hacer clic en cada paso para ver sus valores HEX, RGB y HSL individuales.
Un generador de tintes y sombras comienza con un color y produce variaciones más claras y más oscuras mezclándolo con blanco y negro respectivamente. Un generador de escala de color interpola entre dos colores distintos, produciendo un degradado que puede ir de un tono a otro completamente diferente, por ejemplo, de rojo a azul o de verde a morado.
Sí. El generador de escala de colores es 100% gratuito, no es necesario registrarse, no tiene funciones premium ni límites de uso. Genere escalas de colores ilimitadas sin restricciones ni costos ocultos. No hay anuncios que bloqueen la interfaz.