A painting site that lets you try the color first

1 · Live repaint via a masked multiply layer

The hero is a single photo of a painter rolling a wall. Above it sits one absolutely-positioned <div> with mix-blend-mode: multiply, so whatever color it holds tints the pixels beneath it like a real glaze of paint. A soft gradient mask fades the tint out toward the bottom of the frame, so the wall recolors while the painter and floor stay believable.

/* the tint layer that "repaints" the wall */
#hero-wall{
  mix-blend-mode: multiply;
  background: var(--accent);
  mask-image: linear-gradient(180deg,#000 46%,transparent);
  transition: background .55s cubic-bezier(.22,1,.36,1);
}

Swapping the layer's background eases from one color to the next, so the wall dissolves between shades instead of snapping.

2 · One variable, repainted everywhere

Each swatch is a real <button> carrying its colors as data attributes. Choosing one doesn't just tint the wall — it rewrites a site-wide --accent custom property, so buttons, links, the section kickers, the step numbers and the review stars all shift to the chosen color in the same breath.

function apply(s){
  root.style.setProperty("--accent", s.accent);
  root.style.setProperty("--on-accent", s.on);
  wall.style.background = s.wall;   // repaint the hero
}

Every accent ships with a paired --on-accent text color and a darkened --accent-deep for links on the white background, so contrast holds no matter which swatch wins — the light ochre flips its button text to ink, the darker shades stay white.

3 · Hover previews, a click commits

Because the swatches are buttons, they work by keyboard, tap and mouse identically. mouseenter and focus preview a color live; mouseleave and blur revert to the last committed choice; a click locks it in and moves the aria-pressed state. It feels like flipping through paint chips, then setting one down.

4 · Guarding the flourish

The interaction is deliberately subordinate to the call-to-action: the phone button and "Get a Free Quote" sit above the swatch bar, and the swatch copy openly says "it's the fun part; the free quote is the real one." Under prefers-reduced-motion the global transition override makes every repaint instant — no eased fades, no pulsing map marker — so the feature still works but never moves for people who asked it not to.

5 · Art-directed photography

Both supplied photos are treated with the palette rather than dropped in raw. The hero carries the repaint layer plus a diagonal ink scrim (linear-gradient(102deg, rgba(20,18,16,.9) → transparent)) that keeps white headline text above AA on every swatch. The roller macro is hung in a slightly rotated frame with a corner color-chip and a neighborhood caption, so it reads as a hung print, not stock.