Modelo de color HSL

El modelo HSL(del inglés Hue, Saturation, Lightness – Matiz, Saturación, Luminosidad), también llamado HSI (del inglés Hue, Saturation, Intensity – Matiz, Saturación, Intensidad), define un modelo de color en términos de sus componentes constituyentes. El modelo HSL se representa gráficamente como un cono doble o un doble hexágono. Los dos vértices en el modelo HSL se corresponden con el blanco y el negro, el ángulo se corresponde con el matiz, la distancia al eje con la saturación y la distancia al eje blanco-negro se corresponde a la luminancia. Como los modelos HSI y el HSV, es una deformación no lineal del espacio de color RGB. Nótese que HSL es lo mismo que HSI pero no que HSV o HSB.

Bicono del modelo HSL.

Saturación

Para calcular la saturación, simplemente divida el croma por el mayor croma para esa luminosidad.

${\displaystyle {\begin{aligned}S_{HSL}&={\begin{cases}0,&{\mbox{if }}C=0\\{\frac {C}{1-|2L-1|}},&{\mbox{otherwise}}\end{cases}}\end{aligned}}}$ 

Luminosidad

En este modelo, la luminosidad o claridad se define como el promedio entre el mayor y el menor componente de color RGB. Esta definición pone los colores primarios y secundarios en un plano que pasa a mitad de camino entre el blanco y el negro. El sólido de color resultante es un cono doble similar al de Ostwald.^[1]​

${\displaystyle L=\textstyle {\frac {1}{2}}(M+m)\,\!}$ 

${\displaystyle {\begin{aligned}S_{HSL}&={\begin{cases}0,&{\mbox{if }}C=0\\{\frac {C}{1-|2L-1|}},&{\mbox{otherwise}}\end{cases}}\end{aligned}}}$ 

Conversión desde RGB a HSL

 

Uso alternativo de los modelos HSL y RGB para edición de imágenes.

Los valores (R, G, B) deben ser expresados como números del 0 al 1. MAX equivale al máximo de los valores (R, G, B), y MIN equivale al mínimo de esos valores. La fórmula puede ser escrita como

${\displaystyle H={\begin{cases}0,&{\mbox{if }}MAX=MIN\\(60\times {\frac {G-B}{MAX-MIN}}+360)\;{\bmod {\;}}360,&{\mbox{if }}MAX=R\\60\times {\frac {B-R}{MAX-MIN}}+120,&{\mbox{if }}MAX=G\\60\times {\frac {R-G}{MAX-MIN}}+240,&{\mbox{if }}MAX=B\end{cases}}}$ 

${\displaystyle L={\begin{matrix}{\frac {1}{2}}\end{matrix}}(MAX+MIN)}$ 

${\displaystyle S={\begin{cases}0,&{\mbox{if }}MAX=MIN\\{\frac {MAX-MIN}{MAX+MIN}}={\frac {MAX-MIN}{2L}},&{\mbox{if }}L\leq {\frac {1}{2}}\\{\frac {MAX-MIN}{2-(MAX+MIN)}}={\frac {MAX-MIN}{2-2L}},&{\mbox{if }}L>{\frac {1}{2}}\end{cases}}}$ 

Comparación entre HSL y HSV

HSL es similar al modelo HSV pero refleja mejor la noción intuitiva de la saturación y la luminancia como dos parámetros independientes, y por tanto es un modelo más adecuado para los artistas. La especificación de las hojas de estilo en cascada (CSS) en su versión 3 prefieren HSL porque es simétrico al eje luz-oscuridad, lo que no sucede con el modelo HSV ("Advantages of HSL are that it is symmetrical to lightness and darkness (which is not the case with HSV for example)..."). Significa que:

• En HSL, la componente de la saturación va desde el completamente saturado hasta el gris equivalente, mientras que en HSV, con V al máximo, va desde el color saturado hasta el blanco, lo que no es muy intuitivo.

Graduaciones de saturación en el modelo HSL

matiz 100% puro

75% de saturación

saturación media

25% de saturación

0 de saturación

Graduaciones de saturación en el modelo HSV

matiz 100% puro

75% de saturación

saturación media

25% de saturación

0 de saturación

• La luminancia en HSL siempre va desde el negro hasta el blanco pasando por la tonalidad deseada, mientras que en HSV la componente V se queda a mitad camino, entre el negro y la tonalidad escogida.

En las aplicaciones de tratamiento de color, los modelos HSV y HSL se representan como una área lineal o circular para el matiz y la saturación; y un área bidimensional, como un cuadrado o triángulo, para el valor/luminancia. En esta representación las diferencias entre HSV y HSL son irrelevantes. Sin embargo, algunas aplicaciones permiten escoger el color por medio de deslizadores lineales o entradas numéricas. En estos casos solo se usa uno de los dos modelos, comúnmente HSV. Algunos ejemplos:

• Aplicaciones que usan HSV:
  • Apple Mac OS X system color picker (disco de color para H/S y un deslizador para V).
  • The GIMP^[2]​
  • Xara X
  • Paint.NET (disco de color para H/S y deslizador para V).

• Aplicaciones que usan HSL:
  • La especificación CSS3
  • Facebook api web Developer
  • Inkscape (desde la versión 0.42)
  • Macromedia Studio
  • Microsoft Windows system color picker (y MSPaint)
  • Paint Shop Pro

• Aplicaciones que utilizan HSV y HSL:
  • Las aplicaciones gráficas de Adobe (Illustrator, Photoshop, y otros)
  • Pixel image editor (desde la Beta5)

Representación gráfica

Para representar el modelo HSL, como sucede en cualquier modelo de coloración, se requiere una representación espacial o tridimensional como en los siguientes ejemplos:

•  

  Doble cono o bicono

•  

  Representación cilíndrica

•  

  Representación esférica de Munsell

•  

  Doble pirámide hexagonal

La siguiente tabla está basada en la representación de una sección del doble cono, escogiéndose una tonalidad de 30° para este ejemplo, lo que corresponde a naranjas y marrones. Se indica la luminosidad en la columna vertical (de 0 a 100%) y la saturación en la fila horizontal. Las adjetivizaciones usando términos como claro, oscuro, débil, etc. están de acuerdo con la notación nominal descriptiva de colores,^[3]​ y el nombre sugerido para cada color es aproximado y va entre paréntesis:

0%	Negro (negro absoluto)
10%	Negruzco (carbón)	(café negro)
20%	Muy oscuro (azabache)	(cordobán)	(café)
30%	Oscuro (asfalto)	(sepia)	(chocolate)	(marrón)
40%	Semioscuro (plomo)	(marrón grisáceo)	(pardo)	(herrumbre)	(caramelo)
50%	Medio (gris) / ${\displaystyle Neutro}$  ${\displaystyle 0\%}$	Semineutro  20% (bistre)	Débil 40% (canela o león)	Moderado  60% (siena)	Intenso 80% (ocre naranja)	Vivo 100%   (naranja)
60%	Semiclaro (gris estándar)	(ocre)	(barbecho)	(bronce)	(zanahoria)
70%	Claro (plateado)	(bronceado)	(gamuza)	(melón)
80%	Muy claro (ceniza)	(beis)	(durazno)
90%	Blanquecino (platino)	(blanco navajo)
100%	Blanco (blanco puro)

Referencias

1. Joblove and Greenberg, 1978.
2. http://www.gimp.org/ GIMP - The GNU Image Manipulation Program
3. Gallego, Rosa; Sanz, Juan Carlos (2001). Diccionario Akal del color. Akal. especificación, pag 365. ISBN 978-84-460-1083-8.

Véase también

• Teoría del color
• SCART
• S-Video
• Espacio de color:
  • Modelo de color RGB usado en monitores en color.
  • Modelo de color CMYK para impresión en color.
  • Modelo de color HSV
  • Modelo de color HSL
  • Modelo de color RYB el modelo tradicional usado por los artistas.
  • YUV para televisión PAL
  • YIQ para televisión NTSC

•   Datos: Q14032191

Enlaces externos

• Una herramienta que convierte los códigos de colores: hex, rgb, hsl (en español   )