What a color conflict is #
A color conflict is the failure class Loupely Lens identifies when the color, background color, border color, or text color of an element is being set by a rule from a different source than the one you’re trying to use. You set a button color in your Page Builder. The button stays the wrong color. The rule you set is in the cascade, but something else is winning.
This is the most common visual problem site owners hit, and it’s almost never obvious from the Page Builder interface alone, because the interface shows you what you set without showing you what’s overriding it.
What causes it #
CSS applies color rules in priority order. A rule from a theme stylesheet with a highly specific selector beats a rule from a Page Builder with a less specific selector, regardless of which one you set most recently. A rule marked with !important beats almost everything. An Inline Style injected by JavaScript beats any stylesheet rule.
The typical color conflict scenario: your theme has a stylesheet rule targeting .wp-block-button__link with a background color. Your Page Builder sets a different background color, but it generates a less specific selector. The theme wins. You keep changing the color in the Page Builder, it keeps reverting, and neither the Page Builder nor the browser gives you any indication that a more specific rule is overriding yours.
How Lens diagnoses a color conflict #
When you click an element with a color problem, Lens reads the full CSS Cascade: every rule setting any color property on that element, where each rule came from, and which one the browser applied. The diagnosis names the winning rule’s origin (your theme, your Page Builder, a plugin, an Inline Style, or a JavaScript injection) and why it won (higher specificity, !important declaration, or load order).
The diagnosis output looks like: “This button’s background color is being set by your theme’s stylesheet. The theme rule has higher specificity than your Page Builder’s rule. To override it, you need a rule from the same or higher specificity from a source that loads after the theme.”
What the triage step provides #
When the winning rule comes from a theme or plugin stylesheet (not an Inline Style), Lens generates a ready-to-paste CSS override scoped to the specific element. You paste it into your theme’s Custom CSS panel or your Page Builder’s custom CSS field. One step.
When the winning rule is an Inline Style injected by JavaScript, the override requires !important, because inline styles can only be overridden by declarations with that flag. Lens flags this clearly and includes it in the generated override.
When the fix requires editing a stylesheet file directly (because the source is a plugin or theme that doesn’t expose a Custom CSS field), Lens packages the capture for developer handoff with the specific rule, its origin, and the exact override needed.