Scroll Colour Shift
A scroll-linked palette system: each section declares its colours and the page background, text, rules and accents transition together as you scroll, with text contrast guaranteed at every point of the blend.
About This Effect
A scroll-driven colour journey for long pages. Each section carries three data attributes for its background, ink and accent, and a single ScrollTrigger interpolates between neighbouring palettes in Oklab as the boundary crosses the viewport, writing the result into CSS custom properties that the whole page reads.
Read the full effect overview
The hard part is the middle of the transition. Cross-fading a light section into a dark one moves the background and the text toward each other, and halfway across they meet as grey on grey. This effect measures the WCAG contrast ratio on every frame and corrects the ink's lightness until the ratio holds, so the type stays readable at the exact moment a naive version disappears.
What's Included
- Declarative per-section palettes: data-color-bg, data-color-ink and data-color-accent, with ink and accent optional
- Seven CSS custom properties written live, covering background, ink, secondary ink, accent, on-accent label, rules and surfaces
- Contrast guard holds a configurable minimum ratio (default 4.5:1) at every frame, including the midpoint of a light-to-dark crossing
- Oklab interpolation keeps the midpoint of two saturated colours on the line a designer would draw, instead of dragging it through grey
- Adjustable reference line so a tall sticky header always shows the palette of whatever sits directly beneath it
- Position-derived state: flick-scrolling, hash jumps and reverse scrolling all land on exactly the right colour
- Optional live contrast readout and palette position markers driven from the same state
- Native scrollbars and form controls follow the ground automatically through color-scheme
- Reduced motion keeps every section's colours correct and drops only the blend
- Lenis integration on the shared GSAP ticker, with a full teardown of tickers, listeners and ScrollTriggers
Perfect For
- Long-form landing pages that need a designed colour journey rather than one flat ground
- Product stories where each chapter owns a mood and the chrome has to follow it
- Brand and studio sites moving between light and dark sections without a jarring cut
- Editorial features and scrollytelling pieces with per-chapter colourways
- Documentation-heavy pages where an accessible minimum contrast is non-negotiable
- Design system demos showing tokens re-theming a page in real time
How It Works
Every element carrying data-color-palette is read once at init and its declared colours are converted into Oklab. A single ScrollTrigger spanning the container calls one render function on update, which derives the colour state purely from the scroll position: it finds which boundary is currently inside the transition band, computes a smoothstepped mix of the two neighbouring palettes, and derives the seven tokens from that mix.
Each text-bearing token then passes through a contrast guard. It converts the candidate ink and background to WCAG relative luminance, and when the ratio falls short it binary-searches the ink's Oklab lightness toward whichever pole can reach the target, changing lightness only as far as needed and leaving hue and chroma alone. The tokens are written with setProperty on the document element, so the background, headings, body copy, rules, buttons and the sticky header all move together.
gsap.matchMedia collapses the transition band to zero under prefers-reduced-motion, which turns the same render function into a per-section step change, and cleanup kills the ScrollTrigger, removes the Lenis ticker and refresh listener, and clears the color-scheme override.