When you write color: #4f46e5 in CSS, the browser executes a series of steps to turn that abstract value into a visible pixel. Understanding this pipeline explains why colors sometimes look different than expected and why certain CSS color techniques perform better than others.
Step 1: Parsing
The browser parses your CSS value into an internal color representation. Hex, RGB, HSL, OKLCH, and named colors all get converted to the same internal format. If you use a CSS variable, it is resolved at this stage. If you use color-mix(), the blending calculation happens here.
Step 2: Style Computation
The browser determines which color applies to each element by resolving cascading, specificity, and inheritance rules. If multiple rules set the same element's color, the winner is determined here. The computed value is a resolved, absolute color in sRGB (for standard CSS) or the specified color space (for modern CSS).
Step 3: Compositing
If elements overlap (semi-transparent backgrounds, overlays, shadows), the browser composites them. Alpha blending mixes the colors mathematically. This is where semi-transparent overlays produce their final visible color, which depends on what is behind them.
Step 4: Display Mapping
The final computed color is mapped to the display's color profile. On a standard sRGB monitor, the hex value maps directly. On a wide-gamut P3 display, the browser may expand the color into the wider space. On a poorly calibrated display, the mapping may be inaccurate.
Performance Implications
Simple hex values and CSS variables resolve quickly (Steps 1 and 2 are trivial). Complex computations like deeply nested variable chains, multiple color-mix() calls, or runtime color calculations add processing time. For most sites, the difference is imperceptible, but on animation-heavy pages or low-power devices, simpler color declarations are faster.