Skip to main content
Toca Boca
New Member
September 17, 2026

Color profile mismatch in Figma after importing UI assets for concrete calculator web tool

  • September 17, 2026
  • 0 replies
  • 8 views

Hi everyone,

I’m running into a unexpected visual discrepancy while working on a redesign for a web application — a concrete volume and material estimating tool located at https://concretecalculatorz.com/.

I exported several UI components, form controls, and custom visual elements from our live environment to rebuild and test interactive prototypes directly inside Figma.

However, as soon as I import the assets into my Figma canvas, the colors, contrast, and subtle drop shadows appear slightly altered — specifically looking a bit unsaturated or washed out compared to how they render natively in the browser.

Here is what I’ve tested to resolve it so far:

  • Re-exported the assets using different file formats (sRGB PNGs vs SVGs).

  • Toggled Figma's color profile settings between sRGB and Unmanaged (Display P3).

  • Verified browser rendering across both Chrome and Safari to rule out local monitor display profiles.

Has anyone run into this type of color shift or contrast loss when bringing web UI elements into Figma?

Any tips on export configurations, SVG color space settings, or Figma color display overrides that can help keep the asset colors exact would be greatly appreciated.

Thanks!