La versión corta
- Tono, saturación y brillo, o HSB, describe un color con tres números: el tono es el ángulo del color en la rueda, la saturación es su intensidad y el brillo es cuánta luz tiene.
- El HSB también se llama HSV, donde la V significa valor; los dos nombres describen el mismo modelo.
- El HSL es un pariente cercano en el que una luminosidad del 50 por ciento da el color puro y el 100 por ciento siempre da blanco.
- Herramientas de diseño como Figma y Photoshop ofrecen selectores HSB, mientras que CSS admite hsl() pero no HSB.
- Ni el HSB ni el HSL reflejan lo claros que parecen los colores a la vista, así que los modelos perceptuales como OKLCH son mejores para crear escalas uniformes.
En esta página
Tono, saturación y brillo (HSB) es una forma de describir cualquier color con tres controles sencillos. El tono es qué color es, expresado como un ángulo de 0 a 360 grados alrededor de la rueda de color. La saturación es su intensidad, del gris al 0 por ciento al color pleno al 100 por ciento. El brillo es cuánta luz tiene, del negro al 0 por ciento a la versión más luminosa de ese color al 100 por ciento. Cuando ves los colores así, ajustar una paleta deja de ser adivinar.
Tono: qué color
El tono es la posición en la rueda de color. En las ruedas de pantalla, el rojo está en 0 grados, el verde en 120 y el azul en 240, con el amarillo, el cian y el magenta entre ellos. Como el tono es un ángulo, las armonías de color se vuelven simple aritmética: suma 180 grados para un complementario y 120 para una tríada.
linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)Saturación: qué fuerza
La saturación controla cuánto tono hay presente. Bájala y el color se apaga hacia el gris; súbela y el color se vuelve intenso. La mayoría de las paletas refinadas viven bastante por debajo de la saturación máxima. Los colores totalmente saturados gritan, lo que va bien para una pegatina de rebajas y cansa en toda una web. Las paletas de colores apagados son, sobre todo, una cuestión de menor saturación.
Brillo: cuánta luz
En HSB, el brillo es lo iluminado que está el color. Al 0 por ciento todos los colores son negros, sea cual sea el tono o la saturación. Al 100 por ciento obtienes la versión más luminosa que la pantalla puede mostrar para ese tono y esa saturación. Para crear un pastel suave en HSB, mantienes el brillo alto y bajas la saturación, lo que mezcla blanco. Esa es justo la idea detrás de tintes, tonos y sombras.
HSB frente a HSL: la diferencia que confunde a todo el mundo
El HSL parece casi idéntico: tono, saturación, luminosidad. El tono es el mismo. Lo que cambia es el tercer control. En HSL, una luminosidad del 50 por ciento es el color puro, el 0 por ciento es negro y el 100 por ciento siempre es blanco. En HSB, un brillo del 100 por ciento es el color puro cuando la saturación está al máximo, y solo llegas al blanco si además bajas la saturación. Los valores de saturación también difieren entre ambos, así que el mismo color tiene números distintos en cada uno.
Hex
#ff0000HSB
HSL
#7c3aedHSB
HSL
Hex
#0f766eHSB
HSL
Hex
#f97316HSB
HSL
#ffffffHSB
HSL
HSB (también llamado HSV)
- Brillo 100% con saturación 100% es el color puro
- El blanco necesita brillo 100% y saturación 0%
- Lo usan muchos selectores de herramientas de diseño, como Photoshop y Figma
- No está disponible directamente en CSS
HSL
- Luminosidad 50% es el color puro
- Luminosidad 100% siempre es blanco
- Se escribe de forma nativa en CSS como
hsl() - Fácil para crear versiones más claras y más oscuras
Usar HSL en CSS
CSS entiende hsl() directamente, lo que lo hace práctico para crear temas. Guarda el tono en una variable y podrás cambiar el color de toda una interfaz con un solo número. También existe hwb() (tono, blancura, negrura), que se parece más al HSB en espíritu. Los detalles están en la página de hsl() de MDN, y los colores HSL va más allá.
:root {
--hue: 262;
--brand: hsl(var(--hue) 83% 58%); /* #7c3aed */
--brand-soft: hsl(var(--hue) 83% 92%);
--brand-deep: hsl(var(--hue) 70% 28%);
--brand-muted: hsl(var(--hue) 25% 55%);
}
/* Change --hue to 175 and the whole set turns teal */Por qué la misma luminosidad no se ve igual
El HSB y el HSL son geometría, no percepción. El amarillo puro y el azul puro tienen ambos una luminosidad HSL del 50 por ciento, pero el amarillo parece mucho más claro: según la fórmula de las WCAG, su luminancia relativa ronda 0,93 frente al 0,07 del azul. Pon texto blanco sobre cada uno y la diferencia salta a la vista. Por eso una paleta creada con pasos iguales de luminosidad HSL puede verse irregular, y por eso el contraste del texto siempre hay que comprobarlo, nunca suponerlo.
Los modelos perceptuales lo resuelven. OKLCH mantiene la idea amable de luminosidad, croma y tono, pero su luminosidad sigue lo que ve el ojo, así que los pasos se ven uniformes. Para ajustes rápidos, el HSB y el HSL son perfectos; para una escala de marca o un degradado sin centros embarrados, recurre a OKLCH.
Formas rápidas de ajustar un color con HSB
- Demasiado chillón: baja la saturación entre 15 y 25 puntos antes de tocar nada más.
- Demasiado apagado: sube un poco la saturación o mueve el tono unos grados hacia lo cálido.
- Necesitas un estado hover: baja el brillo unos 10 puntos.
- Necesitas un tinte de fondo: mantén el tono, baja mucho la saturación y lleva el brillo cerca de 100.
- Dos colores chocan: acerca un tono al otro o apaga uno de los dos.
Si prefieres partir de un estilo terminado en lugar de tres controles deslizantes, el Mercado de Gradiently te deja buscar Marks por palabras de color como «verde azulado profundo» o «melocotón cálido».
Preguntas frecuentes
¿Qué son el tono, la saturación y el brillo?
El tono es el ángulo de un color en la rueda de color, la saturación es su intensidad y el brillo es cuánta luz tiene. Juntos describen cualquier color de pantalla.
¿HSB es lo mismo que HSV?
Sí. HSV significa tono, saturación y valor (hue, saturation, value), y valor significa lo mismo que brillo.
¿Qué diferencia hay entre HSB y HSL?
En HSB, un brillo del 100 por ciento con saturación máxima es el color puro. En HSL, una luminosidad del 50 por ciento es el color puro y el 100 por ciento es blanco.
¿Puedo usar HSB en CSS?
No directamente. CSS admite hsl(), hwb() y oklch(), así que convierte los valores HSB a uno de ellos.
¿Qué diferencia hay entre tono y saturación?
El tono es qué color es, como rojo o azul. La saturación es la fuerza de ese color, del gris al intenso.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil