ShadcnUI

Shadcn Color Palette Generator

Create custom color palettes for your Shadcn projects. Select a base color and get instant, compatible CSS variables for your global styles.

How to use

  1. Select a primary color using the color picker or input a hex code.
  2. Preview your palette in both Light and Dark modes to ensure accessibility and aesthetic.
  3. Click the "Code" tab or the "Copy CSS" button.
  4. Paste the generated CSS into your app/globals.css file, replacing the existing:root and .dark variables.

Why use this generator?

Standard Shadcn themes are great, but sometimes you need a specific brand color. This tool automatically generates all the necessary derivative colors (secondary, accent, muted, border, ring) based on your primary selection, ensuring a cohesive and accessible design system instantly. It outputs standard CSS variables compatible with Tailwind CSS v4 and the latest Shadcn setup.