Live theming, no rebuild required

Your whole UI, recolored in a click.

ColorDrop builds a complete, accessible color system from Radix Colors, with dark mode, WCAG-checked contrast, and copy-paste CSS & Tailwind included. Try it right here: tap a palette and watch the app on the right repaint instantly.

Tap a palette to repaint everything

app.yourproduct.com

Good morning, Alex

Dashboard

Live

$48.2k

Revenue

+12.4%

8,914

Active users

+4.1%

3.8%

Conversions

+0.6%

Weekly traffic

Last 7 days

✦Theme Presets

Two dozen themes, one click away

Click any preset to apply it instantly across the whole app, then open the editor to make it yours.

Modern Minimal

Twitter

Amethyst Haze

Catppuccin

Kodama Grove

Quantum Rose

Elegant Luxury

Neo Brut

Modern Minimal

Twitter

Amethyst Haze

Catppuccin

Kodama Grove

Quantum Rose

Elegant Luxury

Neo Brut

Mocha Mousse

Notebook

Graphite

Cosmic Night

Nature

Amber Minimal

Solar Dusk

Pastel

Mocha Mousse

Notebook

Graphite

Cosmic Night

Nature

Amber Minimal

Solar Dusk

Pastel

Bubblegum

Doom 64

Perpetuity

Tangerine

Bold Tech

Supabase

Claymorphism

Clean Slate

Bubblegum

Doom 64

Perpetuity

Tangerine

Bold Tech

Supabase

Claymorphism

Clean Slate

Inbox

xAI Team

High

30 minutes ago

Grok 4 Release Notes

Excited to share the release notes for Grok 4. It includes new tools and improved performance. Let's discuss implementation in our next meeting.

releaseAIimportant

Elon Musk

4 hours ago

Re: AI Safety Concerns

Thanks for the update on AI safety. We need to prioritize this in our next sprint. I've added some notes to the document for your review.

safetyAIimportant

Close Friend

1 day ago

Catch Up Over Coffee?

Hey, it's been a while. How about grabbing coffee this weekend? I'd love to hear more about your work with AI and recent projects.

personal

HR Department

Urgent

3 days ago

Re: Annual Performance Review

Your annual performance review is scheduled for next week. Please prepare your self-assessment and any supporting materials.

xAI Team

Oct 29, 2025, 2:30:00 PM

Grok 4 Release Notes

Reply-To: xaiteam@example.com

Excited to share the release notes for Grok 4. It includes new tools and improved performance. Let's discuss implementation in our next meeting.

Best regards, xAI

Release Details

Grok 4 released on October 29, 2025. Check the documentation for more information.

✦Features

Everything you need to ship a design system

From a single color to a production-ready, accessible theme, ColorDrop handles the tedious parts so you can focus on the product.

Full semantic palette

Pick one color and ColorDrop generates the entire scale: canvas, primary, secondary, success, warning and more, with every step mapped for you.

Instant dark mode

Every theme ships with a perfectly tuned dark variant out of the box. No second pass, no guesswork. Just flip the switch.

Accessible by default

Built on Radix Colors, so contrast ratios meet WCAG guidelines automatically. Ship interfaces everyone can actually read.

Live, real-time preview

See your palette applied to real dashboards, cards, forms and buttons as you tweak it, exactly how it'll look in production.

Copy-paste export

Grab your theme as CSS variables, a Tailwind v4 layer or a v3 config in one click. OKLCH, HSL, RGB and HEX all supported.

One-click presets

Start from two dozen hand-tuned themes like Supabase, Catppuccin and Solar Dusk, then make them your own in seconds.

✦Testimonials

Loved by developers worldwide

See what the community is saying about colordrop

YiMing

@yiming_dev

Using v0, colordrop, and ChatGPT for graphics. Built a landing page in around 2 hours. It's amazingly easy nowadays.

Guillermo Rauch

@guillermo_r

If you want to learn full stack Next.js and how to build a product people love, look no further than colordrop. It's an open-source theme builder.

shadcn

@shad_dev

Finally, a custom theme from colordrop.

Kevin Kern

@kevin_k

colordrop is awesome. Generates custom shadcn themes instantly.

OrcDev

@orc_dev

Transform your Shadcn app with one click! Great concept with colordrop.

YiMing

@yiming_dev

Using v0, colordrop, and ChatGPT for graphics. Built a landing page in around 2 hours. It's amazingly easy nowadays.

Guillermo Rauch

@guillermo_r

If you want to learn full stack Next.js and how to build a product people love, look no further than colordrop. It's an open-source theme builder.

shadcn

@shad_dev

Finally, a custom theme from colordrop.

Kevin Kern

@kevin_k

colordrop is awesome. Generates custom shadcn themes instantly.

OrcDev

@orc_dev

Transform your Shadcn app with one click! Great concept with colordrop.

Ciara Wearen

@ciara_w

Create a Custom Theme: Makes your app look more intentional. Build color palette, typography, and layout preview with colordrop.com Grab the CSS and drop into your project for cohesive design.

Tanpreet Jolly 🌂

@tanpreet_j

I just tried colordrop and it's perfect. This is exactly what I needed, great work!

Code With Antonio

@antonio_c

There's an entire chapter dedicated to colordrop!! Such a cool project.

Emir

@emir_dev

Started using colordrop for client projects as well. It's a real game changer.

Matt Silverlock 🐀

@matt_s

Used this shadcn theme editor to make it less plain: colordrop.com

Ciara Wearen

@ciara_w

Create a Custom Theme: Makes your app look more intentional. Build color palette, typography, and layout preview with colordrop.com Grab the CSS and drop into your project for cohesive design.

Tanpreet Jolly 🌂

@tanpreet_j

I just tried colordrop and it's perfect. This is exactly what I needed, great work!

Code With Antonio

@antonio_c

There's an entire chapter dedicated to colordrop!! Such a cool project.

Emir

@emir_dev

Started using colordrop for client projects as well. It's a real game changer.

Matt Silverlock 🐀

@matt_s

Used this shadcn theme editor to make it less plain: colordrop.com

✦FAQs

Everything you need to know

Get answers to the most common questions about colordrop

Platform

What exactly is ColorDrop?

ColorDrop is a free, browser-based theme builder. You pick a few base colors and it generates a complete, accessible design system on top of Radix Colors, with light and dark modes included. There's nothing to install and no account required; open the editor and start designing.

Getting Started

How do I create my first theme?

Open the editor, choose a canvas and primary color (or start from a preset), and watch the live preview update instantly across dashboards, cards and forms. When it looks right, hit export and paste the generated tokens straight into your project. The whole flow takes a couple of minutes.

Integration

How do I use the theme in my project?

ColorDrop exports plain, framework-agnostic output you can drop anywhere:

• CSS custom properties for any stack
• A Tailwind v4 @theme layer
• A classic Tailwind v3 config
• OKLCH, HSL, RGB or HEX color formats

Copy, paste, ship. No runtime dependency on ColorDrop.

Accessibility

Are the themes accessible?

Yes. Every palette is built on the Radix Colors system, which is engineered around consistent contrast and perceptual uniformity. Text, surfaces and interactive states are mapped to steps that hold up against WCAG contrast guidelines, in both light and dark mode, without you having to check each pairing by hand.

Pricing

Is ColorDrop free and open source?

Completely. ColorDrop is free to use with no sign-up, and the full source is open on GitHub. Use it for personal projects, client work or commercial products, and contribute back if you'd like to.

🎨 Visit Colordrop to get started with theme customization.

Ready to ship a beautiful theme?

Design a complete, accessible theme in minutes and export it straight into your stack. Free, open source, no account needed.

Completely free. No account needed. 100% open source.