Color spaces
Interpolating a color means walking a straight line between two points - but which space you draw that line in decides what the midpoints look like. In sRGB the channels are mixed numerically, which is why complementary colors pass through a desaturated grey on the way. OKLab is built so that equal steps look like equal steps, so the same journey keeps its chroma the whole way across.
sRGB and OKLab side by side
sRGB is the default, matching Framer Motion. Opt into the perceptual space per transition
with colorSpace: BmColorSpace.Oklab, or for a whole subtree with
<BmotionConfig ColorSpace="BmColorSpace.Oklab">. The pairs below run the
same transition over the same 1.6 s - watch the middle of each run, not the endpoints,
which are identical by definition.
When it matters
Not every transition needs it. The two colors have to be far enough apart for the midpoint to be visible at all, so the difference is obvious on opposites - blue to yellow, red to green - and invisible between two neighbouring blues. The cost is a per-frame conversion, so the sensible default is what Bmotion does: sRGB unless you ask, and OKLab where the midpoints are actually on screen long enough to be seen.
- Reach for OKLab when a slow transition crosses the color wheel, or when a hue animates through a keyframe palette.
- Leave it at sRGB for short state changes, hover tints, and any pair of nearby colors.
- Set it globally on
BmotionConfigwhen a whole surface should behave consistently rather than deciding per animation.