Generador de colores complementarios
Encuentre el color complementario de cualquier color base con este Generador de colores complementarios. Introduzca un código hexadecimal de 3 o 6 dígitos y la herramienta gira su tono 180 grados en la rueda de color HSL, manteniendo la saturación y la luminosidad, y devuelve el color base y su complementario como códigos hexadecimales. Ideal para diseñadores y desarrolladores que necesitan un acento de alto contraste para botones, destacados, gráficos y elementos de marca.
Preguntas frecuentes
¿Qué devuelve el Generador de colores complementarios?
Devuelve dos colores como códigos hexadecimales en minúsculas de seis dígitos. El color 1 es el color base y el color 2 es su complementario, el color que se encuentra justo enfrente en la rueda de color.
¿Cómo se calcula el color complementario?
La herramienta convierte el código hexadecimal a HSL, suma 180 grados al tono y mantiene sin cambios la saturación y la luminosidad. El valor girado se convierte de nuevo a RGB y se escribe como código hexadecimal, de modo que el color complementario tiene la misma viveza y brillo que el color base.
¿Qué formatos de color puedo introducir?
Introduzca un código hexadecimal de 3 o 6 dígitos, con o sin el # inicial, en mayúsculas o minúsculas, como #ff5733, FF5733 o #f00. Aquí no se aceptan las notaciones RGB y HSL ni los nombres de colores; conviértalos primero a hexadecimal con un conversor de colores.
¿Por qué el color 1 es ligeramente distinto del código hexadecimal que introduje?
El color base se convierte a HSL con valores enteros para el tono, la saturación y la luminosidad, y luego se convierte de nuevo a hexadecimal, por lo que un canal puede variar en una unidad. Por ejemplo, #ff5733 vuelve como #ff5833 y su complementario es #33daff.
¿Cuál es el complementario del rojo puro?
El complementario de #ff0000 es #00ffff, cian. Esta herramienta usa la rueda HSL RGB basada en pantallas, por lo que el rojo se combina con el cian, en lugar de con el verde como en la rueda tradicional de los pintores.
¿Qué ocurre con el negro, el blanco o el gris?
Los colores neutros tienen saturación cero, por lo que girar el tono no cambia nada y ambos resultados son el mismo gris. Elija un color base con algo de saturación si necesita un complementario visible.
¿Cómo debería usar una pareja de colores complementarios en un diseño?
Use un color en la mayor parte de la superficie y reserve el complementario para llamadas a la acción, destacados o datos que quiera resaltar. Usar cantidades iguales de ambos con la saturación al máximo suele producir un efecto visual vibrante; por eso, aplique un tinte o una sombra a uno de ellos en las áreas grandes.
¿La herramienta comprueba el contraste del texto?
No, solo calcula la pareja de colores. Un complementario conserva la luminosidad del color base, así que ambos colores pueden tener una luminancia similar y ofrecer poco contraste para el texto; compruebe la pareja con un verificador de contraste WCAG antes de usar uno sobre el otro.
¿Puedo introducir varios colores a la vez?
No, cada ejecución acepta exactamente un código hexadecimal. Las entradas con varias líneas o texto adicional se rechazan con un mensaje de error, así que ejecute la herramienta una vez por cada color base.
¿El resultado es el mismo que el del Generador de paletas de colores?
Sí. Esta herramienta realiza el mismo cálculo que la opción Complementario del Generador de paletas de colores, por lo que el mismo color base siempre produce los mismos dos códigos hexadecimales en ambas herramientas.