Artículo de Palette Lab
Qué es HSB: guía rápida de tono, saturación y brillo
Entiende el modelo de color HSB: qué son el tono, la saturación y el brillo, la diferencia entre HSB, HSV, HSL, RGB y HEX, y cuándo usar cada uno.
HSB es una forma de describir el color con tono (hue), saturación (saturation) y brillo (brightness). Resulta práctico porque separa tres preguntas que tu ojo ya se hace solo: a qué familia pertenece ese color, cuánta intensidad tiene y qué tan claro se ve.
Por eso Palette Lab usa HSB en sus juegos de color. Nadie recuerda un color en código HEX. Mover los controles de tono, saturación y brillo se parece mucho más a como diseñadores e ilustradores ajustan el color en las herramientas reales.
Si buscaste “qué es HSB”, “modelo de color HSB”, “HSB o HSV” o “diferencia entre HSB y HSL”, la respuesta corta es: HSB es un modelo de color que te deja elegir y ajustar colores por sus cualidades visuales, en lugar de manipular directamente los canales de rojo, verde y azul.
Qué significa el modelo de color HSB
El modelo HSB describe un color con tres valores:
- H — Tono (Hue): normalmente un ángulo de 0 a 360 grados.
- S — Saturación (Saturation): normalmente un porcentaje de 0% a 100%.
- B — Brillo (Brightness): normalmente un porcentaje de 0% a 100%.
Un azul vivo y claro, por ejemplo, tiene el tono en la zona del azul, saturación alta y brillo alto. Un azul grisáceo puede mantener el mismo tono pero con mucha menos saturación. Un azul marino conserva un tono parecido y baja el brillo.
Esa es la gran ventaja de HSB: no tienes que pensar primero en canales de rojo, verde y azul. Puedes acercarte al color objetivo en el mismo orden en que tu ojo suele percibirlo.
El tono: la familia del color
El tono es la posición del color en la rueda cromática. Rojo, amarillo, verde, cian, azul y magenta son decisiones de tono.
Cuando una respuesta en el juego de colores se siente completamente equivocada, el tono suele ser el primer sospechoso. El color puede tener brillo y saturación perfectos, pero si el tono se fue al azul cuando debía ir al cian, toda la respuesta se percibe mal.
En la rueda cromática el tono se mide en grados: 0 y 360 vuelven al rojo, con amarillo, verde, cian, azul y magenta repartidos alrededor del círculo. Cuando arrastras el control de tono en un selector de color, estás girando esa rueda.
En la práctica, empieza preguntándote: ¿este color tira a rojo, naranja, amarillo, verde, cian, azul o morado? Si el tono está mal, ningún ajuste de saturación o brillo va a salvar el color.
La saturación: cuánta vida tiene el color
La saturación describe si un color es vibrante o apagado. Un naranja muy saturado grita; un naranja poco saturado se convierte en beige, marrón o casi gris.
En un extractor de paleta, la saturación explica por qué dos colores de tono parecido se comportan de forma tan distinta en una interfaz. Uno funciona como color de botón principal y el otro rinde mejor como fondo discreto.
A medida que baja la saturación, el color se aleja de esa sensación pura y vibrante y se vuelve más suave, grisáceo o neutro. Muchas paletas de marca, sombras de ilustración y fondos de interfaz no se construyen solo bajando el brillo: también reducen la saturación para que el color no resulte tan duro.
Si quieres un color más suave, no subas únicamente el brillo. Suele funcionar mejor mantener el tono más o menos estable, bajar la saturación y solo entonces ajustar el brillo.
El brillo: qué tan claro es el color
El brillo describe cuánta luz aparece en el color. En la práctica, aquí está la mayoría de los errores: la memoria guarda la familia del color con mucha más firmeza que su claridad exacta.
Si quieres mejores puntuaciones en los juegos de Palette Lab, ve despacio al final de cada ronda y ajusta el brillo por separado del tono.
En HSB, un brillo cercano al 0% empuja el color hacia el negro. Un brillo alto crea una versión más clara del tono y la saturación actuales. Es el parámetro que responde preguntas como: ¿este azul es claro, medio u oscuro? ¿Este rojo es un rojo vivo o un burdeos más cerrado?
¿HSB y HSV son lo mismo?
En la mayoría de los contextos de diseño y programación, HSB y HSV son el mismo modelo de color. HSV viene de Hue, Saturation, Value; HSB viene de Hue, Saturation, Brightness. “Value” y “brillo” suelen ser dos nombres para el mismo tercer canal.
Verás con frecuencia estos términos:
- HSB: tono, saturación, brillo
- HSV: tono, saturación, valor
- HSBA / HSVA: los mismos modelos con canal alfa de transparencia
El concepto es el mismo, pero los programas varían en nomenclatura, rangos de valores y redondeo. Una herramienta puede mostrar el tono de 0 a 360, mientras que una API normaliza tono, saturación y brillo a 0-1. Comprueba el formato esperado antes de copiar números de un sitio a otro.
¿Cuál es la diferencia entre HSB y HSL?
HSB y HSL se confunden con facilidad porque los dos empiezan con tono y saturación, y los dos resultan mucho más legibles que RGB. La diferencia está en el tercer canal:
- HSB usa brillo, ligado al valor máximo de canal del modelo.
- HSL usa luminosidad (lightness), una posición más simétrica entre el negro y el blanco.
En la práctica eso significa que, en HSL, una luminosidad del 100% siempre da blanco, y el 50% suele ser el color más puro. En HSB, un brillo del 100% con saturación máxima da el color más vívido posible, no blanco.
Cómo elegir:
- Usa HSB o HSV cuando quieras un selector de color cómodo para encontrar y ajustar un color rápido.
- Usa HSL cuando escribas valores
hsl()en CSS o crees variaciones simples de claridad en una hoja de estilos. - Usa OKLCH cuando necesites razonar de forma más perceptual sobre luminosidad, croma y tono.
Un error habitual es dar por hecho que el brillo de HSB y la luminosidad de HSL son intercambiables. No lo son. Dos colores pueden parecerse teniendo terceros canales muy distintos, e igualar solo ese valor no garantiza la misma claridad percibida.
HSB, RGB y HEX: cuándo usar cada uno
HSB, RGB y HEX son maneras distintas de describir el mismo color, no opciones que compitan entre sí.
RGB describe el color con canales de rojo, verde y azul. Sirve para pantallas, Canvas, procesamiento de imagen y cálculos de color en JavaScript. HEX es la versión hexadecimal compacta de RGB, como #4F8CFF, y domina el CSS, las especificaciones de diseño y los manuales de marca. HSB es mejor para elegir, ajustar y aprender color, porque da control directo sobre tono, saturación y brillo.
En un flujo de trabajo web típico: usa HSB o HSL para encontrar visualmente el color que quieres y luego copia el resultado como HEX, RGB, variables CSS o JSON para el proyecto.
Cómo ajustar un color con HSB
Un orden que funciona bien:
- Fija el tono primero: elige la familia del color, sea naranja, azul o verde.
- Después la saturación: decide si el color es vivo, apagado, grisáceo o casi puro.
- El brillo al final: decide si es claro, medio u oscuro.
Si la dirección del color se siente equivocada, ajusta el tono. Si se siente demasiado apagado o demasiado estridente, ajusta la saturación. Si se siente demasiado pesado o demasiado pálido, ajusta el brillo.
Este orden también ayuda en diseño de interfaces. Cuando necesitas colores de hover, fondos suaves o colores de énfasis derivados del color de marca, mantener el tono estable y ajustar saturación y brillo da mucho más control que ir probando códigos HEX al azar.
Practica HSB en Palette Lab
Usa el juego de adivinar colores de dibujos animados cuando quieras entrenar la memoria de color con personajes conocidos, o el juego de colores para un entrenamiento puro de percepción. Después abre el extractor de paleta de colores para convertir una imagen en HEX, RGB, HSB, OKLCH, variables CSS y JSON reutilizables.
Juntos, el juego y la herramienta hacen que HSB deje de ser abstracto: adivinas un color, lo comparas con el original, extraes paletas reales y sigues practicando.
Más concretamente:
- Usa los juegos para practicar la reconstrucción de un color con los controles de tono, saturación y brillo.
- Usa el extractor de paleta para inspeccionar los colores de imágenes reales y comparar sus valores HEX, RGB, HSB y OKLCH.
- Copia los colores extraídos como variables CSS o JSON para sitios web, prototipos, design systems o juegos en el navegador.
Preguntas frecuentes sobre HSB
¿Se puede usar HSB directamente en CSS?
CSS trabaja habitualmente con HEX, RGB, HSL, OKLCH y funciones de color relacionadas. HSB en sí no es la notación nativa más común, pero sigue siendo muy útil como modelo para elegir y entender el color. Puedes definir el color en HSB y luego convertirlo a HEX, RGB, HSL u OKLCH al escribir el CSS.
¿El brillo de HSB es lo mismo que el brillo percibido?
No exactamente. El brillo de HSB es un canal del modelo, no una medida completa de qué tan claro se ve un color para la visión humana. Tonos distintos pueden parecer más o menos claros aun con el mismo valor de brillo. Para legibilidad, contraste y accesibilidad, no te fíes solo del brillo de HSB.
¿Por qué dos valores HSB parecidos pueden verse muy distintos?
Pequeños cambios de tono pesan mucho en ciertas zonas de la rueda cromática, y la combinación de saturación y brillo cambia por completo el papel del color. Un amarillo vivo y saturado grita; un amarillo claro y poco saturado se convierte en fondo discreto. El color depende de la paleta que lo rodea, no de un número aislado.
¿Por qué vale la pena aprender HSB para diseño o ilustración?
Porque HSB permite diagnosticar problemas de color rápido. En lugar de decir “este color está mal”, puedes señalar si el tono se desvió, si la saturación está demasiado alta o si el brillo está demasiado bajo. Eso sirve en diseño de interfaces, ilustración, paletas de marca y en el entrenamiento de color de Palette Lab.