Kigen Color
Tailwind-shaped 50-950 color ramps with CSS, token and Figma export
Tier B · UsefulColor ToolGeneratorToolkigen.design
Kigen Color generates a full 11-step shade ramp (50 through 950) from a seed color using Tailwind's scaling approach, with an adjustable shade count and a contrast-shift control for tuning how fast the ramp darkens. Output copies out as CSS custom properties, Tailwind v3 and Tailwind v4 theme config, or raw HEX, RGBA, HSL and OKLCH values, and can be pushed into Figma as styles or variables. It is one part of Kigen, a Figma design-system starter plugin by realvjy of Overlayz Studio, which also ships a Design System kit and a work-in-progress Type Scale tool. It is aimed at people bootstrapping a design system who want a Tailwind-native palette in both code and Figma without hand-writing eleven hex values.
For an agent
Reach for this when a project needs a Tailwind-style 50-950 ramp that must exist identically in code and in Figma — its Tailwind v4 export drops straight into an @theme block, which ColorKit does not do. Prefer it over hand-generating shades with a lightness formula, because its contrast-shift control avoids the washed-out 100-200 steps naive interpolation produces. It publishes no contrast/WCAG verdicts, so pair it with a contrast checker before you commit a text-on-surface pair, and note the palette lives in the browser only — there is no API you can call.
Why it is here. Closes the usual gap between a designer's Figma variables and a developer's Tailwind theme by emitting both from one ramp.
Facts
- License
- Unknown
- Pricing
- Freemium
- Framework
- Not applicable
- Styling
- Tailwind CSS v4, Tailwind CSS v3, CSS custom properties
- Distribution
- Web app / online tool, Figma plugin
- Platform
- Web
- Content type
- Design tokens / theme files, Figma / design source files
- Agent readiness
- Exports design tokens, Copy-paste ready code
- Accessibility
- Unknown
- Maturity
- Actively maintained
- Pricing detail
- Free web tool and free Figma plugin; a paid 'Kigen Pro' license exists (price not published on the site)
Notable for
- 11-step 50-950 Tailwind ramps
- Tailwind v4 @theme export
- OKLCH output
- Figma styles and variables export
- 25k+ Figma plugin usages
Provenance
Verified 2026-08-15. HTTP 200. https://kigen.design/color, https://kigen.design/
Also in Color
6- Coolors · Palette generator with 10M+ schemes, contrast checker and Tailwind export
- Grabient · Cosine-gradient generator; CSS/SVG/PNG export and a real llms.txt
- Leonardo · Adobe's contrast-first colour system generator, with an npm module behind it
- OKLCH Color Picker · Pick and convert colors in OKLCH with P3 and Rec2020 gamut warnings
- Color Hunt · ~4,200 curated 4-colour palettes, filterable by 18 colours and 31 moods
- Huemint · ML palette generator driven by a contrast matrix, with an open POST API