Convierte valores HSV a RGB

El primer número es el tono o matiz (H), un ángulo en la rueda de color: 0° es rojo, 120° verde y 240° azul[1]. El segundo es la saturación (S) y el tercero el valor (V). Photoshop llama HSB a este mismo modelo, y la ayuda de Adobe llama a sus componentes tono, saturación y brillo[2].

La saturación y el valor se entienden mejor pensando en pintura. Alvy Ray Smith, que describió el modelo en 1978, los comparó con añadir blanco y negro a un tono puro: menos saturación es más blanco, y menos valor es más negro[3]. Por eso cualquier color con un valor del 0% es negro, digan lo que digan los otros dos números, y con una saturación del 0% queda un gris de ese valor.

Si tienes el color en otro formato, como OKLCH, Lab o código de Android, el convertidor de colores lo muestra a la vez en todos los formatos.

Primero calcula el croma, es decir, la separación entre los canales: C = V × S. Luego divide el tono entre 60°. La parte entera del resultado elige uno de los seis sectores de la rueda, y con el resto se obtiene el canal intermedio: X = C × (1 − |(H ÷ 60°) mod 2 − 1|). Al final sumas m = V − C a todos los canales[4].

Tomemos hsv(217.2, 76%, 96.5%). El croma es 0,965 × 0,76 = 0,733. El tono entre 60° da 3,62, así que el color está en el sector entre 180° y 240°, donde el rojo vale cero, el verde es el canal intermedio y el azul está lleno. El canal intermedio es 0,733 × (1 − |1,62 − 1|) = 0,279, y m = 0,965 − 0,733 = 0,232.

Tras sumar m, los canales valen 0,232, 0,511 y 0,965. Multiplicados por 255 y redondeados dan rgb(59, 130, 246), y el convertidor de RGB a HEX lo pasa a código hexadecimal.

CSS no tiene la función hsv(), pero sí hwb(), en la que después del tono indicas cuánto blanco y cuánto negro se mezclan con él[6]. El modelo HWB lo describió Alvy Ray Smith en 1996, y sale de HSV con dos fórmulas cortas: W = (1 − S) × V y B = 1 − V[7].

Para hsv(217.2, 76%, 96.5%) el blanco es (1 − 0,76) × 0,965 = 23,1% y el negro 1 − 0,965 = 3,5%, así que en la hoja de estilos escribes hwb(217.2 23.1% 3.5%). El navegador muestra el mismo color que rgb(59, 130, 246). Si prefieres una notación que entienda cualquier herramienta, pega el resultado de este convertidor.

OpenCV guarda el tono de una imagen de 8 bits como la mitad del ángulo, para que quepa en un byte[8]. Los valores de tono vecinos están separados 2°, y un color que cae entre ellos no tiene equivalente exacto. El trío 109, 194, 246 que da OpenCV para rgb(59, 130, 246) vuelve con la opción OpenCV como rgb(59, 127, 246), con el verde tres pasos más bajo. OpenCV devuelve exactamente lo mismo: comparamos la opción OpenCV con OpenCV.js 4.10 en todos los tríos con tono de 0 a 180.

Si el resultado vuelve a una imagen cargada con cv2.imread, usa cv2.COLOR_HSV2BGR, porque esa imagen guarda los canales en orden azul, verde, rojo[9].