[nekomeowww]

Summary

Blue / cyan shades looked heavy and dull. The cause was in how shades are derived: each shade has a fixed OKLCH lightness, chroma follows 0.18 + 0.04 · cos(hue), and anything past the sRGB gamut is channel-clipped. Cyan / sky only reach high chroma at high lightness, so ~49% of hues at shade 500 were out of sRGB and clipped into darker colours.

This PR adds a fitted colour model and makes it the default (model: 'classic' keeps the previous colours):

• Lightness, chroma and a small hue drift vary smoothly with hue. They are fitted by least squares to the Tailwind CSS v4 palette.
• Chroma is fitted in two stages: first the share of the sRGB max that Tailwind uses (smooth, 3 harmonics), then share × exact sRGB max refitted per shade with 12 harmonics. This keeps cyan / sky 400–500 vivid, e.g. hue 222.69° shade 400 goes from #23c8ec to #00caf0 (Tailwind ≈ #00c7fb).
• Around yellow (105° ± 40°) the fit targets 82% / 95% of sRGB instead of Tailwind, so light yellows do not turn neon.
• ΔE (OKLab × 100) against Tailwind v4: RMS 1.63, leave-one-family-out RMS 2.11. The classic model is at 5.80.

Packages

• @proj-airi/chromatic: fittedOklch, FITTED_MODEL, and a model option on chromaticColorFrom / chromaticPaletteFrom / themeFrom / colorBy / chromaticFrom. Coefficients are generated by pnpm generate:fitted from the playground fit. --check verifies they are up to date.
• @proj-airi/unocss-preset-chromatic: a model option. With fitted, the preflight emits per colour a shared cos(k·h) / sin(k·h) basis and per-shade lightness / chroma / hue-drift custom properties. Baked colours use the core values. Modifiers (~, *) keep working. The preset now depends on @proj-airi/chromatic.
• Playground: vue-router with the docs at / and a "chroma lab" at /lab (lazy loaded; three.js views only animate while on screen). The lab has chroma / lightness by hue and shade, residual heatmaps, a 3D surface, side-by-side palettes, ΔE against Tailwind with cross-validation, a live fit with controls, and TS / CSS export. Sliders are copied from moeru-ai/airi packages/ui (range / field-range, MIT, attributed in the files).

Breaking changes

• The default model is now fitted, so every colour changes slightly. Shades 50 / 100 are no longer mixed with white.
• fitted does not emit --chromatic-chroma / --chromatic-chroma-<shade>. Code that reads them directly should switch to utilities with ~ / * modifiers, or to chromaticColorFrom(hue, { shade, saturation, brightness }). It can also pass model: 'classic'.
• Suggest releasing as 2.0.0.

Notes

• With fitted, lightness and chroma are computed from --chromatic-hue on :root. A subtree override of --chromatic-hue rotates the hue but keeps the root's lightness and chroma, which is what classic already did for chroma.

• CSS size per colour: ~17 KB raw / 2.4 KB gzip.

• Style recalc per hue change with 5000 elements (median of 5):

  	classic	fitted
  2 colours, Chrome desktop	6.7 ms	10.1 ms
  2 colours, iOS Simulator Safari	8 ms	9 ms
  2 colours, Android emulator Chrome	2.2 ms	2.5 ms
  14 colours, Android emulator Chrome	2.5 ms	9.9 ms

  Simulators run on the host CPU. Real devices are not measured yet.

• Registering the variables with @property helped on WebKit but not on Blink, so it is not used.

• Longest substituted utility colour is 2.3 KB, ~900× below Chrome's ~2 MB var() substitution limit.

Test plan

• pnpm lint, pnpm typecheck, pnpm build
• pnpm test:run: 26 tests pass.
  • Classic tests are unchanged and pinned to model: 'classic'.
  • New tests evaluate the generated preflight CSS and compare it with fittedOklch for 3 colours × 5 hues × 11 shades.
• pnpm generate:fitted --check
• Rendered in Chrome, iOS Simulator Safari and Android emulator Chrome. Computed colours match the core values (max RGB difference 0).
• Measure style recalc on a real phone.

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for proj-airi-chromatic ready!

Name	Link
🔨 Latest commit	b1d23bc
🔍 Latest deploy log	https://app.netlify.com/projects/proj-airi-chromatic/deploys/6ae10de1cb6d7ffdfcf404c6
😎 Deploy Preview	https://deploy-preview-6--proj-airi-chromatic.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[nekomeowww]

Split into a stack for easier review:

1. chore(deps): add vue-router to the playground #7 chore(deps): add vue-router to the playground
2. feat: versioned colour models, v2 (Tailwind v4 fit) as the new default #8 feat: fitted colour model (Tailwind v4 fit) as the new default (stacked on chore(deps): add vue-router to the playground #7)
3. feat(playground): chroma lab on its own route #9 feat(playground): chroma lab on its own route (stacked on feat: versioned colour models, v2 (Tailwind v4 fit) as the new default #8)

The final tree of #9 is identical to this PR plus the route split and moving the fit to scripts/fitted/.