ColorCN is a web app that helps you generate, customize, and export color themes for projects built with shadcn/ui and Tailwind CSS v4. It makes working with design systems faster by letting you visually create color palettes and instantly convert them into production‑ready Tailwind + shadcn theme code.
Make sure your project uses:
- Tailwind CSS
- shadcn/ui
- CSS variables enabled
- Open ColorCN in your browser
- Customize your colors (primary, secondary, background, foreground, etc.)
- Preview the theme live
- Export the generated code
- Paste the code into your project (usually
globals.css)
ColorCN generates:
- CSS variables for light and dark mode
- OKLCH-based color values for accurate and future-proof color theming
- Tailwind-compatible color tokens
- shadcn/ui-ready theme structure
Example output:
:root {
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
}
.dark {
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
}- React / Next.js (if applicable)
- Tailwind CSS
- shadcn/ui
- TypeScript (optional)
Designing consistent color themes for shadcn + Tailwind can be tedious and error‑prone. ColorCN removes the guesswork by giving you a visual, developer‑friendly workflow that bridges design and code.
Contributions are very welcome! 🙌 Whether it's fixing bugs, improving the UI, adding features, or refining documentation — every contribution helps.
- Fork the repository
- Create a new branch (
git checkout -b feature/your-feature) - Commit your changes
- Push to your fork
- Open a pull request