It is the most common and frustrating bug in UI/UX handoffs. A designer creates a beautiful, deep navy blue button in Figma. They tell the frontend developer, "The color is Hue 220, Saturation 100%, and 50% Brightness."
The developer goes into their CSS file and types: background-color: hsl(220, 100%, 50%);. But when the website loads, the button isn't a deep navy—it is a blazing, blinding, neon blue. The designer blames the developer, the developer blames the designer, and nobody knows what went wrong.
The culprit? Design tools use HSB, while Web Browsers use HSL. They are two entirely different mathematical color models, and "50%" means two drastically different things depending on which model you are using. In this developer masterclass, we will explain exactly why this happens and how to fix your Figma workflow. Test the handoff bug yourself in our simulator below!
🧪 Try It: HSB vs HSL Handoff Simulator
🚨 The Great Handoff Nightmare
To understand why this bug happens, you have to understand the fundamental difference between how Digital Artists work and how Web Browsers render code.
Figma, Photoshop, and Illustrator were built for designers. They use a color model called HSB (Hue, Saturation, Brightness). Some tools call this HSV (Hue, Saturation, Value)—they are the exact same thing. It is designed to mimic how a painter mixes paint on a physical canvas.
On the other hand, the World Wide Web Consortium (W3C) decided that CSS should use HSL (Hue, Saturation, Lightness). It was designed to be mathematically symmetrical and predictable for writing computer code.
hsb() function, developers see the designer's HSB numbers and wrongly assume they can just type them into the CSS hsl() function. As our simulator above proves, hsb(220, 100%, 50%) and hsl(220, 100%, 50%) generate two completely different HEX codes.🎨 What is HSB / HSV? (The Designer's Tool)
Let's look at the parameters of HSB:
- Hue (0-360): The color itself (e.g., Red, Blue, Green).
- Saturation (0-100%): How much color is in the mix. 0% is gray, 100% is full color.
- Brightness / Value (0-100%): The intensity of the light.
The HSB Catch: In HSB, if Saturation is 100% and Brightness is 100%, you get the purest, brightest color possible (e.g., Neon Red). If you want Pure White in HSB, you have to push Brightness to 100% and drop Saturation all the way down to 0%.
💻 What is HSL? (The Developer's Tool)
HSL thinks about color as a perfectly symmetrical cylinder. It was designed so that developers could easily write CSS gradients that fade to white or black without needing to change the saturation.
Let's look at the 'L' (Lightness) in HSL:
- 0% Lightness: Always Pure Black (regardless of Hue or Saturation).
- 100% Lightness: Always Pure White (regardless of Hue or Saturation).
- 50% Lightness: The exact middle. This is where the purest, brightest color lives.
The HSL Catch: In CSS, if you push Lightness to 100%, you get Pure White, no matter what your Saturation is set to. This makes writing CSS incredibly easy (e.g., hover effects just add or subtract 10% from Lightness), but it fundamentally breaks the HSB math.
🚀 Stop Doing the Math Manually
Need to convert a Figma HSB color directly to CSS-ready HSL or HEX? Use our free Developer Color Converter tool to translate your palettes instantly.
Open HSB to HSL Converter →📐 The Mathematical Difference (The 50% Rule)
Let's look at the W3C mathematical proof of why the Designer-to-Developer handoff fails. Assume we have a pure, bright Blue. The Hue is 220, and the Saturation is 100%.
| Visual Color | Figma (HSB) Value | CSS (HSL) Value |
|---|---|---|
| Pure, Bright Blue | B = 100% | L = 50% |
| Pure White | B = 100% (Must also set S to 0%) | L = 100% (S doesn't matter) |
| Deep Dark Navy | B = 50% | L = 25% |
As you can see, 50% in Figma means "Dark Navy". But 50% in CSS means "Pure Bright Blue". This is the exact root cause of the bug!
⚙️ How to Fix This in Figma
Open the Color Panel
Select the colored element on your canvas in Figma. Click the colored square in the right-hand properties panel under "Fill".
Locate the Dropdown
Just below the large visual color spectrum box, you will see a small text dropdown that likely says "HSB" or "HEX".
Switch to HSL or CSS
Click the dropdown and change it from HSB to HSL. Figma will automatically run the mathematical conversion. Now, the numbers you see are 100% safe to copy and paste directly into your CSS hsl() function.
❓ Frequently Asked Questions
Are HSB and HSV the same thing?
Yes. HSB stands for Hue, Saturation, Brightness. HSV stands for Hue, Saturation, Value. They are the exact same mathematical color space; different software platforms simply use different acronyms (Photoshop uses HSB, while some engineering tools use HSV).
Why do CSS and Figma use different color models?
Figma, Photoshop, and digital art tools use HSB because it is more intuitive for digital painters (it mimics adding black or adding pure color pigment). CSS adopted HSL because the W3C deemed it better for programmatic web design, where fading a color to white (Lightness = 100%) is a common requirement for gradients and hover states.
Can I use HSB directly in CSS?
No. CSS does not have an hsb() or hsv() function. If you try to write background-color: hsb(200, 100%, 50%); in your stylesheet, the browser will not understand it and the color will fail to load. You must mathematically convert it to HSL, HEX, or RGB.
Why is my CSS color darker than my Figma design?
This is the classic handoff bug. In Figma (HSB), 50% Brightness is a dark, shaded color. In CSS (HSL), 50% Lightness is the absolute brightest, purest version of the color. If a developer unknowingly types the HSB values into a CSS hsl() function, the color rendered on the website will look completely wrong.
How do I convert HSB to HSL?
You can change the dropdown in Figma's color picker from HSB to HSL, use an online conversion tool, or use the interactive HSB/HSL simulator on this page to automatically translate the math.