Crea paletas de colores a partir de un color base, copia HEX, RGB, HSL y variables CSS directamente en el navegador.
El generador crea paletas en sRGB/HSL a partir de un color base. Muestra valores en HEX, RGB y HSL, además de una opción para copiar variables CSS.
Ingresa un color HEX o usa el selector, elige el modo de armonía y ajusta la cantidad de colores. El enlace compartido recrea la misma paleta con color, modo y cantidad, sin guardar historial ni favoritos.
La paleta se calcula en sRGB/HSL en el navegador a partir del color informado.
Acepta #RRGGBB, RRGGBB, #RGB o RGB.
Usa colores cercanos en el círculo HSL para una combinación suave.
Resumen
5 colores a partir de #2F80ED, en modo Análoga.
Cada tarjeta muestra valores en HEX, RGB y HSL. Las etiquetas quedan fuera del color para evitar mala lectura.
Color 1
#2F80ED
#2F80EDrgb(47, 128, 237)hsl(214, 84%, 56%)Color 2
#28EAD8
#28EAD8rgb(40, 234, 216)hsl(174, 82%, 54%)Color 3
#3ED3F2
#3ED3F2rgb(62, 211, 242)hsl(190, 87%, 60%)Color 4
#1C91D8
#1C91D8rgb(28, 145, 216)hsl(203, 77%, 48%)Color 5
#4A6FF1
#4A6FF1rgb(74, 111, 241)hsl(227, 86%, 62%)Los modos análogo, complementario y triádico giran el matiz alrededor del círculo HSL y ajustan saturación o luminosidad.
Los tonos varían principalmente la luminosidad; monocromático mantiene el matiz y combina variaciones de saturación y luminosidad.
La herramienta usa solo color, modo y cantidad en la URL. No guarda paletas en favoritos, localStorage ni servidor.
Comienza con un color que ya represente el proyecto, como un color de marca, imagen o preferencia visual. El botón aleatorio ayuda cuando quieres explorar.
HEX es compacto para CSS y diseño; RGB muestra canales rojo, verde y azul; HSL separa matiz, saturación y luminosidad, lo que facilita crear variaciones.
No necesariamente. Esta herramienta sugiere combinaciones visuales y no hace auditoría de contraste, WCAG ni legibilidad para textos.
No. La paleta se genera en el navegador. El enlace compartido guarda solo color base, modo y cantidad.
Sí. Copia los valores individuales o el bloque de variables CSS y ajusta los nombres según tu proyecto.