Color + Harmony
Pick a color and tell it how you want the palette to feel. Nothing random, everything connected.
Open Source · WCAG Accessible · Pure
CSS · Try it now!
One color
A whole system
Pick a color, choose a harmony, and get a complete, WCAG accessible color palette for your app or design system.
hsl(154, 50% 30%)
var(--color-primary)
Monochromatic
Complementary
Triadic
Analogous
Why AlwanKit?
Everything a color system should be
One color is all you need. AlwanKit handles the palette, the contrast, the dark mode, and the export. You just build.
/001/
Accessible by default
Every color meets WCAG standards automatically.
/002/
One color
From your base color, AlwanKit derives your entire palette.
/003/
Just CSS
A color system with no JavaScript dependency.
/004/
Take it anywhere
Export in CSS, SCSS, Tailwind, or JSON. Or fork the source and make it yours.
How it works?
Simple by design
A clear set of performance metrics reflecting quality, reliability, and long-term collaboration.
/001/
Monochromatic
Complementary
Triadic
Analogous
/002/
Accessibility First
Every color is auto-adapted to meet WCAG standards as it's generated.
Aa
Pass
Aa
Fail
/003/
Light + Dark
Both themes are generated at once, calculated from the same base. Consistent, balanced, and ready.
Export
Export production ready code
Your developers will love the clean, tokenized output. Export to CSS, Tailwind, JSON, or SCSS with a single click.
variables.css
View more
:root {
--primary: hsl(200 75% 35%);
--on-primary: hsl(0 0% 100%);
--primary-container: hsl(200 65% 90%);
--on-primary-container: hsl(200 76% 10%); colors.scss
View more
$colors-light: (
"primary": hsl(200 75% 35%),
"on-primary": hsl(0 0% 100%),
"primary-container": hsl(200 65% 90%),
"on-primary-container": hsl(200 76% 10%), tokens.json
View more
{
"light": {
"primary": "hsl(200 75% 35%)",
"on-primary": "hsl(0 0% 100%)",
"primary-container": "hsl(200 65% 90%)",
"on-primary-container": "hsl(200 76% 10%)" tailwind.config
View more
darkMode: ["class", '[data-theme="dark"]'],
theme: {
extend: {
colors: {
"primary": "hsl(200 75% 35%)",
"on-primary": "hsl(0 0% 100%)", FAQ
Quick answers
Just the things you probably want to know.
Most tools give you a palette to look at. AlwanKit gives you a complete, production-ready color system, every role defined, dark mode included, accessible by default, exported as real code you can use immediately.
Absolutely. That's exactly the point, drop in your brand's primary color and AlwanKit builds a full system around it, keeping your identity while filling in everything else.
Yes. Every color is calculated to meet WCAG contrast standards automatically, light mode, dark mode, every role. You're not checking anything manually.
CSS, SCSS, Tailwind, and JSON. Pick the one your project already uses and drop it straight in.
Fully. The code is on GitHub, free to use in personal and commercial projects, fork it, modify it, self-host it, No restrictions.
One color away from
a full design system
Pick a color, let AlwanKit do the rest, and ship a color system you're actually proud of.