Tailwind Palette Generator
Bridge tradition and utility.
Generate a full Tailwind CSS color scale from any traditional Japanese color.
Base Color
Used in code: bg-nadeshiko-500
Output Format
@theme {
--color-nadeshiko-50: #F9F3F5;
--color-nadeshiko-100: #F6E9ED;
--color-nadeshiko-200: #F0D6DF;
--color-nadeshiko-300: #EAC4D0;
--color-nadeshiko-400: #E3B1C2;
--color-nadeshiko-500: #DC9FB4;
--color-nadeshiko-600: #AE7F8F;
--color-nadeshiko-700: #82616C;
--color-nadeshiko-800: #59444B;
--color-nadeshiko-900: #33292C;
--color-nadeshiko-950: #211C1E;
}Quick Select: Traditional Colors
Primary Card
Use the 500 shade for primary backgrounds. It balances visibility and vibrancy.
Subtle Card
Use 50 for backgrounds, 200 for borders, and 900 for text to create hierarchy.
About the Tool
This tool bridges the gap between traditional aesthetics and modern development workflows. By calculating scientifically balanced shades (50-950) based on your chosen color, it allows you to immediately use "Kasane" colors in your Tailwind CSS projects without manual tweaking.
Core Capabilities
- • LCH-based Scaling Uses the LCH (Lightness, Chroma, Hue) color space to generate smooth, perceptually uniform gradients that remain vibrant even in lighter shades.
- • Instant Config Export Generates a ready-to-paste `theme.extend.colors` object for your `tailwind.config.js`, saving you from tedious formatting.
- • Traditional Inspiration Randomly suggests authentic Japanese colors (Traditional Colors) to help you break away from standard color schemes.
- • Real-time UI Preview Visualize how your generated palette looks on buttons, cards, and alerts instantly before copying the code.
Workflow
- 01. Pick a Color
Choose a base color using the picker, enter a hex code, or click a random traditional color preset.
- 02. Name It
Define a variable name (e.g., 'primary', 'sakura'). This will be the class name prefix in your code (e.g., `bg-sakura-500`).
- 03. Verify
Check the "Generated Scale" and "Component Preview" to ensure the contrast and vibe match your needs.
- 04. Copy & Paste
Click "Copy" on the code block and paste it directly into your project's `tailwind.config.js`.
Our Focus
"Utility meets Tradition. We use the LCH color space to generate gradients that remain vibrant and natural, ensuring your UI looks professional while retaining the soul of Japanese colors."