Saltar al contenido
Aback Tools Logo

Buscador de colores complementarios

Introduce cualquier color en formato HEX, RGB o HSL y ve al instante las seis armonías cromáticas: complementaria, complementaria partida, análoga, triádica, tetrádica y monocromática. Haz clic en cualquier muestra para copiar su valor HEX o exporta propiedades personalizadas CSS. Se ejecuta íntegramente en tu navegador, sin registro.

Find Complementary Colors

Enter any color in HEX, RGB, or HSL format to instantly see its complementary, split-complementary, analogous, triadic, tetradic, and monochromatic color harmonies. Click any swatch to copy its HEX value. All processing runs locally in your browser.

Accepts: #RGB, #RRGGBB, rgb(r,g,b), hsl(h,s%,l%)

#3C83F6
rgb(60, 131, 246)
hsl(217°, 91%, 60%)

Quick samples:

Complementary

The color directly opposite on the color wheel (180°). Creates maximum contrast and visual tension.

Base
#3C83F6
hsl(217, 91%, 60%)
Complement
#F6AF3C
hsl(37, 91%, 60%)
Split-Complementary

The two colors adjacent to the complement (150° and 210°). High contrast with more variety than complementary.

Base
#3C83F6
hsl(217, 91%, 60%)
Split 1
#F6523C
hsl(7, 91%, 60%)
Split 2
#E0F63C
hsl(67, 91%, 60%)
Analogous

Colors adjacent on the color wheel (±30° and ±60°). Creates harmonious, natural-looking palettes.

−60°
#3CF6AF
hsl(157, 91%, 60%)
−30°
#3CE0F6
hsl(187, 91%, 60%)
Base
#3C83F6
hsl(217, 91%, 60%)
+30°
#523CF6
hsl(247, 91%, 60%)
+60°
#AF3CF6
hsl(277, 91%, 60%)
Triadic

Three colors evenly spaced around the wheel (120° apart). Vibrant and balanced.

Base
#3C83F6
hsl(217, 91%, 60%)
Triad 2
#F63C83
hsl(337, 91%, 60%)
Triad 3
#83F63C
hsl(97, 91%, 60%)
Tetradic (Square)

Four colors evenly spaced (90° apart). Rich and complex - works best when one color dominates.

Base
#3C83F6
hsl(217, 91%, 60%)
Tetrad 2
#F63CE0
hsl(307, 91%, 60%)
Tetrad 3
#F6AF3C
hsl(37, 91%, 60%)
Tetrad 4
#3CF652
hsl(127, 91%, 60%)
Monochromatic

Variations of the same hue with different lightness and saturation. Elegant and cohesive.

Lightest
#E9F0FB
hsl(217, 71%, 95%)
Lighter
#BAD2F8
hsl(217, 81%, 85%)
Base
#3C83F6
hsl(217, 91%, 60%)
Darker
#004ECC
hsl(217, 100%, 40%)
Darkest
#003180
hsl(217, 100%, 25%)

¿Por qué usar nuestro buscador de colores complementarios?

  • Generación instantánea de armonías: el buscador genera las seis armonías cromáticas en tiempo real mientras escribes. Introduce cualquier color y ve de inmediato los resultados complementario, complementario partido, análogo, triádico, tetrádico y monocromático.
  • Procesamiento seguro y privado: tus valores de color nunca salen de tu dispositivo. El buscador se ejecuta íntegramente en tu navegador con matemáticas de color locales, así que no se sube ningún dato.
  • Seis reglas de armonía cromática: obtén las armonías complementaria, complementaria partida, análoga (±30°/±60°), triádica (120°), tetrádica/cuadrada (90°) y monocromática, cada una con valores HEX, RGB y HSL y exportación de variables CSS en un clic.
  • 100 % gratis para siempre: usa este buscador sin registro, suscripciones, límites de tasa ni muros de pago ocultos. Encuentra armonías para tantos colores como necesites, totalmente gratis.

¿Qué es un buscador de colores complementarios?

Un buscador de colores complementarios es una herramienta que calcula relaciones cromáticas según la posición de los colores en el círculo cromático HSL. Todo color tiene un conjunto de parejas armoniosas: colores que funcionan bien juntos por su relación angular en el círculo. La más conocida es el color complementario, que se sitúa exactamente a 180° en el círculo y crea el máximo contraste. Este buscador calcula seis tipos de armonía a partir de cualquier color de entrada y muestra cada muestra con sus valores HEX, RGB y HSL, todo ejecutándose localmente en tu navegador sin llamadas al servidor.

Cómo funciona nuestro buscador de colores complementarios

  1. Introduce tu color base: escribe cualquier color en formato HEX (#RRGGBB), RGB (rgb(r,g,b)) o HSL (hsl(h,s%,l%)), o usa el selector de color para elegirlo visualmente.
  2. Ve las seis armonías al instante: el buscador convierte tu entrada a HSL, rota el tono según los ángulos correspondientes a cada tipo de armonía y muestra todas las muestras de inmediato, sin pulsar ningún botón.
  3. Copia colores y variables CSS: haz clic en cualquier muestra para copiar su valor HEX, o usa el botón CSS de cada armonía para copiar un bloque de propiedades personalizadas CSS listo para usar.

Los seis tipos de armonía cromática

  • Complementaria: el color directamente opuesto en el círculo (180°). Crea el máximo contraste, ideal para botones de llamada a la acción y elementos de acento.
  • Complementaria partida: los dos colores adyacentes al complementario (150° y 210°). Alto contraste con más variedad y menos tensión que la complementaria pura.
  • Análoga: colores adyacentes en el círculo (±30° y ±60°). Crea paletas armoniosas y de aspecto natural, habituales en la naturaleza y la fotografía.
  • Triádica: tres colores espaciados uniformemente a 120°. Vibrante y equilibrada, funciona bien en diseños lúdicos y enérgicos.

Limitaciones importantes

Los cálculos de armonía cromática se basan en el modelo de color HSL, que rota el tono manteniendo la saturación y la luminosidad. La armonía monocromática ajusta la luminosidad y la saturación para crear variaciones tonales. Todos los cálculos son aproximaciones matemáticas: la armonía percibida también depende del contexto, de los colores circundantes y del caso de uso concreto. Prueba siempre tu paleta en el entorno de diseño real antes de darla por definitiva.

Preguntas frecuentes

Un buscador de colores complementarios calcula relaciones cromáticas basadas en el círculo cromático HSL. Encuentra las variaciones complementaria (180°), complementaria partida (150°/210°), análoga (±30°/±60°), triádica (120°), tetrádica (90°) y monocromática de cualquier color de entrada.

El color complementario está directamente enfrente en el círculo cromático, a 180° de distancia en el tono. Las parejas complementarias crean el máximo contraste. Por ejemplo, el complementario del azul es el naranja.

La complementaria usa el único color directamente opuesto (180°). La complementaria partida usa los dos colores adyacentes al complementario (150° y 210°), ofreciendo un contraste similar con más variedad.

Sí. Todo el procesamiento ocurre íntegramente en tu navegador. Tus valores de color nunca salen de tu dispositivo.

Sí. La herramienta es 100 % gratis, sin registro, sin suscripción y sin límites de uso.

HEX (#RGB o #RRGGBB), RGB (rgb(r,g,b)) y HSL (hsl(h,s%,l%)). También puedes usar el selector de color integrado.

Haz clic en cualquier muestra para copiar su valor HEX. Usa el botón CSS de cada armonía para copiar un bloque de propiedades personalizadas CSS. Usa Copiar todos los valores HEX para copiarlo todo de una vez.

La armonía monocromática usa el mismo tono pero varía la luminosidad y la saturación para crear una gama de matices de claro a oscuro: elegante y cohesionada para el diseño de interfaces.

Los cálculos de armonía se basan en el modelo HSL. La armonía percibida también depende del contexto y de la calibración de la pantalla. Prueba siempre tu paleta en el entorno de diseño real.