Guía

Matiz, saturación y brillo, explicados

Todo color en una pantalla se puede describir con tres números, y la forma más humana de elegir esos números es matiz, saturación y brillo: qué color, cuánto de él, cuán claro. El modelo es lo bastante simple como para explicarlo en una página y lo bastante útil como para que la mayoría de los selectores de color se construyan sobre él. Es también el modelo que hace legible un error de memoria del color, porque separa las tres cosas en las que una persona puede equivocarse.

En resumen

  • El matiz es la posición del color en la rueda, un ángulo de 0° a 360°: rojo en 0°, verde cerca de 120°, azul cerca de 240° y de vuelta al rojo.
  • La saturación es cuánto de ese matiz hay, de 0 por ciento (gris) a 100 por ciento (el color puro). El brillo es cuán claro es, de 0 por ciento (negro) a 100 por ciento.
  • Como el matiz es un círculo, la mayor distancia posible entre dos matices es 180°: lados opuestos de la rueda. Cualquier error mayor que eso es en realidad menor yendo por el otro lado.
  • HSB sirve para elegir y describir colores a ojo; RGB es cómo los producen las pantallas; Lab sirve para medir cuánto se diferencian dos colores. Responden a preguntas distintas.
  • Reconstruir un color con tres deslizadores separados deja ver cuál de los tres juicios falló. Elegir entre muestras no puede.

Tres números, tres preguntas

Toma un color —un verde azulado apagado, por ejemplo—. Si te piden que lo describas, no recurrirías a cuánta luz roja, verde y azul contiene, aunque eso es lo que hace la pantalla. Dirías que es un azul verdoso, no muy intenso, algo oscuro. Eso es HSB: matiz, saturación, brillo, en el orden en que una persona piensa de verdad. El modelo lo propuso Alvy Ray Smith a finales de la década de 1970 precisamente para que la gente pudiera elegir colores de una forma que coincidiera con cómo los ve. También se llama HSV, donde V es valor (value); los dos son el mismo modelo.

DimensiónLa pregunta que respondeRangoLos extremos
Matiz¿Qué color es?0°–360°Rojo en 0°, pasando por amarillo, verde, cian, azul y magenta, de vuelta al rojo
Saturación¿Cuánto de ese color tiene?0–100%0% es un gris sin matiz alguno; 100% es la versión más pura del matiz
Brillo¿Cuán claro es?0–100%0% es negro con independencia de las otras dos; 100% es lo más claro que puede ser el matiz

El matiz es un ángulo, y eso importa

El matiz se dispone en un círculo porque el espectro, que va del rojo al violeta en línea, se cierra a través de los púrpuras que no existen en un arcoíris: el magenta se sitúa entre el violeta y el rojo y cierra el bucle. Por eso el matiz se mide como un ángulo. El rojo es 0°, el amarillo cerca de 60°, el verde cerca de 120°, el cian cerca de 180°, el azul cerca de 240°, el magenta cerca de 300°, y 360° es otra vez rojo.

Un círculo tiene una consecuencia que una recta no tiene: hay una distancia máxima posible, y está a mitad de camino. Dos matices nunca pueden estar a más de 180° de distancia. Una estimación de 350° para un objetivo de 10° no está desviada 340°; está desviada 20°, por la parte superior de la rueda. Toda puntuación honesta del matiz tiene que medir por el camino corto, y el peor error posible de matiz es el complementario de un color: el matiz justo opuesto. Por eso Percore normaliza el error de matiz sobre 180°: es la distancia entre lo perfecto y lo más equivocado que es posible estar.

Saturación y brillo

La saturación es la cantidad de matiz que hay en el color. Con saturación cero, todos los matices se reducen al mismo gris, y por eso el matiz de un color muy pálido o muy polvoriento es de verdad difícil de nombrar: casi no hay matiz que ver. Con saturación plena, el color es todo lo vivo que el matiz permite. El brillo es simplemente cuán claro es el color; con brillo cero todo es negro, digan lo que digan el matiz y la saturación.

Las dos interactúan de una forma que confunde a la gente. Un rojo oscuro y saturado y un rojo claro y desaturado pueden parecer colores completamente distintos, aunque compartan matiz. En la práctica, las personas que recuerdan un color tienden a acertar más o menos el matiz y a exagerar la saturación —el color recordado es más vivo que el real—, y los errores de brillo van en ambas direcciones según la luz del entorno. Esos son los patrones que buscar en una puntuación por dimensión.

HSB junto a los otros modelos

HSB es una de varias formas de describir el mismo color, y cada una existe por una razón. Elegir la equivocada para una tarea es una fuente habitual de confusión, así que aquí va para qué sirve cada una.

ModeloQué esIdeal para
HSB / HSVEl matiz como ángulo, la saturación y el brillo como porcentajes. El brillo 100% es la versión más pura y más clara del matiz.Elegir y describir colores a ojo; selectores de color; diagnosticar un error de memoria del color
HSLEl mismo matiz; luminosidad en lugar de brillo, con una luminosidad del 100% siempre blanca y el 50% como matiz puro.CSS y diseño web, donde aclarar un color hacia el blanco es una operación habitual
RGBCuánta luz roja, verde y azul, cada una de 0 a 255. Lo que hace físicamente la pantalla.Código, formatos de archivo, todo lo que un dispositivo tiene que mostrar; difícil de razonar a ojo
CIELAB (Lab)Luminosidad más dos ejes opuestos (verde–rojo, azul–amarillo), construido para que distancias iguales parezcan igual de distintas.Medir la diferencia entre dos colores (Delta E); impresión y gestión del color

Una forma útil de tenerlo presente: RGB es para la máquina, HSB y HSL son para la persona, y Lab es para la medición. Las herramientas de percepción del color que puntúan con Delta E miden en Lab; las que te dan tres deslizadores te dejan responder en HSB. Ambas son legítimas y te dicen cosas distintas.

Por qué tres deslizadores te dicen más que una muestra

Si se te muestra un color, desaparece y eliges la más cercana de seis muestras, el resultado es un bit de información: acierto o fallo, con una distancia. Si en cambio reconstruyes el color con tres controles separados, el resultado son tres números —cuánto te desviaste en matiz, en saturación, en brillo—, y esos tres números son un diagnóstico. Quien tiene un error de matiz pequeño y uno de saturación grande todos los días ha aprendido algo sobre cómo ve, y puede corregirlo.

Este es el razonamiento detrás de la sesión de Color de Percore, que llena la pantalla con un color, lo oculta y te lo pide de vuelta con deslizadores de matiz, saturación y brillo. Cada error se normaliza —el matiz sobre 180°, los otros dos sobre su rango completo— y los tres se promedian en una precisión de 0 a 100; el desglose se muestra al lado. La fórmula completa está en Cómo puntúa Percore, y cómo mejorar tu percepción del color convierte el desglose en una práctica.

Reconstruye un color con los tres deslizadores.

Descárgala en el App Store

Preguntas frecuentes

¿HSB y HSV son lo mismo?

Sí. V significa valor (value), B brillo (brightness), y se refieren al mismo modelo. Cada programa usa nombres distintos; las herramientas de Apple y de Adobe dicen HSB, muchas otras dicen HSV.

¿Cuál es la diferencia entre HSB y HSL?

Comparten el matiz. En HSB, un brillo del 100 por ciento es la versión más pura y más clara del matiz; en HSL, una luminosidad del 100 por ciento es blanco y el matiz puro está en el 50 por ciento. HSL es habitual en CSS; HSB, en las herramientas de diseño.

¿Por qué el rojo está en 0° en la rueda de matices?

Por convención. La rueda tiene que empezar en algún sitio, y se eligió el rojo cuando se definió el modelo; el orden rojo, amarillo, verde, cian, azul, magenta sigue el espectro con el magenta cerrando el bucle.

¿Cuál es el mayor error de matiz posible?

180°, el matiz justo opuesto en la rueda: el complementario de un color. Cualquier error aparente mayor que eso es en realidad menor medido por el otro lado, y por eso el error de matiz debe tomarse siempre por el camino corto.

¿En cuál de los tres se equivoca más la gente?

En la práctica, en la saturación: la gente tiende a recordar un color como más vivo de lo que era. El matiz suele andar cerca, y el brillo depende mucho de la luz del entorno. Una puntuación por dimensión muestra tu propio patrón.