HSB to Hex Converter
Convert HSB values copied from a Photoshop or Illustrator color picker into a 6-digit hex code ready to paste into CSS or design files.
How HSB to Hex Conversion Works
HSB (hue, saturation, brightness) uses the same math as HSV: it first converts to RGB using a piecewise formula based on which 60° segment of the color wheel the hue falls into, scaled by saturation and brightness. Once the red, green, and blue channels are known (0-255 each), each converts to a 2-digit hex pair. This is useful when you've read H, S, B values off a Photoshop, Illustrator, or Sketch color picker and need the matching hex code to paste into CSS.
HSB to Hex Example, Step by Step
hsb(0, 100%, 100%) = #FF0000
hsb(0, 100%, 100%) = #FF0000
Hue = 0 (falls in the 0-60 segment) Saturation = 100%, Brightness = 100% Chroma = B x S = 1.0 X = 0 (since hue = 0) m = B - C = 0 RGB (0-1) = (1.0, 0, 0) Scale to 0-255: R=255, G=0, B=0 255 (decimal) = FF (hex) -> Red 0 (decimal) = 00 (hex) -> Green/Blue
| Step | Description | Result |
|---|---|---|
| Find the hue segment | hue 0 falls in the 0-60° segment | red-dominant |
| Compute chroma | B x S = 1.0 | C = 1.0 |
| Derive RGB (0-1 range) | based on chroma and hue position | R=1.0, G=0, B=0 |
| Scale to hex | 255 (decimal) = FF (hex) | #FF0000 |
This is the same result you'd get typing hue 0, saturation 100, brightness 100 into Photoshop's color picker — HSB and HSV share identical math, so both name the exact same red.
Common Mistakes With HSB to Hex
- Entering saturation or brightness as a raw decimal (0.92) instead of a percentage (92).
- Assuming HSB needs a different formula from HSV — they're the same model, just different naming conventions.
- Copying values from an HSL field into an HSB converter by mistake — the two models produce different colors for the same numbers.
Frequently Asked Questions
How do you convert HSB to hex?
First convert hue, saturation, and brightness into RGB channels using the standard HSB-to-RGB formula (identical to HSV-to-RGB), then convert each RGB channel (0-255) to a 2-digit hex pair.
What format does this tool accept for HSB input?
Either plain comma-separated numbers (221, 84%, 92%) or a full hsb() string (hsb(221, 84%, 92%)) — both work the same.
What's the hex value of hsb(0, 100%, 100%)?
#FF0000 (pure red) — 0° hue with full saturation and full brightness sits at the reddest, brightest point of the color wheel.
Can I type the H, S, B numbers straight from Photoshop's color picker?
Yes — Photoshop, Illustrator, and Sketch all display HSB as hue (0-360), saturation (0-100%), and brightness (0-100%), the exact ranges this tool expects.
Is HSB to hex the same conversion as HSV to hex?
Yes — HSB (hue, saturation, brightness) and HSV (hue, saturation, value) are the same color model under different names, so the math and result are identical for the same input numbers.