Pick a color, choose a harmony, and AlwanKit generates a complete, WCAG accessible color palette for your app or design system, covering every role, every state, light and dark mode. Pure CSS, zero JavaScript.

• Primary, secondary, tertiary colors with container and on-color variants
• Surface colors with five elevation levels
• Semantic colors: success, error, warning, info
• Light & dark mode both generated from the same base color
• 4 export formats: CSS, SCSS, Tailwind, JSON

1. Open the color picker and set your base color
2. Choose a harmony: complementary, triadic, analogous, or monochromatic
3. Preview your palette in light and dark mode
4. Export and drop it into your project

Everything runs on three CSS custom properties set at the :root level:

:root {
  --base-lightness: 0.55;
  --base-chroma: 0.18;
  --base-hue: 200;
}

From these, the entire palette is derived using oklch() and calc(), no JavaScript touches the colors at any point.

Harmony is handled via a [data-harmony] attribute on the root element. Each mode applies hue offsets to the secondary and tertiary colors:

:root[data-harmony="complementary"] {
  --secondary-offset: 180;
  --tertiary-offset: 150;
}

Dark mode is a [data-theme="dark"] attribute swap, the same custom properties are redefined with adjusted lightness and chroma values, so the entire theme flips with a single attribute change.

Accessibility is enforced through clamp(), lightness values are clamped within a safe range so contrast ratios never fall below WCAG minimums, regardless of what base color is picked.

--primary-l-max: clamp(
  0.25,
  calc(var(--base-lightness) - var(--primary-c) * 0.5),
  0.55
);

The result is a self-contained, fully dynamic color system that lives entirely in the CSS cascade.

// With Shades
[ui-slot="button"] {
  color: var(--color-primary-50);
  background-color: var(--color-primary-500);
}

// With Tokens
[ui-slot="button"] {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
}

No JavaScript means no bundle cost, no layout shift, no hydration issues. The entire system runs on CSS custom properties lightweight, stable, and works in every environment.

WCAG compliance is built into the generation logic. Every color is auto-adapted to meet contrast standards, you don't run checks, you don't tweak manually.

Visit alwankit.com.

Or clone and self-host:

git clone https://github.com/BadreddineIbril/alwan-kit.git

Free to use, fork, and ship in personal and commercial projects.