Generador de paletas – Paletas armónicas

Elige una armonía, arrastra sus puntos vinculados por la rueda de colores interactiva y ajusta la luminosidad para crear una paleta equilibrada.

Tipo de armonía

Probar un ejemplo

Rueda de color interactiva

Arrastra cualquier punto para girar la armonía. Muévelo hacia el centro para reducir la saturación.

60%
H 217°S 91%L 60%
Armonía principal (2)Variantes de apoyo (3)
Base
Complemento

Base

#3B82F6

Complemento

#EEAD44

Base · Variante 1

#AAC0E3

Complemento · Variante 1

#E0CDAD

Base · Variante 2

#255BB1

Más herramientas

Crea paletas armónicas al instante

Elegir colores que combinen bien es uno de los retos más habituales en diseño. Las reglas de armonía cromática, basadas en las relaciones entre matices en el círculo cromático, ofrecen una base fiable para crear paletas equilibradas.

Este generador de paletas toma cualquier color base y aplica reglas de armonía estándar para producir un conjunto de colores armónicos. Introduce un color en formato HEX, RGB o HSL y cambia entre tipos de armonía para explorar distintas combinaciones.

Tipos de armonía explicados

  • Complementaria — dos colores opuestos en el círculo cromático (a 180°). Alto contraste, combinaciones impactantes.
  • Análoga — tres colores adyacentes en el círculo (a 30°). Naturalmente armónica y bajo contraste.
  • Triádica — tres colores equidistantes en el círculo (a 120°). Vibrante y equilibrada.
  • Complementaria dividida — un color base más dos colores adyacentes a su complementario (150° y 210°). Más suave que la complementaria pura.
  • Tetrádica (cuadrado) — cuatro colores equidistantes en el círculo (a 90°). Paletas ricas y complejas.

Cómo usar el generador de paletas

  1. Introduce un color base — escribe un valor HEX, RGB o HSL, o usa el selector de color nativo
  2. Elige un tipo de armonía en el selector
  3. Arrastra un punto vinculado por la rueda para cambiar matiz y saturación y luego ajusta la luminosidad
  4. Visualiza la paleta generada como muestras de color
  5. Copia los valores HEX o RGB de cualquier muestra con un clic
  6. Cambia entre tipos de armonía para comparar distintas paletas

Cuándo usar un generador de paletas

  • Al iniciar un nuevo proyecto de diseño y necesitar una paleta equilibrada
  • Para construir una identidad de marca en torno a un color principal
  • Para crear temas de interfaz con colores de acento armónicos
  • Para explorar relaciones cromáticas en ilustración o arte
  • Para generar paletas rápidamente en presentaciones o prototipos

Armonía principal y variantes de apoyo

Cada armonía genera cinco muestras. La complementaria tiene dos colores principales; la análoga, triádica y complementaria dividida tienen tres, y la tetrádica cuatro. Las muestras restantes son variantes de apoyo con saturación o luminosidad ajustadas.

Cinco colores a partir de un color base

El color base identificado se conserva mientras la rueda calcula la armonía y sus variantes. Para obtener los colores dominantes de una imagen completa, usa el Extractor de paleta de imagen; para seleccionar un píxel exacto, usa el Selector de color.

Usar HEX, RGB, HSL y OKLCH

El campo admite HEX, RGB, HSL y OKLCH. Puedes copiar una muestra en HEX o RGB, o copiar los cinco colores como códigos HEX en mayúsculas separados por comas.

Rápido, gratis y privado

Todos los cálculos se realizan en tu navegador. No hay cuenta, carga de archivos, almacenamiento ni procesamiento en servidores; la rueda funciona con ratón, pantalla táctil y teclado.

La rueda muestra relaciones cromáticas teóricas, pero no garantiza la legibilidad. Usa el Verificador de contraste para medir el contraste WCAG y el Conversor de colores para cambiar de formato.

Preguntas frecuentes

¿Qué es una armonía cromática?
La armonía cromática se refiere a combinaciones de colores visualmente agradables. Estas combinaciones se basan en las relaciones geométricas entre matices en el círculo cromático — por ejemplo, colores opuestos (complementarios) o equidistantes (triádicos).
¿Qué tipo de armonía debo usar?
Depende de tu objetivo de diseño. La complementaria crea fuerte contraste e impacto visual. La análoga transmite calma y cohesión. La triádica es vibrante y equilibrada. La complementaria dividida ofrece contraste con menos tensión. La tetrádica da paletas ricas y complejas, ideales para diseños con muchos elementos.
¿Qué formatos de color puedo introducir?
Puedes introducir HEX, RGB, HSL u OKLCH; la herramienta detecta el formato automáticamente.
¿Cómo se calculan los colores de la paleta?
El color base se convierte a HSL y se coloca en los ángulos exactos de la armonía seleccionada. Cada relación se amplía a cinco muestras prácticas con variaciones equilibradas de saturación y luminosidad. La rueda interactiva muestra cada muestra: al arrastrar un punto gira toda la armonía y el control de luminosidad actualiza la paleta.
¿Puedo copiar los colores generados?
Sí. Copia cada color en HEX o RGB, o la paleta completa como cinco códigos HEX en mayúsculas separados por comas.
¿Funciona esta herramienta en móvil?
Sí. La rueda adaptable funciona mediante gestos táctiles en móviles y con ratón o teclado en ordenadores.
¿Es gratuita esta herramienta?
Sí. ColourPicker.app es completamente gratuito, sin registro.
¿Puedo guardar mis paletas generadas?
La herramienta no guarda paletas entre sesiones. Puedes copiar valores de color individuales y guardarlos en tus archivos de proyecto o herramienta de diseño.
¿Qué muestra una rueda de colores?
Organiza los tonos en un círculo: el ángulo representa el tono, la distancia al centro la saturación y el control separado la luminosidad.
¿Por qué cada paleta contiene cinco colores?
Cinco muestras ofrecen un conjunto constante de dos a cuatro colores principales más las variantes de apoyo necesarias.
¿Qué son los colores principales y las variantes de apoyo?
Los colores principales forman la geometría elegida; las variantes reutilizan esos tonos con distinta saturación o luminosidad.
¿Una armonía garantiza suficiente contraste?
No. La armonía describe relaciones entre tonos; comprueba por separado el contraste WCAG entre primer plano y fondo.