Guía práctica de modelos de color
HSB vs HSL vs HSV: qué cambia y cuándo usar cada uno
Los tres nombres comparten una rueda de matiz, pero no describen siempre las mismas coordenadas. Esta guía explica el tercer canal, por qué porcentajes iguales pueden generar colores distintos y cómo conservar un tono al pasarlo a la web.
HSB vs HSL vs HSV
¿HSB, HSV y HSL son lo mismo?
HSB y HSV suelen nombrar el mismo modelo basado en RGB: brillo y valor son dos etiquetas para el tercer canal. HSL es otra transformación. Usa luminosidad, sitúa un matiz puro y saturado en 50% y llega al blanco en 100%. HSB o HSV sitúa el matiz puro en 100% de brillo y solo llega al blanco cuando la saturación baja a cero. Conserva siempre el nombre del modelo junto al triplete.
La respuesta breve
- Trata HSB y HSV como equivalentes solo después de revisar aplicación, rangos, perfil de color y redondeo.
- No pegues porcentajes de saturación y brillo HSB en campos de saturación y luminosidad HSL.
- Usa HSB o HSV para ajustar visualmente; usa HSL cuando su estructura y la función CSS hsl() encajen con la tarea.
- Guarda un HEX o RGB exacto para entregar el color y evalúa contraste y diferencia perceptual con métodos propios.
Una familia de color, tres trabajos distintos
Los modelos reorganizan colores de pantalla para decisiones diferentes. Estos valores de referencia muestran la diferencia antes de mover números entre herramientas.
| Modelo | Tercer canal | Referencias útiles | Uso habitual |
|---|---|---|---|
| HSB / HSV | Brillo / Valor | Matiz puro en S 100%, B/V 100%; negro en B/V 0% | Selectores, imagen y ajuste visual de familia, intensidad y oscuridad |
| HSL | Luminosidad | Matiz puro en S 100%, L 50%; negro en L 0%; blanco en L 100% | Valores CSS hsl() y variaciones claras u oscuras alrededor de un punto medio |
| HEX / RGB | Canales rojo, verde y azul | Un triplete sRGB explícito después de convertir | Entrega web estable, tokens de diseño y registros de implementación |
Por qué los nombres parecen más intercambiables de lo que son
HSB, HSV y HSL empiezan con el matiz, normalmente representado como un ángulo en una rueda de color. También incluyen un canal llamado saturación. Ese vocabulario compartido hace que parezcan compatibles a primera vista. En realidad, cada uno reorganiza coordenadas RGB de pantalla; no es una medición física independiente de la luz. El trabajo original sobre las transformaciones HSV y HSL describió dos geometrías distintas para navegar con más facilidad por un cubo RGB. Compartir etiquetas no convierte sus coordenadas en equivalentes.
La lectura más segura es operativa. Un modelo indica a la herramienta cómo convertir tres controles en una salida roja, verde y azul. Si dos aplicaciones usan la misma conversión y el mismo redondeo, el RGB o HEX final puede coincidir aunque una escriba HSB y otra HSV. Si uno de los campos es HSL, cambian los cálculos de saturación y del tercer canal. Copiar 210°, 70%, 80% entre modelos puede alterar la muestra aunque todos los números visibles permanezcan iguales.
Cómo HSB y HSV describen brillo o valor
En el modelo HSV común, el valor es el mayor de los canales rojo, verde y azul normalizados. HSB suele llamar brillo a ese mismo control. Con saturación y brillo máximos, el matiz elegido alcanza su color de borde RGB más intenso. Al bajar el brillo, el resultado se acerca al negro. Al bajar la saturación, el resultado se vuelve neutral mientras se mantiene el techo de brillo. Con saturación cero y brillo máximo, el resultado es blanco, no una muestra coloreada intensa.
Esta disposición funciona bien en un selector bidimensional: se elige el matiz en una banda y después se mueve horizontalmente para saturación y verticalmente para brillo. El selector actual de Adobe documenta esta interacción HSB con matiz de 0–360° y porcentajes para saturación y brillo. Es intuitivo para editar, pero la palabra brillo no debe leerse como luminancia medida ni como promesa perceptual. Un amarillo y un azul pueden mostrar B 100% y producir luminosidades relativas muy diferentes.
Cómo HSL cambia el punto medio y los dos extremos
HSL conserva la rueda de matiz, pero define un eje de luminosidad con negro en 0%, blanco en 100% y el matiz puro plenamente saturado en 50%. Por encima del punto medio, el color avanza hacia el blanco; por debajo, hacia el negro. Esta simetría ayuda a razonar sobre tintes y sombras alrededor de un centro. También explica por qué un brillo HSB de 100% no puede sustituirse por una luminosidad HSL de 100%: el primero puede ser un matiz vivo y el segundo siempre es blanco.
La saturación también cambia con esa geometría. Un color HSL con luminosidad muy alta o muy baja dispone de poco croma, incluso si el campo de saturación indica 100%. En HSV, la saturación se calcula con relación al canal de valor. La especificación CSS Color del W3C define hsl() como forma de producir colores sRGB y publica la conversión que siguen los navegadores. No define una función CSS hsv() o hsb(), por lo que un tono elegido en HSB debe convertirse antes de ser un valor CSS portable.
Cómo entregar un color del selector al código sin ambigüedad
Primero registra modelo, aplicación, perfil de color o supuesto web y triplete exacto. Después captura el HEX de seis dígitos o RGB resultante. Ese valor final es la entrega más segura porque evita que otra herramienta interprete porcentajes HSB como HSL. Si alguien prefiere hsl() en CSS, debe convertir desde el RGB aprobado y comprobar el resultado del navegador, no copiar etiquetas por posición. Conserva precisión suficiente para reproducir el tono sin insinuar que más decimales corrigen una captura o una pantalla sin calibrar.
Termina indicando qué decisión puede respaldar cada valor. HSB o HSL puede explicar una edición. HEX o RGB conserva un token digital. Delta E resume la diferencia de un par bajo una fórmula nombrada. El contraste WCAG usa luminancia relativa y criterios definidos para primer plano y fondo. Ninguna salida sustituye automáticamente a otra. Un registro fiable incluye fuente, modelo, valor convertido, contexto visible, método de evaluación, autoridad que decide y siguiente acción que debe ejecutar el equipo.
Flujo seguro de color en cinco pasos
Sigue esta secuencia cuando un color pase de un selector, captura o archivo de diseño al código o a una paleta compartida.
1. Nombra el modelo
Escribe HSB, HSV, HSL, RGB u otro modelo exacto junto a los valores; no compartas un triplete sin etiqueta.
2. Conserva la fuente
Guarda el token aprobado o archivo original e indica si el color fue muestreado, convertido o creado visualmente.
3. Guarda RGB o HEX
Captura el valor de pantalla convertido para que otra aplicación reproduzca los mismos canales sRGB sin adivinar.
4. Comprueba el contexto
Mira el color en tamaño, tema, vecindad, estado y pantalla reales antes de aprobarlo.
5. Ejecuta la prueba correcta
Usa contraste, Delta E, medición de impresión o la regla del proyecto; un canal del selector no es una prueba.
Smith · W3C · Adobe
Fuentes primarias y definiciones de plataforma
Estas referencias documentan las transformaciones originales, el selector HSB actual, la sintaxis HSL del navegador y la regla de contraste separada.
Compara los modelos y prueba el color
Preguntas sobre HSB, HSV y HSL
¿HSB y HSV son siempre idénticos?
Suelen nombrar el mismo modelo y brillo/valor son etiquetas alternativas. Comprueba documentación, rangos, perfil y redondeo antes de transferir valores exactamente.
¿Por qué HSB 100% de brillo no equivale a HSL 100% de luminosidad?
HSB puede mostrar un matiz puro y saturado con brillo 100%. HSL reserva luminosidad 100% para blanco y sitúa el matiz puro en 50%.
¿CSS puede usar HSB o HSV directamente?
CSS Color define hsl(), pero no una función estándar hsb() o hsv(). Convierte el tono a HEX, RGB, HSL u otro formato CSS aceptado.
¿Qué modelo es mejor para un selector de color?
HSB o HSV es habitual en una banda de matiz y campo de saturación-brillo. HSL puede ser más claro para variantes CSS. El mejor modelo coincide con la decisión y conserva una salida exacta.
¿Igual luminosidad HSB o HSL garantiza igual contraste?
No. Ningún canal es una relación de contraste WCAG. Evalúa el primer plano y fondo reales con el cálculo de luminancia relativa requerido.