Palettes
The chameleon contract: every palette is a triple — --c-bg (background, largest area), --c-mid (the bulk of the form), and --c-acc (the brightest hit). Switch palettes below to repaint the live panel from those three variables.
Live switcher
Drive Sales
+218%lift
One palette, three roles. The chameleon contract repaints every element from the same three variables — background, mid, accent.
Drive Sales.pal-drive-sales
--c-bgoklch(0.70 0.235 144)
--c-midoklch(0.55 0.140 134)
--c-accoklch(0 0 0)
All palettes
Drive Sales.pal-drive-sales
--c-bgoklch(0.70 0.235 144)
--c-midoklch(0.55 0.140 134)
--c-accoklch(0 0 0)
Acquire Users.pal-acquire-users
--c-bgoklch(0.05 0.005 270)
--c-midoklch(0.55 0.270 290)
--c-accoklch(0.62 0.260 26)
Build Brand.pal-build-brand
--c-bgoklch(0.35 0.215 265)
--c-midoklch(0.72 0.085 80)
--c-accoklch(0.58 0.220 26)
Boost Engagement.pal-boost-engagement
--c-bgoklch(0.58 0.245 254)
--c-midoklch(0.18 0 0)
--c-accoklch(0.94 0.195 100)
Monetize.pal-monetize
--c-bgoklch(0.28 0.085 14)
--c-midoklch(0.66 0.245 24)
--c-accoklch(0.74 0.195 48)
Reach.pal-reach
--c-bgoklch(0.28 0.110 260)
--c-midoklch(0.62 0.190 245)
--c-accoklch(0.82 0.075 245)
Interaction.pal-interaction
--c-bgoklch(0.41 0.130 47)
--c-midoklch(0.77 0.190 72)
--c-accoklch(0.92 0.115 92)
Reward.pal-reward
--c-bgoklch(0.31 0.066 165)
--c-midoklch(0.51 0.160 145)
--c-accoklch(0.83 0.090 145)
Note: on real surfaces the rail owns the backgrounds (the neutral doc/deck/dashboard surface tokens). Palettes supply only the --c-mid and --c-acc accents that ride on top — charts, highlights, and calls to action.