ColorRail: Accent Color Picker Demo

① What changes when you pick a color

Everything marked below uses var(--accent). Click a swatch and watch the smooth seam transition morph every element at once.

Seam transition: ColorRail briefly adds body.cr-color-changing: all accent-bound properties fade together (~0.85s). Include the transition block from colorrail.css on your site (see step ③).

stroke: var(--accent)

Brand accent in action

Logo stroke, borders, buttons and labels all bind to --accent. One click on the rail recolors the whole demo.

Current: #E1FF00

② More UI bound to the accent

border-top

Portfolio block

Top border and section labels follow the active accent.

headings

Feature box

Any element can reference the same CSS variable.

transitions

UI snippet

Smooth color morph, no reload, no server round-trip.

Buttons above: background: var(--accent) and border-color: var(--accent)

③ How to integrate

What you need on your site

CSS variable: e.g. --accent on every branded element (logo, borders, buttons, labels).
Seam transition (important): keep :root { --theme-transition: 0.85s ease; } and the body.cr-color-changing block from colorrail.css. Without it, colors snap instantly instead of morphing. ColorRail toggles the class automatically for ~0.9s on each pick.
Three files: colorrail.css, colorrail.js, plus the rail markup from rail-markup.html (not the whole demo page).
Boot + init: ColorRail.bootFromStorage() in the head (prevents flash), ColorRail.init() on DOM ready.

Copy-paste blocks live in rail-markup.html. Full steps and config: README_EN.md / README_DE.md. This page is the live showroom — sections ①②④ are demo only.

④ Rail states: closed vs. open

Try the live rail in the header next to the title. Below: static preview of both states.

Closed

Only the pulsing core dot is visible.

Open

Swatches fan out. Click one to apply the accent.