About the HEX to HSB Converter
What is HEX to HSB conversion?
A HEX code like #3B82F6 is really just a short way of writing three numbers: how much red, green, and blue go into a color. HSB takes that exact same color and describes it the way a person actually thinks about it. Which color is it? That's the Hue. How strong or washed-out is it? That's the Saturation. And how light or dark? That's the Brightness. This converter reads your HEX value, works out the underlying RGB, and hands back the matching HSB numbers, along with the HSV, HSL, and CMYK equivalents and a live preview.
We built it because doing the math by hand is fiddly, and most converters online stop at a single read-only number. Here you can drag the Hue, Saturation, and Brightness sliders and watch the HEX update as you go, grab a color straight off your screen with the eyedropper, or paste a code from a brand guide and see what it's made of in a second. Everything runs in your browser, so it's fast and nothing you type ever leaves your machine.
How to Use This Tool
- Enter your color. Type or paste a HEX code, either the full six-digit form (
#FF5733) or the three-digit shorthand (#F53). You can also click the swatch to open your system color picker, or hit the eyedropper to sample a pixel from anywhere on screen in browsers that support it.
- Read the HSB values. The instant a valid color lands, you'll see Hue in degrees (0–360) plus Saturation and Brightness as percentages (0–100), sitting right next to the RGB, HSL, and CMYK versions of the same color.
- Fine-tune with the sliders. Nudge any of the three sliders and the preview, the HEX field, and every other format follow along instantly. It's the quickest way to find a slightly lighter or a punchier version of a color you already have.
- Explore and copy. Click any swatch in the shades, tints, or harmony rows to load it, then tap the copy button beside whichever value you need. Your recent colors are remembered locally so you can jump back to them.
Common Use Cases
Designers and front-end developers reach for HSB whenever they need to reason about a color rather than just store it. A few things people use this converter for:
- Building shade scales: Take a brand HEX, drop the Brightness in even steps, and you've got a consistent dark-to-light ramp for buttons, hover states, and borders, instead of guessing at hex codes.
- Matching Photoshop and Figma: Both apps put HSB sliders right in their color panels. Convert your web HEX to HSB and you can dial in the identical color inside your design file.
- Toning a color down: Lowering the Saturation while leaving the Hue alone gives you muted, grown-up versions of a loud color, which is handy for backgrounds and disabled states.
- Figuring out what a color really is: Sometimes you just want to know whether
#6B7280 leans blue or is basically gray. The Hue number answers that immediately.
- Starting a palette: The harmony rows suggest complementary, analogous, and triadic colors off your current Hue, which is a solid jumping-off point for a fresh theme.
- Teaching color theory: Students can watch one slider move and see exactly how it changes the color, which tends to click a lot faster than reading the definitions.
Frequently Asked Questions
What is the HSB color model?
HSB stands for Hue, Saturation, and Brightness. Hue is your position on the color wheel, measured in degrees from 0 to 360 (0 is red, 120 is green, 240 is blue). Saturation runs from 0 to 100% and tells you how pure the color is, where 0% is a flat gray and 100% is fully colored. Brightness, also 0 to 100%, is how much light the color throws off, with 0% being black. People like it because it maps neatly onto how we describe color out loud.
Is HSB the same as HSV?
Yes, they're two names for one model. HSB (Brightness) and HSV (Value) describe the exact same thing, so the numbers you get here work in any program that asks for either. Adobe tends to write HSB while a lot of code libraries say HSV, but the values don't change.
What's the difference between HSB and HSL?
They share the Hue, but the third value behaves differently. In HSB, full Brightness with full Saturation gives you the most vivid version of a color. In HSL, full Lightness is always pure white, no matter the Hue. So a fully saturated red is hsb(0, 100%, 100%) but hsl(0, 100%, 50%). HSL is built into CSS; HSB is not, which is exactly why this conversion comes in handy.
How do you convert a HEX code to HSB by hand?
Split the HEX into its red, green, and blue parts, then divide each by 255 so they land between 0 and 1. Find the largest of the three (call it max) and the smallest (min). Brightness is simply max × 100. Saturation is (max − min) / max × 100, or 0 if max is 0. Hue depends on which channel is the max and uses the gap between the other two, then gets scaled up to a 0–360 degree value. It's doable on paper, but it's easy to slip up, which is the whole reason the calculator above exists.
Can I use HSB values directly in CSS?
Not directly. CSS has no hsb() or hsv() function. If you want that hue-based syntax in a stylesheet, use the hsl() value this tool also gives you, since every browser supports it. HSB really earns its keep inside design software and image editors rather than in your code.
Why are the HSB numbers here different from Photoshop?
They shouldn't be. For the same HEX, the H, S, and B should match Photoshop, Figma, GIMP, and Affinity, because the conversion is a fixed formula. If you ever spot a tiny gap, it's almost always rounding (one tool shows 71% where another shows 70.6%) or a color-profile setting in the design app, not a genuinely different answer.
Does converting HEX to HSB lose any color detail?
Not in the model itself. HEX, RGB, and HSB all describe the same range of colors, so nothing is genuinely thrown away. The one practical wrinkle is rounding: this tool shows H, S, and B as whole numbers so they're easy to read, which means feeding those rounded values straight back can occasionally land one step away, like #3B82F6 versus #3B82F5. Keep the full-precision values and it's a perfect round trip. You can test it both ways with our HSB to HEX converter.
Is this tool free, and does my color data stay private?
It's completely free, with no sign-up and no limits. The conversion happens entirely in your browser using plain JavaScript, so the colors you enter are never uploaded to a server or logged anywhere. Once the page has loaded, it even keeps working offline.
