Kigen Palette Generator

Color-palette and design-token generator by Vijay Verma (realvjy / Overlayz Studio): turns one base color into a full shade ramp and exports to CSS, Tailwind, design tokens, and OKLCH. Part of the broader Kigen design-system generator (web + Figma plugin) at kigen.design.

What It Is

Kigen is a design-system generator by Vijay Verma (realvjy) under Overlayz Studio. Its web Color Generator (kigen.design/color) expands a single base color into a full shade ramp (default 50–950, 11 shades) with controls for algorithm (e.g. Tailwind CSS), contrast shift, naming pattern, and shade count; the spacebar regenerates. Source: Kigen, https://kigen.design/color, 2026-06-13

Output exports to CSS, Tailwind, Tailwind 4, and design tokens, in HEX, RGBA, HSL, and OKLCH, plus SVG/Figma. Ramps can be seeded from 13 built-in libraries — Tailwind, Material, Fluent, Radix UI, Atlassian, Polaris, Uber Base, Frames X, Ant Design, Open Color, Untitled UI, Carbon, and Bootstrap. Source: Kigen, https://kigen.design/color, 2026-06-13

The companion Figma plugin generates full design-system foundations — colors, typography, spacing, radii, tokens, and in-file documentation — with light/dark dual mode. Source: Figma Community, https://www.figma.com/community/plugin/1499119094608975695, 2026-06-13

The web color generator is free and browser-based — no Figma account needed to pull a Tailwind or OKLCH ramp — and Kigen is an independent Overlayz Studio project, not affiliated with Figma. Source: Kigen, https://kigen.design/color, 2026-06-13

Local Artifact Review

The bookmark video demonstrates Kigen as a token-generation workbench, not just a swatch picker. It shows RGB sliders, Tailwind CSS algorithm selection, contrast-shift adjustment, naming pattern 50,100...900, shade-count changes, SVG/Figma export, SVG download, and output tabs for CSS, Tailwind, Tokens, HEX, RGBA, HSL, and OKLCH. Source: X/@Abmankendrick visual artifact, 2026-03-07

The live page still exposes the same core controls as of 2026-07-01: algorithm, contrast shift, naming pattern, shade count, SVG/Figma and SVG exports, CSS/Tailwind/Tailwind 4/Tokens outputs, and HEX/RGBA/HSL/OKLCH formats. It also links the broader Kigen Design System product, Figma plugin, color generator, and work-in-progress type scale. Source: Kigen Color Generator, 2026-07-01

Stack fit (Kevin)

• Direct Tailwind / Tailwind 4 / token export means a Kigen ramp drops into Kevin's tailwind.config + cn() workflow without manual transcription. See Design Tokens.
• Native OKLCH output reconciles the older "prefer OKLCH over generators" note — Kigen emits perceptually-spaced ramps directly; pair it with the Frontend and Design Skills and OKLCH in Production for gamut/contrast checks rather than treating them as either/or.
• Seeding from Radix / Untitled UI / Material libraries is useful for matching an existing Design System palette quickly during ideation.
• Sits with the broader set in Color Palette & Gradient Tools; the Figma plugin extends it from "palette tool" to full DS-foundation generator.
• Free + browser-based fits a quick ideation pass without leaving the browser; reach for the plugin only when scaffolding a full Figma DS.

---

Timeline

• 2026-07-01 | Deep-reviewed the local Kigen video artifact and live color page. Confirmed the control surface: Tailwind algorithm, contrast shift, shade count, naming pattern, SVG/Figma export, CSS/Tailwind/Tailwind 4/Tokens output, and OKLCH format. Hosted reference; no public package version to pin. Source: X/@Abmankendrick, 2026-03-07; https://kigen.design/color
• 2026-06-13 | Quality remediation: documented real capabilities — shade-ramp generation, CSS/Tailwind/token + HEX/RGBA/HSL/OKLCH export, 13 source libraries, and the Figma DS-generator plugin by Vijay Verma (Overlayz Studio). Source: https://kigen.design/color
• 2026-05-30 | The same curator (@Abmankendrick) shared Happy Hues, which previews palettes on real website examples rather than swatches. Source: X/@Abmankendrick, 2026-05-30
• 2026-03-07 | Surfaced via @Abmankendrick: "UI/UX Designers, this might be one of the cleanest color palette generators I've seen lately. Kigen..." (3,779 likes, 5,524 bookmarks). Source: X/@Abmankendrick, 2026-03-07