HSL y HSV

HSL (para tono, saturación, luminosidad ) y HSV (para tono, saturación, valor ; también conocido como HSB , para tono, saturación, brillo ) son representaciones alternativas del modelo de color RGB , diseñado en la década de 1970 por investigadores de gráficos por computadora para más se alinea estrechamente con la forma en que la visión humana percibe los atributos de creación de color. En estos modelos, los colores de cada tono están dispuestos en un corte radial, alrededor de un eje central de colores neutros que va desde el negro en la parte inferior hasta el blanco en la parte superior.

La representación HSL modela la forma en que diferentes pinturas se mezclan para crear color en el mundo real, con la dimensión de luminosidad que se asemeja a las cantidades variables de pintura blanca o negra en la mezcla (por ejemplo, para crear "rojo claro", se puede mezclar un pigmento rojo con pintura blanca; esta pintura blanca corresponde a un valor alto de "ligereza" en la representación HSL). Los colores completamente saturados se colocan alrededor de un círculo con un valor de luminosidad de ½, con un valor de luminosidad de 0 o 1 correspondiente a completamente negro o blanco, respectivamente.

Mientras tanto, la representación de HSV modela cómo aparecen los colores bajo la luz. La diferencia entre HSL y HSV es que un color con máxima luminosidad en HSL es blanco puro, pero un color con valor / brillo máximo en HSV es análogo a hacer brillar una luz blanca sobre un objeto de color (por ejemplo, hacer brillar una luz blanca brillante sobre un rojo hace que el objeto siga apareciendo rojo, simplemente más brillante e intenso, mientras que al iluminar un objeto rojo con una luz tenue hace que el objeto parezca más oscuro y menos brillante).

El problema tanto con HSV como con HSL es que estos enfoques no separan eficazmente el color en sus tres componentes de valor de acuerdo con la percepción humana del color. [ cita requerida ] Esto se puede ver cuando se alteran los ajustes de saturación - es bastante fácil notar la diferencia en la luminosidad perceptual a pesar de que el ajuste "V" o "L" está fijo.

HSL y HSV son geometrías cilíndricas ( fig.2 ), con matiz, su dimensión angular, comenzando en el primario rojo en 0 °, pasando por el primario verde en 120 ° y el primario azul en 240 °, y luego regresando a rojo a 360 °. En cada geometría, el eje vertical central comprende los colores neutros , acromáticos o grises que van, de arriba a abajo, del blanco en la luminosidad 1 (valor 1) al negro en la luminosidad 0 (valor 0).

En ambas geometrías, los colores primarios y secundarios aditivos —rojo, amarillo , verde, cian , azul y magenta— y las mezclas lineales entre pares adyacentes, a veces llamados colores puros , se disponen alrededor del borde exterior del cilindro con saturación 1. Estos colores saturados tienen una luminosidad de 0,5 en HSL, mientras que en HSV tienen un valor 1. Mezclar estos colores puros con el negro, lo que produce los llamados tonos , deja la saturación sin cambios. En HSL, la saturación tampoco cambia al teñir con blanco, y solo las mezclas con blanco y negro, llamadas tonos—Tienen una saturación menor que 1. En HSV, el tinte solo reduce la saturación.

Fig. 1. HSL (a – d) y HSV (e – h). Arriba (a, e): modelos 3D recortados de cada uno. Abajo: gráficos bidimensionales que muestran dos de los tres parámetros de un modelo a la vez, manteniendo el otro constante: capas cilíndricas (b, f) de saturación constante, en este caso la superficie exterior de cada cilindro; secciones transversales horizontales (c, g) de luminosidad HSL constante o valor HSV, en este caso los cortes a la mitad de cada cilindro; y secciones transversales verticales rectangulares (d, h) de tonalidad constante, en este caso de tonalidades 0 ° rojo y su complemento 180 ° cian.
Figura 2b. Cilindro HSV.
Fig. 3a – b. Si trazamos el tono y (a) la luminosidad HSL o (b) el valor HSV contra el croma ( rango de valores RGB) en lugar de la saturación (croma sobre el croma máximo para ese corte), el sólido resultante es un bicono o un cono , respectivamente, no un cilindro. Dichos diagramas a menudo afirman representar HSL o HSV directamente, con la dimensión cromática etiquetada confusamente como "saturación".
Colores de valor 1 en el espacio de color HSV, con blanco (saturación 0) en el centro y colores completamente saturados en el borde. Este círculo es la parte superior del círculo / cilindro HSV que se muestra arriba. Todos los colores que se pueden visualizar en una pantalla son sombras de estos colores.
Fig. 4. Los pintores mezclaron colores durante mucho tiempo combinando pigmentos relativamente brillantes con blanco y negro. Las mezclas con blanco se denominan tintes , las mezclas con negro se denominan matices y las mezclas con ambos se denominan tonos . Consulte Tintes y matices . [3]
Se pueden organizar varios términos de mezcla de pintura en una disposición triangular: el borde izquierdo del triángulo muestra blanco en la parte superior y negro en la parte inferior con gris entre los dos, cada uno en su respectivo óvalo. Un color puro (en este caso, un azul verdoso brillante) se encuentra en la esquina derecha del triángulo. En el borde entre el color puro y el negro hay un tono (un azul verdoso más oscuro), entre el color puro y el blanco hay un tinte (un azul verdoso más claro y difuminado) y un tono se encuentra en el medio del triángulo ( un azul verdoso apagado).
Fig. 5. Este modelo de color de 1916 del químico alemán Wilhelm Ostwald ejemplifica el enfoque de "mezclas con blanco y negro", organizando 24 colores "puros" en un círculo de tonos y los colores de cada tono en un triángulo. El modelo toma así la forma de un bicono. [4] [5]
El cubo RGB tiene negro en su origen y las tres dimensiones R, G y B apuntan en direcciones ortogonales lejos del negro. La esquina en cada una de esas direcciones es el color primario respectivo (rojo, verde o azul), mientras que las esquinas más alejadas del negro son combinaciones de dos primarios (rojo más verde hace amarillo, rojo más azul hace magenta, verde más azul hace cian). En la esquina del cubo más alejada del origen se encuentra el blanco. Cualquier punto del cubo describe un color particular dentro de la gama de RGB.
Figura 6a. La gama RGB se puede organizar en un cubo.
La misma imagen, con una parte eliminada para mayor claridad.
Figura 6b. La misma imagen, con una parte eliminada para mayor claridad.
En el estilo clásico de solicitud de patente, se trata de un diagrama en blanco y negro con el nombre de la patente, el nombre del inventor y el número de patente en la parte superior, sombreados con rayas. Este diagrama muestra una vista tridimensional de la geometría HSL bicónica de Tektronix, compuesta por cortes circulares horizontales a lo largo de un eje vertical expandido para facilitar la visualización. Dentro de cada rebanada circular, la saturación va de cero en el centro a uno en los márgenes, mientras que el tono es una dimensión angular, que comienza en el azul con un tono cero, pasa por el rojo con un tono de 120 grados y el verde con un tono de 240 grados y vuelve al azul.
Fig. 7. Los terminales gráficos de Tektronix utilizaron la implementación comercial más temprana de HSL, en 1979. Este diagrama, de una patente presentada en 1983, muestra la geometría bicónica subyacente al modelo. [6]
Un diagrama similar a un diagrama de flujo muestra la derivación de HSL, HSV y un modelo de luma / croma / tono. En la parte superior se encuentra un "cubo de color" RGB, que como primer paso se inclina en su esquina para que el negro quede en la parte inferior y el blanco en la parte superior. En el siguiente paso, los tres modelos divergen y la altura de rojo, amarillo, verde, cian, azul y magenta se establece según la fórmula de luminosidad, valor o luma: en HSV, los seis se colocan en el plano con blanco, formando una pirámide hexagonal invertida; en HSL, los seis se colocan en un plano a medio camino entre el blanco y el negro, formando una bipirámide; en el modelo de luma / croma / tono, la altura se determina mediante la fórmula aproximada luma es igual a 0,3 veces rojo más 0,6 veces verde más 0,1 veces azul. En el siguiente paso, cada rebanada horizontal de HSL y HSV se expande para llenar un prisma hexagonal de ancho uniforme,mientras que el modelo luma / chroma / hue simplemente está incrustado en ese prisma sin modificaciones. Como paso final, los prismas hexagonales de los tres modelos se deforman en cilindros, lo que refleja la naturaleza de la definición de tono y saturación o croma. Para obtener detalles completos y formalismo matemático, lea el resto de esta sección.
Fig. 8. La derivación geométrica de las representaciones cilíndricas HSL y HSV de un "cubo de color" RGB.
Archivo: Conversión RGB 2 HSV con grid.oggReproducir medios
Derivación geométrica visualizada de la representación HSV cilíndrica de un "cubo de color" RGB.
Reproducir medios
Derivación geométrica visualizada de la representación HSL cilíndrica de un "cubo de color" RGB.
Fig. 9. Tanto el tono como el croma se definen basándose en la proyección del cubo RGB sobre un hexágono en el "plano de cromaticidad". El croma es el tamaño relativo del hexágono que pasa a través de un punto, y el tono es qué tan lejos alrededor del borde del hexágono se encuentra el punto.
Fig. 10. Las definiciones de tono y croma en HSL y HSV tienen el efecto de deformar los hexágonos en círculos.
Fig. 11. Construir coordenadas de cromaticidad rectangulares α y β , y luego transformarlas en tono H 2 y croma C 2 produce valores ligeramente diferentes que calcular el tono hexagonal H y el croma C : compare los números en este diagrama con los anteriores en esta sección.
Fig. 12a – d. Cuatro posibles dimensiones de "ligereza" diferentes, trazadas contra croma, para un par de matices complementarios. Cada gráfico es una sección transversal vertical de su color sólido tridimensional.
Fig. 14a – d. Tanto en HSL como en HSV, la saturación es simplemente el croma escalado para llenar el intervalo [0, 1] para cada combinación de tono y luminosidad o valor.
Fig. 15a – b. En HSI, la saturación , que se muestra en el corte de la derecha, es aproximadamente el croma en relación con la luminosidad. También es común un modelo con dimensiones I , H 2 , C 2 , que se muestra en el corte de la izquierda. Observe que el tono en estos cortes es el mismo que el tono anterior, pero H difiere ligeramente de H 2 .
Fig 16a-g. En la década de 1990, las herramientas de selección de color HSL y HSV eran omnipresentes. Las capturas de pantalla anteriores están tomadas de:
· (a) SGI IRIX 5, c. 1995;
· (B) Adobe Photoshop , c. 1990;
· (C) IBM OS / 2 Warp 3, c. 1994;
· (D) Apple Macintosh System 7 , c. 1996;
· (E) Pintor de diseño fractal , c. 1993;
· (F) Microsoft Windows 3.1 , c. 1992;
· (G) SIGUIENTE PASO , c. 1995.
Sin duda, estos se basan en ejemplos anteriores, que se remontan a PARC y NYIT a mediados de la década de 1970. [L]
Figura 20a. La gama sRGB asignada en el espacio CIELAB. Observe que las líneas que apuntan a los primarios rojo, verde y azul no están espaciadas uniformemente por ángulo de tono y tienen una longitud desigual. Las primarias también tienen diferentes valores L *.
Figura 20b. La gama Adobe RGB mapeada en el espacio CIELAB. También observe que estos dos espacios RGB tienen diferentes gamas y, por lo tanto, tendrán diferentes representaciones HSL y HSV.
Figura 13a. Fotografía en color (espacio de color sRGB).
Figura 13b. CIELAB L * (transformado nuevamente a sRGB para una visualización consistente).
Figura 13c. Rec. 601 luma Y ' .
Figura 13d. Media del componente: "intensidad " I.
Figura 13e. Valor de HSV V.
Figura 13f. HSL ligereza L .
Figura 21a. Fotografía en color.
Figura 21b. El tono HSL / HSV de cada color cambió en -30 ° .
Figura 21c. El tono cambió pero la luminosidad CIELAB ( L *) se mantuvo como en el original.
Fig. 24. Una representación gráfica de las coordenadas RGB dadas los valores de HSV. Esta ecuación muestra el origen de los valores marcados en el eje vertical