Why Your Brand Colors Look Wrong in CSS

The color that matched in Figma and died in the browser

You pick #1A73E8 in Figma, hand it to CSS, and the button looks slightly off. Not broken, just different from the mockup. This happens because color conversion between spaces loses information, and nobody warns you about it.

Where the drift comes from

CSS on the web mostly works in sRGB. Design tools increasingly work in wider gamuts: Display P3, OKLCH, LAB. When a designer picks a P3 orange and your toolchain flattens it to sRGB, the closest sRGB match is a different orange. Neither tool is wrong. The conversion is just one-directional and imprecise, and it happens silently on export.

Print adds another layer entirely. If your brand also lives on packaging or business cards, the CMYK values come from a different system with a smaller gamut. Converting CMYK to RGB naively can shift a saturated blue toward purple, and no amount of eyeballing fixes it, because the issue is in the math, not in your monitor.

What actually helps

Pin the CSS hex values as the source of truth. Designers adjust to them, not the other way around.
Check contrast while you are at it. A color that survives conversion can still fail WCAG after a theme change. A contrast checker catches this in seconds, and it catches it before the accessibility audit does.
When you need shades of one hue, generate the scale from the base value instead of hand-picking. The gradient generator is a decent starting point for this.
For print work, convert in one direction only, RGB to CMYK, and document both sets of values.

When you have to convert, use a tool that shows the values in several formats at once. I keep the color converter open next to my editor for exactly this, and the CMYK to RGB converter handles the print side when it comes up.

One habit that prevents most of this

Store colors once. A tokens file with named values, referenced by both design and code. Most color bugs I have traced came from the same brand blue existing as five literals in five places, with someone fixing three of them.

Dark mode makes this worse. The same blue that passes contrast on white fails on near-black, or a gray picked for light UI turns invisible in the dark theme. A color blindness simulator is worth a visit too: roughly one in twelve men has some form of color vision deficiency, and red-green status indicators are the classic casualty. Ten minutes with the simulator beats a bug report from a user who cannot tell your error state from your success state.

That is really the whole fix. One source of values, one conversion pass, done once and checked for contrast. Colors stop drifting the day you stop converting by hand.