Theme Lab
Build WCAG-safe shadcn/ui themes in OKLCH and export them instantly.
Tagline
Build shadcn themes in minutes
The shadcn/ui theme factory for OKLCH-first systems
Stop hand-tuning tokens. Ship accessible themes fast
One brand color to WCAG-safe light and dark themes
The shadcn/ui theme factory for OKLCH-first design systems.
The product is explicitly built around shadcn/ui and OKLCH, so leading with category ownership is credible and differentiating versus generic palette generators.
The fastest alternative to hand-tuning Tailwind tokens and chasing contrast issues.
The page emphasizes speed, WCAG enforcement, and ready-to-paste exports, which positions it as a replacement for manual theme debugging in code.
Stop fighting hex codes: generate accessible light/dark themes from one brand color.
This is the strongest pain-killer angle because the page directly attacks hex-based color tweaking, accessibility guesswork, and light/dark inconsistency.
Primary user
Frontend developer building with shadcn/ui who needs to turn a brand color into a production-ready theme fast
ICP #1
Indie SaaS founder using shadcn/ui for an MVP
Pain
They need a decent-looking branded UI now, but hand-tuning OKLCH values, dark mode, and contrast ratios burns hours they should spend shipping.
Why this solves
Theme Lab compresses that setup into one flow: choose a brand color, generate with AI, validate contrast, and paste the exported CSS straight into the app.
ICP #2
Frontend engineer at a small product team using Tailwind and shadcn/ui
Pain
They’re stuck translating brand direction into a cohesive token set across light and dark modes without breaking accessibility or previewing everything component by component.
Why this solves
The live preview, token-level OKLCH controls, and WCAG enforcement make the theme deterministic instead of trial-and-error.
ICP #3
Freelance UI/UX designer delivering design systems for developer handoff
Pain
They need to produce theme tokens clients can actually implement, but most color tools stop at pretty palettes and don’t export in developer-friendly formats.
Why this solves
Theme Lab exports to Tailwind config, design tokens, and theme.json, which fits real handoff workflows instead of just screenshots.
Strengths
- +The value prop is instantly legible: shadcn/ui, OKLCH, AI generation, WCAG, export.
- +The feature list maps cleanly to developer workflow, especially the ready-to-paste outputs.
- +The copy is specific enough to attract technical buyers who know why OKLCH and WCAG matter.
Weaknesses
- −It reads more like a feature checklist than a persuasive product story; there is no stronger before/after transformation.
- −The page doesn’t show the actual builder UI, so users can’t see how much control they really get over tokens and previews.
- −There’s no proof: no screenshots of exported code, no example themes, no testimonials, no usage numbers, no trust signals.
- −The positioning is a bit narrow and may undersell broader use cases like design token generation for Tailwind or WordPress.
- −The CTA is generic and repeated, but there’s no compelling reason to start now versus later.
Fix these
- Add a hero screenshot or short demo GIF showing the palette builder, contrast checks, and export output.
- Show a concrete example: brand prompt in, theme tokens out, with before/after light and dark previews.
- Create a comparison section against manual shadcn theme editing and generic color tools like Coolors or Adobe Color.
- Add one or two case-study style examples for solo founders, agencies, or frontend teams.
- Make the export formats and handoff story more prominent, since that is the clearest monetizable workflow.
Drop-in replacement copy
Headline
Build shadcn themes in minutes
Generate WCAG-safe OKLCH palettes and export code you can paste today.
Go from brand color to usable theme
Start with one OKLCH brand color and generate a full light/dark shadcn/ui palette. Theme Lab handles the boring setup so you can ship faster.
Ship themes that pass contrast
WCAG checks run automatically and nudge foreground colors to AA or AAA. That means fewer accessibility surprises after you push to production.
See the theme on real UI
Preview cards, buttons, charts, alerts, and forms before you export anything. You catch ugly edge cases while you still have room to fix them.
Export in the format your stack needs
Download index.css, Tailwind config, W3C Design Tokens, or WordPress theme.json. Theme handoff becomes copy/paste, not translation work.
FAQ
Is this only for shadcn/ui?
shadcn/ui is the core use case, but the exports are useful anywhere you need design tokens, Tailwind config, CSS variables, or WordPress theme.json.
Do I need to know OKLCH?
No. You can start from a brand description or a single color, then inspect and tweak the tokens if you want more control.
How does the WCAG enforcement work?
Theme Lab checks contrast and nudges foreground colors until they meet AA or AAA targets. It’s meant to reduce manual accessibility testing, not replace your judgment entirely.
Can I use this for dark mode?
Yes. Theme Lab generates both light and dark variants and lets you preview them on real components before exporting.
What should I build with this?
Anything that needs a branded UI fast: indie SaaS MVPs, internal tools, client handoffs, or design-system work where tokens need to be ready for code.
Hex tweaking for shadcn/ui is a trap. You fix one token, dark mode breaks. You fix contrast, the palette looks off. Theme Lab starts with OKLCH, generates the full theme, and nudges foregrounds to WCAG AA/AAA automatically.
Built Theme Lab. Pick a brand color in OKLCH, generate a full light/dark shadcn/ui palette, preview real components, and export to CSS, Tailwind, design tokens, or theme.json. Less token babysitting. More shipping.
Watch this flow: 1. Type a brand vibe 2. Get an AI-generated shadcn theme 3. Check contrast live 4. Export code straight into the app That’s the whole point. Turn “we need a branded UI” into done.
I kept losing hours to the same stupid loop: tweak a color, check dark mode, fix contrast, preview buttons, break cards. So I built Theme Lab to do the boring part for me. If you’re using shadcn/ui, this should feel like cheating.
The thing people actually want isn’t a pretty palette. They want a theme they can ship. That’s why Theme Lab exports index.css, Tailwind config, W3C Design Tokens, and WordPress theme.json. Hand-off should be copy/paste, not a Figma archaeology project.
If you’re still checking WCAG contrast by hand, you’re wasting time. Theme Lab auto-nudges foreground colors to AA or AAA so your shadcn/ui theme is usable before it ever hits production.
Theme Lab now lets you inspect every token in OKLCH. That means you can actually control lightness, chroma, and hue instead of guessing with hex codes. It’s the difference between random palette tweaking and real system design.
A theme can look fine in swatches and still suck in UI. Theme Lab previews cards, buttons, charts, alerts, and forms so you see the failures before you export anything. Exactly how a theme should work.
I’m not building for everyone. Theme Lab is for the developer who says: “I need a branded shadcn theme today, and I do not want to spend the afternoon tuning tokens.” That narrow pain is the whole product.
Coolors and Adobe Color make nice palettes. Theme Lab makes shadcn/ui themes you can actually use. Generated from one brand color, checked for contrast, previewed on real components, exported in formats developers already need.
Angle: Pain-to-solution story for frontend teams
Most theme tools stop at pretty color swatches. That’s not the real job. The real job is taking one brand color and turning it into a usable shadcn/ui theme that works in light mode, dark mode, and production. That usually means: - hand-tuning tokens - checking contrast - fixing broken components - exporting the same thing in three different formats Theme Lab is my attempt to remove that mess. You pick a brand color in OKLCH, generate a full theme with AI, validate WCAG contrast automatically, and preview common components before you ship. Then you export it as index.css, Tailwind config, W3C Design Tokens, or WordPress theme.json. I built it for the people who don’t want to spend half a day making buttons look right. If you’re building on shadcn/ui, I’d love feedback from anyone who’s had to do theme setup the hard way.
Angle: Founder story / why now
I kept running into the same problem on small product builds: We had the UI kit. We had the brand color. We still didn’t have a theme. And the gap between those two things was always annoying. The obvious path was to open the palette editor, tweak hex values, eyeball the contrast, switch to dark mode, break something, repeat. That works if you enjoy color theory. It does not work if you want to ship. So I built Theme Lab around a different idea: start in OKLCH, make accessibility part of the workflow, and export something the app can actually use. The goal is simple: go from “we need branded UI” to “paste this into the codebase” as fast as possible. If you work with shadcn/ui, Tailwind, or design tokens, I think this saves real time. Curious how others are solving theme setup today.
Angle: Handoff/export story for designers and agencies
A lot of design tools are good at inspiration and bad at handoff. You get a nice palette, maybe a mockup, and then the developer still has to translate that into tokens, CSS, dark mode, and accessibility rules. That translation step is where projects lose time. Theme Lab is meant to make that part boring. It generates a full shadcn/ui theme from one brand color, previews real components, and exports in formats that fit actual workflows: - index.css - Tailwind config - W3C Design Tokens - WordPress theme.json That makes it useful for solo founders, frontend teams, and agencies handing off to multiple codebases. If you’re designing systems for developers, I’d be interested in hearing what export format matters most to you.
Tagline
WCAG-safe shadcn themes from one color
Description
Build a full shadcn/ui light and dark theme from one brand color. Theme Lab generates OKLCH tokens, checks contrast automatically, previews real components, and exports to CSS, Tailwind, design tokens, or theme.json.
Maker's first comment
I built Theme Lab because I got tired of the same loop: choose a color, tweak tokens by hand, check dark mode, fix contrast, and repeat until the theme stopped fighting me. That process is fine once. It is annoying every time after that. And if you’re shipping a shadcn/ui app, you usually need the theme done now, not after a long design-system detour. Theme Lab started as a tool for my own workflow: pick a brand color in OKLCH, generate a full theme, see it on real components, and export something I can paste into the app. Then I added the parts that were missing from most palette tools: WCAG enforcement, token-level controls, and exports that developers actually use. If you try it, I’d love feedback on the export formats and whether the preview covers the components you care about most.
Pinned maker comment
Would love feedback on two things: whether the OKLCH controls feel precise enough for real theme work, and which export format you’d trust most in production.
Meta
Shadcn themes take too long to hand-tune
Targeting: indie founders and small product teams shipping with shadcn/ui. Hypothesis: they’ll convert if they can turn one brand color into a usable light/dark theme without manual contrast work. Theme Lab generates OKLCH-native palettes, checks WCAG automatically, previews real components, and exports code you can paste today.
Google Search
shadcn theme generator okLCH
Targeting: developers searching for a faster shadcn/ui theme workflow. Hypothesis: searchers want a tool that removes token tuning and contrast debugging, not another palette picker. Theme Lab builds accessible light and dark themes from one brand color and exports index.css, Tailwind config, design tokens, or theme.json.
Reddit Promoted
Still hand-editing shadcn tokens?
Targeting: r/SideProject, r/indiehackers, and frontend devs who use shadcn/ui. Hypothesis: they care most about speed and accessibility, so a tool that generates WCAG-safe themes from one brand color will get real clicks. Theme Lab does the boring part: generate, preview, enforce contrast, export.
Subreddits
r/SideProject
Show the builder as a solved pain: one color to shadcn theme, with contrast enforcement and export screenshots
Rules: No pure link-drop; share what you learned building it and include screenshots or a short demo
r/indiehackers
Talk about the specific pain of theme setup for indie founders shipping MVPs with shadcn/ui
Rules: Lead with the problem and process; self-promo is okay only if framed as a build log or lesson
r/microsaas
Position Theme Lab as an internal utility indie founders and solo builders will keep using across projects
Rules: Keep it practical, avoid hype, and focus on a concrete workflow improvement
r/EntrepreneurRideAlong
Share the journey from hand-tuning themes to building a product that removes that work
Rules: Content should be story-first; readers dislike obvious marketing posts
r/webdev
Share a technical breakdown of OKLCH, WCAG contrast enforcement, and exporting theme tokens
Rules: Must be educational and specific; avoid making it sound like an ad
Communities
Post build logs, lessons, and a teardown of how you turned one brand color into exportable theme tokens. Comment on other founders’ launches before posting your own.
Answer theme and token questions first, then mention Theme Lab only when someone asks how to speed up theme setup or exports.
Share useful snippets about theme tokens, OKLCH, and contrast handling. Keep product mentions to a minimum and only after contributing.
Design Systems Slack
Join conversations around token workflows, accessibility, and handoff. Offer a free critique of a member’s theme setup before mentioning the tool.
Cold outreach template
Hey {firstName} - noticed {context}, and it looks like you’re shipping with shadcn/ui. I built Theme Lab to turn one brand color into a WCAG-safe theme with exports your codebase can use. If you want, I can generate a theme for your app and send it over.
Product Hunt timing
Launch on Tuesday at 12:01 AM Pacific Time. That gives you a full workday audience in the US and Europe, and shadcn/Tailwind buyers are more likely to be actively building during midweek than on weekends.
Indie Hackers post ideas
- 01I built a shadcn theme generator because hand-tuning tokens was eating my shipping time
- 02How I added WCAG contrast enforcement to an OKLCH theme builder
- 03What export formats indie founders actually need from a design token tool
Competitor alternatives
Current tone of voice
Direct, maker-friendly, and slightly hypey without sounding enterprise; for example, "Design a shadcn theme in seconds, not hours."
Your kit is ready. Sign up free to unlock, takes 10 seconds.
7 more X posts · 2 LinkedIn · Product Hunt copy · ad hooks · 100-user playbook · landing critique