Elige un color y esta herramienta te muestra su complementario y una escala de tintes y sombras. Son puntos de partida útiles. También los produce la aritmética sobre HSL, y HSL miente sobre la luminosidad de un modo que moldea toda paleta construida sobre él: conviene entenderlo antes de fiarte de la salida.
La lightness de HSL no es luminosidad
He aquí la medida que explica mucha frustración. Toma seis colores completamente saturados, todos con lightness HSL del 50%: amarillo, verde, cian, azul, rojo, magenta. HSL afirma que son igual de claros. No lo son, y ni se acerca.
Medido como luz realmente emitida, el amarillo en hsl(60, 100%, 50%) alcanza el 92,8% del blanco. El azul en hsl(240, 100%, 50%) alcanza el 7,2%. El amarillo emite trece veces la luz del azul mientras ambos llevan la misma etiqueta de luminosidad. El verde está en el 71,5%, el rojo en el 21,3%.
La razón es que HSL se diseñó en los años setenta para ser fácil de calcular, no para modelar la visión. Su eje de lightness es el punto medio entre el canal RGB mayor y el menor: un pedazo de aritmética que no tiene nada que ver con cómo responde el ojo. El verde aporta alrededor del 71% del brillo percibido y el azul un 7%, y HSL no sabe nada de eso.
La consecuencia práctica: una paleta construida manteniendo la lightness constante y girando el tono se verá salvajemente irregular. Tu amarillo deslumbrará y tu azul desaparecerá. Todo diseñador que ha construido un juego de colores de estado en HSL y se ha preguntado por qué el amarillo necesita un caso especial se ha topado con esto.
Qué es realmente el complementario
El color complementario aquí es el tono girado 180 grados: el azul da amarillo, el rojo da cian. Es la definición estándar y un punto de partida genuinamente útil, porque los tonos opuestos sí crean el mayor contraste de tono posible.
Dos advertencias. La primera es que es un punto de partida, no una respuesta: dos tonos opuestos completamente saturados enfrentados rara vez son un diseño, son una señal de alarma. El movimiento habitual es tomar el complementario y luego desaturarlo y aclararlo con fuerza, para que funcione como acento en vez de como competidor.
La segunda es que "complementario" en sentido de rueda de color no dice nada sobre el contraste en sentido de accesibilidad. El azul y el amarillo son complementarios y da la casualidad de que llegan a 8:1, lo que sirve para texto. El rojo y el cian también son complementarios, y aterrizan mucho más abajo. Si eliges una pareja para texto sobre fondo, la rueda no es la herramienta: lo es una relación de contraste.
Tintes y sombras, y por qué los pasos parecen mal
Un tinte es el color mezclado hacia el blanco, una sombra hacia el negro. Generar una escala dando pasos iguales en el valor de lightness es el enfoque obvio, y produce una escala cuyos pasos no se sienten iguales: el extremo claro se apelmaza y el oscuro se abre, o al revés, según el tono.
Es el mismo problema de arriba: pasos iguales en HSL no son pasos iguales en la percepción. Importa si construyes un sistema de diseño, donde una escala de color tiene que funcionar como escala, donde "el 500 es dos pasos más oscuro que el 300" debe significar lo mismo para tu azul que para tu amarillo.
La respuesta moderna es Oklch, un espacio de color construido específicamente para que su eje de luminosidad sea perceptualmente uniforme. Añadir diez puntos de luminosidad en Oklch parece un paso del mismo tamaño sin importar el tono. El CSS ya lo soporta directamente, y si generas una escala por código en vez de a ojo, merece la tarde que cuesta aprenderlo.
Preguntas frecuentes
¿Se envía algo a un servidor?
No. Esta herramienta está marcada como "client": la matemática de color se ejecuta en la pestaña de tu navegador y no se transmite nada.
¿Por qué mi amarillo parece mucho más brillante que mi azul con la misma lightness?
Porque lo es de verdad: medido, trece veces más brillante. La lightness de HSL es una fórmula sobre canales RGB, no una medida de luz. El ojo es mucho más sensible al verde y al amarillo que al azul, y HSL no lo modela en absoluto. Si necesitas colores que parezcan igual de claros, necesitas un espacio perceptual como Oklch, o ajustar a ojo y aceptar que los números no quedarán ordenados.
¿Puedo usar el complementario como color de texto sobre la base?
Comprueba la relación de contraste antes. Complementario significa opuesto en la rueda, lo que va de tono y no dice nada sobre si uno es legible sobre el otro. Algunas parejas complementarias superan las WCAG con holgura y otras fallan de largo. Es una comprobación de dos segundos y es lo único que responde a la pregunta.
¿Cómo cojo un color de mi pantalla?
No con esta herramienta: una página web no puede leer píxeles fuera de sí misma, que es un límite de seguridad y no una función que falte. Chrome y Edge exponen una API EyeDropper que algunos sitios usan, pero la respuesta fiable es tu sistema operativo: macOS tiene el Medidor de Color Digital, Windows tiene el selector de PowerToys, y toda herramienta de diseño lleva uno dentro.
¿Por qué el mismo hex se ve distinto en mi móvil?
Un código hex no dice nada sobre qué espacio de color quiere decir; la web supone sRGB. Las pantallas modernas de móvil pueden mostrar un rango más amplio, y cómo tratan un color sRGB sin etiquetar varía: unas lo mapean fielmente, otras lo estiran hacia su gama más ancha y lo hacen más saturado de lo que pretendías. Añade brillo, luz ambiente y cualquier filtro nocturno, y que números idénticos lleguen a ojos distintos es el caso normal, no la excepción.