HEX, RGB y HSL describen un color de tres maneras
HEX escribe rojo, verde y azul con dos dígitos hexadecimales cada uno. #8B5CF6 significa R igual a 139, G igual a 92 y B igual a 246, exactamente los valores RGB. La forma abreviada de tres dígitos #F00 repite cada dígito, de modo que equivale a #FF0000.
HSL descompone el color en tono, saturación y luminosidad. El tono es un ángulo en la rueda de color, así que 0 y 360 grados son el mismo rojo; la saturación es la distancia al gris y la luminosidad la posición entre el negro y el blanco. Por eso HSL resulta más cómodo cuando quieres una versión más clara del mismo color.
La relación de contraste compara la luminancia relativa de dos colores y va de 1:1 a 21:1. Cada canal se corrige por gamma, se pondera con 0,2126, 0,7152 y 0,0722 y se suma; después se añade 0,05 tanto al valor más claro como al más oscuro antes de dividir. El verde lleva el peso mayor porque la visión humana es más sensible a él.
Lo que se pasa por alto al elegir colores
Una combinación que se ve bien en la pantalla del diseñador suele ser ilegible. Las pautas de accesibilidad web piden 4,5:1 en texto corrido y 3:1 en texto grande o en negrita de 18 puntos o más. El gris pálido queda elegante en una maqueta y falla ese umbral una y otra vez.
Juzgar el contraste solo por el brillo engaña. El amarillo sobre blanco casi no tiene porque ambos son claros, y el azul sobre negro casi tampoco porque ambos son oscuros. Estar lejos en la rueda de color no crea contraste; lo crea una diferencia de luminancia.
Transmitir información solo con el color deja fuera a quien no distingue colores. El rojo y el verde que marcan una subida y una bajada necesitan una flecha o un signo al lado, y la convención cambia: los mercados de Estados Unidos y Europa muestran las subidas en verde, mientras que Corea, Japón y China las muestran en rojo.