Kromatika. An elegant color palette for user interfaces. Sixteen scales of ten shades, with contrast data and a semantic light and dark theme, in every format you are likely to need.

About

Kromatika started as a palette for my own products and became a small open source package, on GitHub and npm. Every scale runs from 50 to 900 on the same OKLCH lightness curve, with hand-picked hues left alone, so the same shade number means the same thing everywhere and swapping an accent color is a one-line change instead of a redesign. Click any swatch above to copy it.

What is in the box

• Every format. CSS variables, SCSS, LESS, Stylus, YAML, JSON, JavaScript with types, Tailwind CSS v3 and v4, and W3C Design Tokens for Figma Variables and Style Dictionary.
• Contrast data. For every shade, the WCAG contrast against white and black and the text color that passes best, as --kr-on-* variables and an on export in JavaScript. The full table is in CONTRAST.md.
• A semantic theme. theme.css maps background, foreground, muted, border, accent, success, warning and danger onto the palette and follows the system theme, so a project can start with a palette that already works.

Install

npm install kromatika

@import "kromatika/colors.css";
@import "kromatika/theme.css";

import { colors, on } from "kromatika";

colors.blueBerry[500]; // "#4f6de8"
on.blueBerry[500];     // "#ffffff"