Aller au contenu principal

    We use cookies

    We use cookies to improve your experience. By continuing to browse, you accept their use.

    Learn more in our Cookies and Privacy

    shadcn/ui Theme

    Generate theme configurations for shadcn/ui. Use shadcn/ui Theme free online with no signup, fast results and secure browser-based processing.

    Base

    Primary

    Secondary

    Muted & Accent

    Destructive

    Borders & Input

    Preview

    Component preview

    Card content

    Muted text example

    @layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 4%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 4%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 4%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 0% 96%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 0% 9%;
    --radius: 0.5rem;
  }
}

    shadcn/ui Theme helps you work with colors directly in your browser.

    The tool is built for designers, developers and creators who need fast, reliable results.

    Supported formats

    CSS
    Tailwind
    HSL
    shadcn/ui

    How it works

    1

    Step 1

    Open shadcn/ui Theme

    2

    Step 2

    Enter or import your colors

    3

    Step 3

    Copy, export or reuse the result

    Common mistakes to avoid

    • Forgetting to check contrast can hurt readability.
    • Using too many colors can make a palette harder to apply.

    Pro tips

    • Keep your main colors as CSS variables.
    • Test your palette in both light and dark mode before publishing.

    Privacy guaranteed: everything is processed locally in your browser.

    Processing happens locally in your browser whenever possible. No account is required.

    shadcn/ui Theme for your color projects

    Generate theme configurations for shadcn/ui.

    shadcn/ui Theme without precision loss

    Conversions and calculations run on exact values (HEX, RGB, HSL, OKLCH). No visual approximation: you get the color true to your design intent.

    shadcn/ui Theme free online

    No signup, no software download required. shadcn/ui Theme is 100% free and works in any browser. The free plan includes 10 uses per day.

    shadcn/ui Theme fast and secure

    Processing happens directly in your browser for maximum speed. No data is sent to our servers: your colors and files stay private on your device.

    shadcn/ui Theme for sharing and collaboration

    Export your results as HEX, RGB, HSL, CSS, JSON or copy them in one click. Perfect for sharing a color guide with your team or documenting a design system.

    Discover all our Color tools

    Extract, convert, generate palettes, gradients and WCAG contrasts in a few clicks.

    See all tools

    Related tools

    Tailwind Palette
    CSS Variables
    UI Preview
    Color Contrast

    Guides and tutorials

    Learn how to use our tools with our detailed guides.

    shadcn-theme: practical developer guide

    Localized guide to use shadcn-theme, understand developer best practices and avoid common mistakes.

    shadcn-theme: practical developer guide

    Localized guide to use shadcn-theme, understand developer best practices and avoid common mistakes.

    shadcn-theme: practical developer guide

    Localized guide to use shadcn-theme, understand developer best practices and avoid common mistakes.

    Frequently asked questions

    Yes, the tool is available online for free.

    Processing happens in your browser whenever possible to protect your data.