Scroll Colour Shift

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add to your <body>:

Code snippet omitted: it ships with the download.

4. Point your CSS at the tokens the effect writes:

Code snippet omitted: it ships with the download.

That is the whole integration. Nothing animates the sections themselves; the colour lives entirely in the tokens.

Using It With Your Own Design

What the effect requires of your markup:

• One container with data-color-shift, containing at least two [data-color-palette] elements. They do not have to be <section> elements and they can be any height.
• data-color-bg on each palette element. data-color-ink and data-color-accent are optional: with only a background declared, the contrast guard supplies a legible ink for you, and the accent falls back to the ink.
• Colours can be written in any form the browser understands: hex, rgb(), hsl(), oklch(), or a keyword. They are resolved once at init.

What your CSS has to do: read the tokens. Any colour that should participate in the journey must be var(--cs-…) rather than a literal. Anything left as a literal simply stays put, which is a legitimate choice for a logo or a photograph.

Non-obvious CSS the effect depends on:

• The tokens are written to <html> by default, so html { background: var(--cs-bg) } matters as much as body does. Without it, an overscroll bounce shows the browser's white.
• Give :root a full set of --cs-* defaults, as style.css does. They are what the page renders in before the script runs and if JavaScript never runs at all, so make them a real palette rather than placeholders.
• A sticky or fixed header should use color-mix(in srgb, var(--cs-bg) 82%, transparent) rather than a solid literal. It then re-tunes with the ground beneath it instead of becoming an opaque slab of the wrong colour mid-transition.
• Do not put a CSS transition on the properties the tokens feed. The scroll position already drives them continuously; a transition on top adds lag that reads as the colour trailing the page.

What is only the demo's CSS and can be deleted: everything in style.css below the header block. The panels, rows, cards, pull quote and rail are one paint maker's landing page, not part of the effect.

Options

Set on the [data-color-shift] container:

Set on each [data-color-palette] element:

Optional hooks, placed anywhere inside the container:

Tokens Written

How It Works

Each palette element's colours are converted to Oklab once at init. A single ScrollTrigger spanning the container calls one render function on update, and that function derives everything from the scroll position: which boundary is currently inside the transition band, how far across it the page is, and therefore what mix of the two neighbouring palettes applies. Because the state is a function of position rather than an accumulation of triggers firing, a flick scroll, a hash jump or scrolling backwards all land on exactly the right colour.

Oklab does the interpolation because sRGB does not. Mixing two saturated colours channel by channel drags the midpoint through a desaturated sludge; in Oklab the midpoint sits where a designer would have put it.

The contrast guard is the part that makes this safe to ship. Cross-fading a light section into a dark one moves the background down and the ink up, and halfway across they meet: grey on grey, for as long as the transition lasts. So the ink is not trusted. Every frame, the candidate ink and background are converted to WCAG relative luminance; if the ratio falls short of the configured minimum, the ink's Oklab lightness is binary-searched toward whichever pole (black or white) can actually reach the target, moving only as far as it needs to and leaving hue and chroma untouched. Contrast is continuous in lightness, so the correction eases in and out rather than snapping.

The same pass holds secondary text at 3:1, lifts a low-contrast accent off the ground, and picks black or white for labels sitting on top of the accent.

One honest caveat: when a light section meets a dark one the background necessarily passes through mid-tone, and at that exact point no continuous ink path holds the ratio, because both poles are equally far away. The ink therefore flips polarity in a single frame, at the moment the two directions are exactly equal in contrast. It is the only discontinuity in the system and it is the best available one: the ratio never drops below the floor on either side of it.

Accessibility

• Reduced motion: gsap.matchMedia collapses the transition band to zero, so each section still gets its own correct palette and only the blend is dropped. Nothing is hidden and nothing is left mid-transition.
• No JavaScript: the :root defaults in style.css render the page in the first section's palette. Every section stays legible; only the journey is absent.
• Contrast: the guard enforces the configured minimum at every frame, not only at the endpoints. Set data-color-min-contrast="7" for AAA.
• Native UI: color-scheme is set from the live background luminance, so scrollbars, form controls and focus rings follow the page instead of standing out against it.
• Keyboard: the demo's links and buttons carry :focus-visible styles built from the same tokens, so focus is visible in every palette.

Performance Notes

• One ScrollTrigger for the whole container, not one per section.
• Token writes are skipped when the computed background is unchanged, so a stationary reader costs nothing.
• The per-frame colour maths is a handful of cube roots plus at most three short binary searches: microseconds, and no layout is read during the update.
• No element is transformed or repainted by the effect itself; only custom properties change.

Dependencies

• GSAP 3.15.0
• ScrollTrigger
• Lenis 1.3.17 (optional, for smooth scroll)