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
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
Acknowledgements
- All the contributors of Project AIRI who tried to improve the custom color theme system.
License
MIT
评论