:root {
--color-100: #f5d0fb;
--color-200: #eba1f7;
--color-300: #e272f3;
--color-400: #d843ef;
--color-500: #ce14eb;
--color-600: #a510bc;
--color-700: #7c0c8d;
--color-800: #52085e;
--color-900: #29042f;
}Sobre el generador de paletas de colores
Genera una paleta de colores coordinada a partir de un único color base. La herramienta calcula variaciones complementarias, análogas, triádicas y de tonos según las relaciones clásicas del círculo cromático, y te da cada muestra en HEX, RGB y HSL o como un bloque de variables CSS listo para pegar. Muy útil cuando tienes un color de marca y necesitas un conjunto completo que combine con él.
Cómo usar el generador de paletas de colores
-
Elige un color base
Escribe un valor HEX o usa el selector de color. Todas las paletas derivadas se actualizan a partir de este único valor.
-
Elige un tipo de armonía
Cambia entre Tonos, Complementaria, Análoga y Triádica para ver distintas relaciones con el color base.
-
Copia en el formato que prefieras
Copia una muestra suelta en HEX, RGB o HSL, o exporta la paleta completa como «Variables CSS», listas para pegar en tu hoja de estilos.
Casos de uso
Crear un sistema de diseño
Obtén un conjunto coherente de tokens de acento y de tonos a partir de un solo color de marca.
Elegir los colores de estado de la interfaz
Genera variantes de un color de botón para los estados hover, activo y desactivado sin salir de la misma familia de matiz.
Empezar una identidad visual
Explora armonías alrededor de un color que te guste para encontrar un color secundario y uno de acento que combinen.
Preguntas frecuentes
¿Qué es una paleta de colores complementaria?
La formada por dos colores situados uno frente al otro en el círculo cromático. El contraste es fuerte, por eso las parejas complementarias funcionan bien en llamadas a la acción, pero resultan estridentes en zonas grandes que se tocan.
¿Cuándo conviene usar colores análogos?
Las paletas análogas usan matices vecinos, lo que da un aspecto más tranquilo y cohesionado. Funcionan bien en fondos y superficies donde buscas armonía más que contraste.
¿Comprueba el contraste de accesibilidad?
Solo en parte. La tabla de valores muestra la relación de contraste WCAG del texto blanco y del negro sobre cada color, pero no evalúa combinaciones entre los colores de la paleta. Armonía y contraste son cosas distintas: una paleta puede ser agradable a la vista y aun así no cumplir los requisitos de contraste WCAG para texto. Comprueba las parejas reales de texto y fondo con un comprobador de contraste antes de publicar.
¿Qué diferencia hay entre HEX, RGB y HSL?
Describen los mismos colores con notaciones distintas. HSL es la más práctica para editar a mano, porque ajustar la luminosidad o la saturación consiste en cambiar un solo número en lugar de recalcular tres canales.
Herramientas relacionadas
Explora todas las herramientas online gratis de Tooly: todas funcionan en tu navegador y ninguna necesita cuenta.