Understanding Hue, Saturation, and Brightness: The HSB Color Model Explained

Open Photoshop's color picker. Open Illustrator's. Open Sketch's. All three default to the HSB color model — the large square gradient with a vertical bar on the right. Most designers spend years using this interface to pick colors without fully understanding what the three parameters are doing. As a result, they navigate by feel rather than by intention, which is slower and less precise than it needs to be. This guide explains HSB from first principles and gives you the practical understanding to use it deliberately.

HSB vs HSL — The Distinction That Confuses Everyone

Before explaining HSB, it is worth clarifying its relationship to HSL, which is the model used in CSS and discussed in our article on HEX vs RGB vs HSL: Which Color Format to Use and When. They are related but different, and conflating them causes real confusion.

HSL: Hue, Saturation, Lightness. At 100% Lightness, any color becomes white. At 0% Lightness, any color becomes black. At 50% Lightness and 100% Saturation, the color is at its most vivid (the pure hue).

HSB: Hue, Saturation, Brightness. At 100% Brightness and 0% Saturation, any color is white. At 0% Brightness, any color becomes black regardless of Saturation. At 100% Brightness and 100% Saturation, the color is at its most vivid.

The difference matters in practice: in HSL, you increase lightness to approach white. In HSB, you decrease saturation to approach white (while keeping brightness at 100%). Most design tool color pickers use HSB. Most CSS color values use HSL. Understanding both — and knowing which you are working with at any moment — prevents a lot of confusion when values do not translate as expected between tools and code.

Hue — Navigating the Color Wheel

Hue is measured in degrees from 0 to 360, representing position on the color wheel. This is identical between HSB and HSL — the hue degree system is universal across color models.

0° (and 360°): Red
30°: Orange
60°: Yellow
90°: Yellow-green
120°: Green
150°: Spring green
180°: Cyan
210°: Azure
240°: Blue
270°: Violet
300°: Magenta
330°: Rose
360°: Red (back to start)

In design tool color pickers, hue is typically controlled by the vertical bar on the right side of the picker — dragging it up or down moves around the color wheel. Understanding the degree values for major hue families lets you dial in colors precisely: if you want a pure cobalt blue, target 210-220°. If you want a true teal, target 180°. If you want an amber rather than a yellow, target 35-45°.

Saturation — From Gray to Vivid

Saturation in HSB controls the intensity of the color — how much of the selected hue is present. At 0% saturation, you have pure gray (at whatever brightness level is set). At 100% saturation, the hue is as vivid as possible.

In the large square of a typical HSB color picker, saturation is controlled by horizontal position: all the way left is 0% saturation (gray), all the way right is 100% saturation (full vivid hue).

Saturation is the variable that most dramatically affects how a color "feels" in use. A fully saturated blue is electric and vivid — attention-demanding and high-energy. The same blue at 30% saturation is a quiet, sophisticated gray-blue — calm and professional. Moving between these extremes while holding hue and brightness constant is the operation of toning — producing the muted, desaturated variants popular in contemporary design. The toning concept is covered in our article on What Are Tints, Shades, and Tones? The Difference Explained Simply.

Brightness — From Black to Full Color

Brightness in HSB controls how much light is in the color. At 0% brightness, any color is black — no light present. At 100% brightness, the color is at maximum luminosity.

In the large square color picker, brightness is controlled by vertical position: all the way up is 100% brightness, all the way down is 0% brightness (black). The bottom of the square is always black, regardless of hue or saturation.

Notice an important consequence: in HSB, to get white, you set saturation to 0% and brightness to 100%. You cannot get white by simply increasing brightness to maximum while keeping saturation high — you get a vivid, bright version of the hue instead. This is different from HSL, where increasing lightness to 100% always produces white. Getting to white in HSB requires two changes: reducing saturation to 0 and increasing brightness to 100.

Using the Color Picker Square Intentionally

With all three parameters understood, the color picker square becomes a precise instrument rather than a dragging game. The square's position represents the intersection of saturation (horizontal) and brightness (vertical) for the currently selected hue. Four corners of the square always represent:

Top-left corner: White (0% saturation, 100% brightness)
Top-right corner: Full vivid hue (100% saturation, 100% brightness)
Bottom-left corner: Light gray (0% saturation, moderate brightness — varies)
Bottom-right corner: Black (100% saturation, 0% brightness — always black)

Actually, the entire bottom edge is black (0% brightness). The left edge is the gray-to-white range (0% saturation, varying brightness). The top edge goes from white to the pure hue. The right edge goes from the pure hue to black.

Once you internalize this map, picking colors becomes intentional. Want a muted, medium-dark version of your hue? Navigate to the lower-left quadrant of the square. Want a light, pale tint? Navigate to the upper-left quadrant. Want maximum vibrancy? Navigate to the upper-right corner. Each region of the square produces a specific character of color, and understanding which region produces which character lets you navigate directly to what you need.

Practical HSB Color Selection Techniques

Building a shade: Keep hue constant. Reduce brightness while keeping saturation at or near its current level. The color darkens toward black.

Building a tint: Keep hue constant. Reduce saturation while keeping brightness at 100%. The color moves toward white as saturation drops.

Shifting to a more sophisticated/muted version: Keep hue constant. Move the picker point toward the upper-left quadrant — reducing saturation and possibly brightness slightly. This produces the toned, desaturated quality of contemporary design aesthetics.

Finding the pure hue: Drag the picker point to the upper-right corner. This gives you the hue at maximum saturation and maximum brightness — the most vivid possible version of the color.

HSB is the working model of professional design tools for good reason: it gives you direct control over the three most perceptually meaningful dimensions of a color. Learn to navigate it deliberately, and you will spend less time searching for colors by feel and more time choosing them by intention.