chromatic

[Try it]

🎨 Readability enhanced, clean, nice looking colors palette we used across our Project AIRI projects! You could think of it as a alternative of https://www.radix-ui.com/colors/custom

Note

This project is part of (and also associate to) the Project AIRI, we aim to build a LLM-driven VTuber like Neuro-sama (subscribe if you didn't!) if you are interested in, please do give it a try on live demo.

We use both DuckDB WASM and PGLite for the backbone implementation for memory layer as embedded databases that capable of doing vector search to power up bionic memory systems for AI VTuber and cyber livings. We shared a lot in our DevLogs in DevLog @ 2025.04.06, please read it if you are interested in!

Who are we?

We are a group of currently non-funded talented people made up with computer scientists, experts in multi-modal fields, designers, product managers, and popular open source contributors who loves the goal of where we are heading now.

Getting Started

ni -D @proj-airi/unocss-preset-chromatic # from @antfu/ni, can be installed via `npm i -g @antfu/ni`
pnpm i -D @proj-airi/unocss-preset-chromatic
yarn i -D @proj-airi/unocss-preset-chromatic
npm i -D @proj-airi/unocss-preset-chromatic

// unocss.config.ts
import { presetChromatic } from '@proj-airi/unocss-preset-chromatic'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetChromatic(),
  ],
})

Color models

Shades are derived from a hue by a versioned color model, chosen with the model option (v2 by default). A released version never changes its colors; an improved fit ships as a new version.

• v2: lightness, chroma and a small hue drift all vary smoothly with hue. They are fitted to the Tailwind CSS v4 palette, except around yellow, where the fit targets a share of the sRGB gamut so that light shades do not turn neon.
• v1: each shade has a fixed OKLCH lightness, and the chroma is 0.18 + 0.04 · cos(hue) scaled per shade. This is the model of chromatic 1.x; pass model: 'v1' to keep those colors.

presetChromatic({
  baseHue: 220.25,
  colors: { primary: 0 },
  model: 'v1', // keep the colors of chromatic 1.x
})

import { chromaticColorFrom, themeFrom } from '@proj-airi/chromatic'

chromaticColorFrom(220.25, { shade: 500 }).toHex() // v2
chromaticColorFrom(220.25, { model: 'v1', shade: 500 }).toHex()
themeFrom(220.25, { accent: 180, primary: 0 }, { model: 'v1' })

With v2, the preset computes lightness and chroma from --chromatic-hue on :root. If you override --chromatic-hue on a subtree, the hue still rotates there, but lightness and chroma stay the ones of the root. v1 already behaves like this for chroma.

To use the colors in your own CSS, --at-apply / @apply and theme() of transformerDirectives both work, e.g. background: theme('colors.primary.400') or theme('colors.primary.400 / 50%'). The preset adds an explicit opacity to theme() calls of its colors that have none, so they do not leave the opacity placeholder behind.

Development

pnpm dev

The playground's chroma lab (pnpm dev, then open /lab) visualizes both models and runs the fit interactively. The v2 coefficients are a least-squares fit of the Tailwind CSS v4 palette, generated by scripts/fitted/:

pnpm generate:fitted          # regenerate packages/chromatic/src/model-v2.ts
pnpm generate:fitted --check  # fail when the committed coefficients are out of date

Build

pnpm build

More UnoCSS and UI stuff we made for Project AIRI

• proj-airi/lobe-icons: Iconify port of @lobehub's wonderful lobe-icons assets

Acknowledgements

• All the contributors of Project AIRI who tried to improve the custom color theme system.

License

MIT