jueves, 27 de mayo de 2010

Modos o modelos de color HSB (o HSV) y códigos hexadecimales: qué son y usos específicos

En la presente entrega de esta serie nos ocuparemos de la finalidad que tienen el modelo HSB y los códigos hexadecimales. Los hemos agrupado aquí pues son, más que modos de imagen, modelos o nomenclaturas para identificar colores. De esta forma no podremos dar a una imagen estos modos, sencillamente servirán para dar un nombre exacto a cada uno de los millones de colores existentes.

Antes de nada el menú de artículos para facilitar la navegación:

  1. Modos de color RGB y CMYK.
  2. Modelo de color HSB (o HSV) y códigos hexadecimales.
  3. Modos de color LAB e indexado.
  4. Modos de color escala de grises, mapa de bits, duotono y multicanal.

Modelo de color HSB (Hue, Saturation, Brightness – Tonalidad, Saturación, Brillo) - HSV (Hue, Saturation, Value).


El modelo HSB (o HSV, como se prefiera) deriva del espacio RGB y representa los colores combinando tres valores: el tono en sí (H), la saturación o cantidad de color (S) y el brillo del mismo (B). Estos valores suelen representarse en un diagrama circular (principal uso de este modelo).

Estas tres magnitudes pueden tener los siguientes valores:
  • H (color en concreto). Valores de 0-360º. La gama cromática se representa en una rueda circular y este valor expresa su posición.
  • S (Saturación). Valores de 0-100%. De menos a más cantidad de color.
  • B (Brillo). Valores de 0-100%. De totalmente oscuro a la máxima luminosidad.
De esta forma, siguiendo con el ejemplo de antes, el color R164 G25 B25 se expresaría como H0 S85 B64 según el modelo HSB.

Uso del modelo de color HSB (HSV).
Este modelo fue creado para aportar tanto información sobre el color en sí como sobre la cantidad y brillo del mismo, representando todo a la vez en un mismo diagrama cromático. HSB presenta los colores y sus diferentes grados de brillo y saturación en un único diagrama -cónico o circular-.

Es bastante usado en las aplicaciones gráficas para que el usuario escoja colores y al mismo tiempo grados de saturación y brillo del mismo.

Rueda diagrama HSV

Para los que no vamos a programar software gráfico –que sin duda seremos la mayoría- el modelo HSB no va a tener demasiada utilidad, ésta es la verdad. Sin embargo podemos encontrarlo con cierta frecuencia y es necesario conocerlo.


Código Hexadecimal de un color.


Otra forma de expresar un color en particular, o más propiamente de identificarlo por un nombre único para él, es el código hexadecimal. De esta forma, además de usar los valores RGB, CMYK, HSB o LAB, también puede usarse su nombre hexadecimal para el mismo fin.

El código hexadecimal se expresa por una serie alfanumérica (compuesta por números y letras) de 6 caracteres precedidos por el signo “#”.

Diferentes nomenclaturas de un color

Siguiendo con el ejemplo que hemos estado usando, el color R164 G25 B25 tendría el código hexadecimal #a41919.

Estos 6 caracteres son en realidad 3 grupos de 2 (3 parejas). Cada pareja corresponde a un color básico RGB (rojo, verde y azul, respectivamente):

#RRGGBB (= #RRVVAA)

Un código hexadecimal puede tener números del 0-9 y letras de A-F. El negro sería #000000 y el blanco #FFFFFF.

Usos del código hexadecimal.
Se usa sobre todo (aunque no únicamente) en las páginas web. Debido a ello muchas veces se le conoce directamente por código HTML del color.

Nuestro navegador (IExplorer, Firefox, Chrome, etc…) lee estos códigos presentes en las páginas de internet y representa los colores en pantalla. Tanto el citado lenguaje HTML como los estilos CSS y el lenguaje de programación JavaScript pueden usar códigos hexadecimales para indicar colores al navegador.

Colores seguros para usar en páginas web.
Es importante saber que cada navegador puede representar el código un poco a su manera. Afortunadamente existen los denominados colores seguros, que se representarán igual en todos los navegadores.

Elgiendo colores seguros

Son 216, y el diseñador web tendrá la certeza de que se mostrarán exactamente como él los ve al construir la página.

Más información: Artículo de la Wikipedia sobre colores HTML (es muy completo y lo recomiendo para quien quiera profundizar en este tema).

Artículos relacionados: