Why Your Color Picker Lies to You: Fixing Hex Code Mismatches Between Design Tools and Browsers
You've been there. You spend forty minutes nailing the perfect shade of slate blue in Figma, copy the hex code, drop it into your CSS, and then — wait. That's not the same color. It's close, but it's off in a way that's hard to explain to a client but impossible to unsee once you've noticed it.
Welcome to the color conversion problem, one of the most quietly frustrating issues in front-end development. The good news? It's completely solvable once you understand what's actually going on under the hood.
The Three Color Languages Your Tools Are Speaking
Here's the core issue: design tools and browsers don't always speak the same color language natively. They translate between three main formats — hex, RGB, and HSL — and those translations aren't always lossless.
- Hex (like
#4A90D9) is really just a shorthand for RGB values written in base-16. Each pair of characters represents red, green, and blue intensity from 00 to FF. - RGB (like
rgb(74, 144, 217)) uses base-10 numbers from 0 to 255 for each channel. - HSL (like
hsl(210, 64%, 57%)) describes color in terms of hue, saturation, and lightness — closer to how humans actually think about color.
The math to convert between these formats is well-established, but rounding errors during that math are where things go sideways. A color defined in HSL with fractional values gets rounded when converted to the nearest whole RGB integer, which then gets rounded again into a hex pair. Each rounding step can shift the final output by a hair — and sometimes more than a hair.
Where Design Tools Make Their Own Rules
Figma, Adobe XD, and Sketch each have their own internal color engines, and they don't all handle conversions identically.
Figma works primarily in sRGB color space by default, but it also supports Display P3 for wide-gamut design. If you're designing on a newer MacBook Pro or an iPhone display that supports P3, your Figma canvas might be rendering colors in a wider gamut than your CSS can actually reproduce. When you export that hex code, Figma converts it back to sRGB — but the value you see in the color picker might already be a P3-approximated color that looks slightly different on a standard sRGB monitor.
Adobe XD has historically had quirks with HSL rounding that produce hex codes 1–2 digits off from what you'd calculate manually. It's minor, but for brand-critical colors, minor matters.
Sketch on macOS can be influenced by your system's color profile settings, meaning the same Sketch file can produce different hex outputs on two different machines if their display calibration differs.
None of this is a bug in the traditional sense. It's just the reality of working across multiple systems that each make slightly different decisions about how to handle color math.
The Browser Side of the Problem
Once your hex code hits the browser, a whole new set of variables kicks in. Browsers render color based on the operating system's color management settings and the user's display profile. Chrome on a Mac with a wide-gamut display will render #4A90D9 slightly differently than Chrome on a Windows PC with a standard sRGB monitor.
CSS Color Level 4 is helping here — it introduced support for color() functions and wide-gamut spaces like Display P3 directly in CSS. But browser support is still inconsistent, and most production codebases are still relying on hex and RGB values that assume sRGB. If your design tool is working in P3 and your CSS is in sRGB, you've got a built-in mismatch.
Common Conversion Pitfalls (and the Fixes)
Here's a quick reference for the situations where conversions are most likely to go wrong:
| Situation | What Goes Wrong | Fix |
|---|---|---|
| HSL → Hex in design tools | Rounding during conversion shifts hue or lightness | Always cross-check using a dedicated converter like the one on this site |
| Figma P3 → CSS hex | Wide-gamut values get clipped to sRGB range | Check your Figma document color profile under File > Document Settings |
| Sketch on macOS | System color profile influences output | Set your display to sRGB in System Preferences before finalizing values |
| Copy-paste from Adobe XD | HSL rounding creates 1–2 digit hex differences | Manually verify against your brand's master color reference |
CSS rgb() with decimals |
Browsers round differently | Always use whole integers in RGB values |
Practical Troubleshooting Steps
If you're staring at a color that looks wrong and you're not sure where the chain broke, work through these steps:
1. Verify your design tool's color space. Before you do anything else, check whether your file is using sRGB or a wide-gamut profile. In Figma, go to File > Document Settings. If it says Display P3, that's likely your culprit.
2. Use a neutral converter as your source of truth. Don't trust the hex-to-RGB math inside your design tool. Use an independent converter — a good one will show you the exact RGB and HSL equivalents without any tool-specific rounding applied.
3. Compare rendered output, not just values. Set up a simple test HTML page with your hex code applied as a background, then open it next to your design file at the same zoom level. Your eyes will catch discrepancies that numbers sometimes hide.
4. Standardize your color format across the team. Pick one format — hex is usually the safest for cross-tool consistency — and document it in your design system. When everyone's pulling from the same reference, you cut down on conversion steps and the errors that come with them.
5. Watch for shorthand hex errors. #4A90D9 is not the same as #4A9D9 — but a misread or typo can create a value that's technically valid hex and renders without errors, just in the wrong color. Always double-check digit counts.
Building a More Reliable Color Workflow
The longer-term fix is establishing a single source of truth for your color system. Whether that's a shared Figma library, a design tokens file, or a documented color reference page, the goal is to eliminate the moment where someone manually re-enters a hex code from memory or a screenshot.
Design tokens — JSON files that store your color values and can be consumed by both design tools and codebases — are increasingly popular for exactly this reason. Tools like Style Dictionary let you define a color once and output it in whatever format each part of your stack needs, with consistent math applied every time.
Color conversion problems are one of those issues that feel small until they're not. A two-digit difference in a hex code probably won't tank your launch, but it might be exactly why your brand's primary blue looks slightly different on your marketing site than it does in your app. And once a client notices that, it becomes a very expensive conversation.
Get the math right upstream, and everything downstream gets a whole lot easier.
