Colors & backgrounds

Modern color formats, layered backgrounds, image embedding — with a few caveats.

Every CSS color format Chromium accepts as a computed style works — hex, rgb() / rgba(), hsl() / hsla(), hwb(), lab(), lch(), oklab(), oklch(), color() with display-p3 / sRGB, color-mix(...), and currentColor. Domotion reads the resolved color, not the source CSS, so notation differences don't matter.

Backgrounds — solid colors, multiple stacked layers (first-on-top semantics preserved), gradients (see Gradients), URL-referenced images, background-clip in all four flavours including text, background-origin, and background-attachment — all round-trip. Alpha channels work everywhere a color is accepted; opacity applies to the entire subtree (matches CSS); opacity: 0 elements are skipped from output.

The exceptions

Wide-gamut color output. Output is always rgb() / rgba() in the SVG — wider color spaces collapse to sRGB at write time. Invisible for most marketing use cases; if you're working with HDR / display-P3 source material and care about extended-gamut output, that's not yet supported.
conic-gradient — no SVG equivalent in <img>-rendered SVG. The layer is skipped and a warning is logged.
Unknown background-image formats. PNG, JPEG, GIF, WebP, AVIF, and SVG are inlined as base64 data URIs at capture time. Other extensions pass through with their original URL (which will break offline).
background-image: url(...) sizing. Common cases (cover / contain / explicit dimensions) work; some background-size + background-position + background-repeat combinations are approximated.

The exceptions

See also