¿Qué es Buscador de colores complementarios?

El Buscador de Colores Complementarios calcula el color opuesto en el círculo cromático para cualquier valor. También muestra armonías análogas, triádicas y complementarias divididas para que puedas armar una paleta coherente.

La herramienta usa el motor HSL de chroma-js y rota la rueda de matiz en ángulos fijos para generar seis armonías: complementaria (180°), análoga (±30°), triádica (120° y 240°), complementaria dividida (150° y 210°), tetrádica o cuadrada (90°, 180°, 270°) y monocromática (variaciones claras y oscuras del color base). Cada muestra enseña sus valores HEX, RGB y HSL, y copia cualquiera de los tres formatos con un clic, lista para pegar en Figma, en tu config de Tailwind o directamente en una regla CSS.

Cómo usar

1. Paso 1 — Introduce un color base en formato HEX (#FF6600) o RGB (255 102 0), o selecciónalo con el selector de color.
2. Paso 2 — Visualiza al instante el color complementario (opuesto a 180° en el círculo cromático) con sus códigos de color.
3. Paso 3 — Explora armonías adicionales (análogas, triádicas, complementarias divididas) y copia el valor de cualquier muestra.

Cuándo usar

• Esbozar una paleta de marca a partir de un color primario sin abrir Adobe Color.
• Elegir un color de botón que destaque sobre el fondo de la página.
• Escoger colores de serie en gráficos que sigan legibles juntos.

Resultado

Un diseñador de marca introduce naranja primario #FF8C00 y obtiene azul complementario #0073FF, además de tonos cálidos análogos #FF4400 y #FFB800 para una paleta cohesiva.

Preguntas frecuentes

¿En qué se diferencia complementaria y complementaria dividida?

La complementaria es el color opuesto en la rueda (180°). La dividida toma los dos colores que flanquean ese opuesto (150° y 210°). La dividida se siente menos agresiva y suele integrarse mejor en una interfaz completa sin chocar.

¿Funciona con colores base muy oscuros o muy pálidos?

Las armonías basadas en matiz (complementaria, análoga, triádica, complementaria dividida, tetrádica) solo rotan el matiz, así que saturación y luminosidad se conservan: base pálida da compañeros pálidos y base oscura da compañeros oscuros. La monocromática varía la luminosidad alrededor de tu matiz de forma intencional. Si una pareja basada en matiz se ve desvaída, sube la saturación del color base antes de generar.

¿Usa la rueda del artista (RYB) o la de pantalla (RGB)?

La de pantalla. El opuesto del rojo (#FF0000) aquí es cian (#00FFFF), no verde como dice la teoría de óleos. Para diseño digital es el modelo correcto; para mezclar pintura física te quedará raro.

¿Por qué algunos colores base devuelven un complementario muy parecido al base?

Los grises puros tienen matiz indefinido, así que la rotación gira sobre nada y devuelve el mismo gris. Añade aunque sea un 5% de saturación a la base y la complementaria saltará como toca.

¿Puedo exportar la paleta completa de una vez?

Sí, de cuatro formas. «Descargar paleta» guarda cada muestra y su HEX en un archivo de texto plano. «Descargar CSS» exporta la paleta como variables CSS listas para usar (por ejemplo --color-complementary-1: #0099FF;). «Config de Tailwind» genera un objeto de colores listo para pegar en tailwind.config.js. «Imagen PNG» guarda toda la paleta como una imagen con etiquetas, ideal para revisiones de diseño.

Herramientas relacionadas