Iroshiki - Indexed Palettes For The Web
The Name
色 | Iro = "Color", used euphemistically for type, timbre, mood, and beauty as in beautiful women.
式 | Shiki = "Method", collides with "system," "formula," "equation," as in English, in addition to "function" and just so happens to also collide with "ceremony," "event," "celebration," ie "party" (including Weddings!)
So - take your pick! There's homophony and semantic collision to play with. "Color System" was the intention, but it can also mean "mood ritual" and "sexy party" which is what a colour system should be!
What does it do?
Iroshiki transforms a 16-item indexed color palette (based on the ANSI escape codes for colouring terminal output) into ~140 CSS variables for use in modern web colour systems.
It also adds convenient aliases for those colors:
--error-400: var(--color1-400);--base: var(--surface-200);
It also overrides default tailwind colors, so you can instantly drop it in to your ShadCN/Custom component library using Tailwind.
Public Classic Themes
Includes Nord and Catppuccin out of the box.
Custom Themes
I wrote some custom indices, some inspired by Lospec, and some pulled from digital art.
ANSI Themes
ANSI themes are consistently semantically indexed - --color1 can always be used to mean "error," but might not always be red. You can easily drop an ANSI theme to an existing Tailwind project and have a good time.
Ink Themes
Ink themes are experimental 1-bit-like colour combinations - most combinations produce remarkably low contrast, not a drop in replacement into a Tailwind project.
Installation
git clone https://github.com/mackenziebowes/iroshiki.git ~/your-install-hereUsage
Sibling Projects
Built for https://github.com/mackenziebowes/deko-client-solid
Works with Tailwind!
This project was created using bun init in bun v1.2.16. Bun is a fast all-in-one JavaScript runtime.