Hex to HSB Converter
Convert a hex color code into HSB — the hue, saturation, brightness values shown in Photoshop, Illustrator, and Sketch color pickers.
How Hex to HSB Conversion Works
HSB describes a color by hue (0-360°), saturation (0-100%), and brightness (0-100%) — the exact terminology and layout used in Photoshop, Illustrator, and Sketch color pickers. Converting from hex decodes the red, green, and blue channels first, then derives hue from the dominant channel and saturation/brightness from how the channels compare to the maximum. If you're reading values off a design tool's color picker and need the matching hex code for CSS, this converts them directly.
Hex to HSB Example, Step by Step
#2563EB = hsb(221, 84%, 92%)
#2563EB (hex) = hsb(221, 84%, 92%)
#2563EB -> rgb(37, 99, 235) Normalize: R=0.145, G=0.388, B=0.922 Max=0.922 (blue), Min=0.145 (red) Brightness = Max = 0.922 -> 92% Saturation = (Max - Min) / Max = 0.843 -> 84% Hue = 221 (blue-dominant)
| Step | Description | Result |
|---|---|---|
| Decode hex to RGB | #2563EB -> rgb(37, 99, 235) | R=37, G=99, B=235 |
| Normalize channels to 0-1 | divide each by 255 | 0.145, 0.388, 0.922 |
| Compute brightness | brightness = the maximum channel | B = 92% |
| Compute saturation and hue | based on the spread between max and min channels | S = 84%, H = 221° |
If you paste these same numbers into Photoshop's HSB fields, you'll see #2563EB appear as the matching hex value — the tools agree because it's the same underlying math.
Common Mistakes With Hex to HSB
- Treating HSB as a different color model from HSV — they're identical, just named differently across tool ecosystems.
- Confusing HSB's brightness with HSL's lightness — the two use different formulas and rarely match for the same color.
- Assuming low brightness always means a dark, dull color — saturation and brightness are independent axes.
Frequently Asked Questions
What does HSB stand for?
Hue (0-360°, position on the color wheel), Saturation (0-100%, how intense the color is), and Brightness (0-100%, how bright the color is at full intensity).
Is HSB the same as HSV?
Yes — HSB and HSV are the exact same color model with identical math. 'Brightness' and 'Value' are just different names for the same third channel, used by different tool ecosystems: Adobe products (Photoshop, Illustrator) say HSB, while CSS and most web tooling say HSV.
What's the HSB value of #2563EB?
hsb(221, 84%, 92%) — the same numbers you'd get from an HSV conversion, since it's the same model.
Where do I find HSB values in design software?
In Photoshop's and Illustrator's color picker, click the HSB radio button next to the sliders — it displays the same hue, saturation, and brightness numbers this tool converts.
Why does this tool have a separate page from Hex to HSV if they're identical?
Design tool users often search for 'HSB' specifically since that's the label their software uses, even though the underlying color math and result are identical to HSV.