Tailwind hand-tunes its ramps; Material 3 generates them with Google’s HCT model; Rhapsody computes them from a perceptual model called ART. We gave all three the same indigo — #6366F1, which happens to be Tailwind’s indigo-500 and Material’s tone-50 — and measured the result in OKLab.
Evenness is the variation in step size (lower = more uniform). Hue drift is how far the hue wanders across the chromatic tones (lower = more stable). Both measured in OKLab; drift over tones with chroma ≥ 0.05.
| Tailwind | Material 3 | Rhapsody | |
|---|---|---|---|
| Perceptually-even steps | ✗ | ~ | ✓ |
| Hue holds across the ramp | ✗ | ✗ | ✓ |
| Accessibility built in — WCAG + APCA | ✗ | ~ | ✓ |
| Light + dark on true off-white / off-black | ✗ | ~ | ✓ |
| One brand color in → full system out | ✗ | ✓ | ✓ |
| Computed from math, repeatable | ✗ | ✓ | ✓ |
| Utilities: error / success / warning / info | ~ | ~ | ✓ |
| Export to Figma vars, JSON & CSV | ~ | ~ | ✓ |
Fair play: Material 3 is genuinely perceptual (HCT), generated from one color, and contrast-aware — it earns its checks. But HCT holds a CAM16 hue, which diverges from a perceptual hue for indigo and blue (hence its drift), and its tonal extremes are pure black and white rather than crafted off-white/off-black. Rhapsody’s measured edge is even spacing, hue stability, and dual-standard accessibility.
Bring any brand color — Rhapsody builds the whole system, measured and accessible, light and dark.