Buscador de Color Complementario
Introduce un color base
Admite #RGB, #RRGGBB, rgb() con enteros y hsl() con porcentajes. Los cálculos quedan en el navegador; la URL incluye el color y se envía al solicitar cada paso.
Los colores complementarios ocupan posiciones opuestas en una rueda de color digital. Introduce un valor HEX, RGB o HSL estricto para calcular el complemento HSL, los colores complementarios divididos, la combinación tetrádica y las relaciones de contraste WCAG. Todo se calcula localmente en tu navegador.
Cómo se calcula el complemento
-
1
Ingresa cualquier color
Usa #RGB, #RRGGBB, rgb() con enteros o hsl() con porcentajes. El valor completo se valida antes de calcular.
-
2
Rota el matiz 180°
Complemento HSL: añade 180° al matiz, mantén la saturación y la luminosidad igual.
-
3
Complemento dividido derivado
Dos colores a 150° y 210° de la base, una alternativa más suave al complemento directo cuando el contraste es demasiado alto.
-
4
Aparecen pistas de accesibilidad
Relación de contraste del par contra blanco y negro, además de una advertencia si el par probablemente fallará WCAG AA cuando se use como fg/bg.
Ejemplos
| Color base | Hex | Complemento (HSL) | Hex |
|---|---|---|---|
| Rojo puro | #FF0000 | Cian | #00FFFF |
| Coral | #FF7F50 | Turquesa agua | #50D0FF |
| Verde bosque | #228B22 | Púrpura | #8B228B |
| Azul real | #4169E1 | Naranja dorado | #E1B941 |
| Lavanda | #E6E6FA | Amarillo pálido | #FAFAE6 |
Los valores HEX, RGB y HSL mostrados describen el mismo color sRGB. Copia un resultado para usarlo en CSS u otra herramienta de diseño.
Complemento HSL vs Complemento RYB
- HSL (pantalla): rojo ↔ cian, verde ↔ magenta, azul ↔ amarillo. Es la geometría del ángulo HSL derivado de sRGB que usa CSS, no una simulación de mezcla de luz.
- RYB (artista): rojo ↔ verde, azul ↔ naranja, amarillo ↔ púrpura. Es una convención didáctica tradicional, no una predicción de cómo se mezclarán pigmentos concretos.
Este buscador utiliza únicamente el modelo HSL digital. No convierte al círculo RYB de pintura, ya que el complemento de un pigmento depende de los materiales y de la mezcla.
Dónde funcionan bien los complementos
- Botones CTA contra fondos de marca. Combina el primario con su complemento para hacer que el botón resalte.
- Visualización de datos gráficos de series duales (ganancia vs pérdida, antes vs después).
- Sombras de ilustración: la sombra de una calabaza naranja se ve más convincente en azul que en un naranja más oscuro.
- Marca deportiva: muchos equipos usan paletas complementarias o de complemento dividido (azul/naranja, rojo/verde, amarillo/púrpura).
Dónde fallan
- Texto del cuerpo sobre fondo: los complementos directos (rojo sobre verde, azul sobre naranja) son incómodos de leer. La alta aberración cromática causa fatiga visual.
- Uso de superficie completa: una pantalla que es 50% roja y 50% verde es agotadora. Usa el complemento para acentos (5-10% del área de superficie), no como principal.
- Coherencia de marca: los complementos se sienten recargados. La mayoría de las marcas modernas usan monocromático o análogo + un acento, no complemento dual.
Complemento dividido
El complemento dividido (base + 150° + 210°) es a menudo una mejor opción práctica:
- Mantiene alto contraste con la región complementaria.
- Evita la vibración del complemento directo.
- Proporciona dos acentos para un diseño en capas.
Ejemplo: base = azul → complemento = naranja (duro) → complemento dividido = rojo-naranja + amarillo-naranja (más rico).
Desaturando complementos
Los complementos puros rara vez se ven bien a plena saturación. Reduce la saturación en un 20-40% en uno o ambos para una paleta más calmada:
- Rojo (S=100%) + Cian (S=100%) = vibrante.
- Rojo (S=60%) + Cian (S=60%) = paleta clásica de cartel.
- Ladrillo de marca (S=45%) + Teal polvoriento (S=30%) = moderno, utilizable.
Verificación de cordura antes de usar
- Relación de contraste del par: el buscador informa esto. Por debajo de 4.5:1 falla AA para texto.
- Prueba en fondo neutral: los complementos se ven diferentes contra blanco, gris, negro.
- Prueba de impresión si ese es el destino, CMYK puede cambiar la saturación y las relaciones de complemento frente a RGB.
Preguntas frecuentes
Ordenan el matiz según convenciones distintas. HSL usa un ángulo numérico derivado de sRGB; la rueda RYB tradicional distribuye los primarios artísticos en un círculo conceptual. Ninguna predice el resultado de mezclar luces o pinturas físicas.
Sí, son sinónimos en teoría del color. “Opuesto en la rueda de colores” y “complementario” se refieren a la misma relación.
Rara vez. Los complementos directos suelen fallar en el contraste WCAG cuando se usan como fg/bg porque tienen similar luminosidad. Aumenta la diferencia de luminosidad (texto oscuro sobre fondo claro) para aprobar.
Sí, el panel de resultados incluye complemento directo, complemento dividido (dos colores flanqueando) y cuádruple tetrádico. Elige el que mejor se adapte a tu objetivo de diseño.
Herramientas relacionadas
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Simplificador de Álgebra Booleana
Simplifica expresiones booleanas usando mapas de Karnaugh y el algoritmo de Quine-McCluskey. Muestra cada paso de minimización y una forma final SOP/POS.
Generador de Paletas de Color
Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.
Convertidor de binario a hex
Convierte entrada binaria en un valor hexadecimal simple en mayúsculas. Los caracteres no binarios se ignoran y los ceros iniciales no se conservan.
Convertidor de BBCode a HTML
Convierte BBCode (marcado de tablones de anuncios) a HTML limpio. Maneja etiquetas de formato, listas, citas, código, imágenes, enlaces y tablas.