Themes

Theme builder

One seed colour in, eleven perceptually even steps out. This runs the same engine the build does — nothing here is a mock-up.

Brand colour

50100200300400500600700800900950

Live preview

BadgeSoft

Tones stay put

Danger, success and warning are their own ramps — only the accent follows the brand.

Card

Surfaces and borders come from the neutral ramp.

Paste this into your CSS

:root {
  /* Generated from #6D4AFF */
  --noksha-accent-solid: oklch(0.541 0.2562 283.66);
  --noksha-accent-solid-hover: oklch(0.491 0.2386 283.66);
  --noksha-accent-solid-active: oklch(0.432 0.206 283.66);
  --noksha-accent-subtle: oklch(0.936 0.0323 283.66);
  --noksha-accent-subtle-hover: oklch(0.885 0.0587 283.66);
  --noksha-accent-fg: oklch(0.491 0.2386 283.66);
}

Or skip the slots entirely and set --noksha-brand to your seed — the build derives all of the above from it.