codefronts50–950 scales · dark mode

Tailwind Config Theme Builder

Theme

Primary

Accent

Neutral

Scale curve

Live preview

Light mode

Brand

HomeDocsPricing

Card title

A description rendered with muted-foreground on card background. This is the most common combination in an app UI.

SuccessWarningDestructiveMuted

Dark mode

Brand

HomeDocsPricing

Card title

A description rendered with muted-foreground on card background. This is the most common combination in an app UI.

SuccessWarningDestructiveMuted

Tailwind v4 @theme

WCAG contrast10/10 pairs pass

lightforeground on background17.89≥ 4.5 AA-normal
lightmutedForeground on muted3.93≥ 3.0 AA-large
lightprimaryForeground on primary4.72≥ 3.0 AA-large
lightaccentForeground on accent4.79≥ 3.0 AA-large
lightdestructiveForeground on destructive4.84≥ 3.0 AA-large
darkforeground on background16.43≥ 4.5 AA-normal
darkmutedForeground on muted3.86≥ 3.0 AA-large
darkprimaryForeground on primary4.84≥ 3.0 AA-large
darkaccentForeground on accent4.79≥ 3.0 AA-large
darkdestructiveForeground on destructive4.74≥ 3.0 AA-large

About this tool

Pick a primary color, get a complete Tailwind theme — 11-shade color scale, semantic tokens, dark mode variants, and four output formats: Tailwind v3, v4 @theme, plain CSS variables, and shadcn/ui tokens.

Why use this builder

🎨

One paste, four formats

Pick a primary color once. Get Tailwind v3 config, v4 @theme block, plain CSS variables, AND shadcn/ui tokens — all from the same input. Switch with one click.

🌗

Dark mode wired in

Light and dark token sets generated automatically with the correct shade inversion. Drop the output into your stylesheet and toggle the .dark class — no manual remapping.

🎯

WCAG contrast checks built in

Every foreground/background pair is checked against WCAG 2.1 AA. If your theme produces unreadable combinations, you see the failing pair with its exact ratio before you ship.

⚡

OKLCH-native, perceptually uniform

Color scales are derived in OKLCH space so each shade step looks evenly spaced. No more 200 looking almost identical to 300 — the perceptual jump per step stays consistent.

▶

How to use it

Pick your primary color

Click the colour swatch or type a hex. The 50→950 scale derives from this single input via a Tailwind-calibrated lightness curve.

Set accent + neutral

Accent is your secondary brand colour (links, badges). Neutral becomes your gray scale — pick a hex with a slight hue tilt for a warmer or cooler theme.

Toggle what you need

Semantic tokens, dark mode, and utility colours (destructive/success/warning) each toggle independently. Turn off what your project does not use.

Choose your output format

Tailwind v3 for classic config, v4 @theme for CSS-first projects, plain CSS variables for vanilla projects, shadcn/ui for projects already using that component system.

Review contrast warnings

If any foreground/background pair fails WCAG AA, the warnings panel shows the failing ratio. Tweak your primary until the scale clears.

Copy and paste

Click Copy. Paste into tailwind.config.js, app.css, globals.css, or wherever your theme tokens live. Reload your dev server.

⇄

Output format comparison

Format	Goes in	Syntax	Notes
`Tailwind v3`	`tailwind.config.js`	`JS object`	Classic theme.extend.colors with hex values. Use Tailwind's `dark:` variant for mode switching.
`Tailwind v4 @theme`	`app.css`	`CSS @theme {}`	CSS-first config. OKLCH values. Dark mode via .dark class selector layer.
`CSS variables`	`globals.css`	`:root + selector`	Framework-agnostic. Reference as var(--color-primary-500). Works in any project.
`shadcn/ui`	`globals.css`	`:root + .dark`	Space-separated HSL (shadcn convention — no hsl() wrapper). Wrap at usage: hsl(var(--primary)).

◇

Semantic token mapping

How each semantic token resolves to a scale shade in each mode. Light mode uses 600-weight brand colors against white backgrounds; dark mode uses 500-weight against near-black backgrounds for better contrast.

Mapping table

background                   → light: white              dark: neutral-950
foreground                   → light: neutral-950        dark: neutral-50
primary                      → light: primary-600        dark: primary-500
primary-foreground           → light: primary-50         dark: primary-50
muted                        → light: neutral-100        dark: neutral-800
muted-foreground             → light: neutral-500        dark: neutral-400
border                       → light: neutral-200        dark: neutral-800
ring                         → light: primary-600        dark: primary-400
destructive                  → light: destructive-600    dark: destructive-500

✦

Pro tips

Tweak primary if dark mode contrast fails

If the warnings panel reports dark-mode contrast failures, your primary is probably too dark. Try a primary in the 0.55–0.65 lightness range so its 500 shade still contrasts against neutral-950 backgrounds.

Neutral hue tilts the whole feel

Pure-gray neutral (`#71717a`) is safe. A slight blue tilt feels cooler/more corporate; warm gray (a hint of red/brown) feels softer/more editorial. Try `#78716c` for warmth or `#64748b` for cool.

Utility colors are intentionally fixed

Destructive (red), success (green), and warning (amber) do NOT derive from your primary. Universal UX expectation overrides theme aesthetics — a "delete" button in a teal theme should still read as red.

Output formats are not interchangeable

Tailwind v3 expects hex inside JS; v4 wants OKLCH in CSS @theme; shadcn wants space-separated HSL. Pick the one matching your project — pasting the wrong one breaks nothing but produces zero working tokens.

Frequently asked questions

What's the difference between the Tailwind v3 and v4 output formats?

Tailwind v3 is a JS object you paste into theme.extend in tailwind.config.js. Tailwind v4 dropped the JS config for a CSS-first setup: you paste an @theme block into the same stylesheet that imports Tailwind, and the tokens become utilities automatically. Same colours either way — pick the one matching the Tailwind major version in your package.json. If you are unsure, check whether your project has a tailwind.config.js (v3) or an @import "tailwindcss" line (v4).

Why are the colours OKLCH instead of hex?

OKLCH is perceptually uniform: equal steps in lightness look equally different to the eye, which hex and HSL do not guarantee. That is what keeps a 50→950 scale evenly spaced rather than bunching in the midtones and washing out at the ends. Every modern browser supports it, and the builder derives the scale in OKLCH even when you type a hex.

Do I need the semantic tokens, or are the colour scales enough?

The scales alone are enough to start. Semantic tokens (background, foreground, muted, border, ring) add a naming layer so components reference a ROLE rather than a shade — text-foreground instead of text-neutral-950. That is what makes a dark-mode swap a one-line change instead of a find-and-replace, and it is the convention shadcn/ui builds on. Turn them off if your project already has its own naming.

What do the WCAG contrast checks actually test?

Every foreground/background pair the theme generates is checked against WCAG AA — 4.5:1 for body text. The panel reports each pair in both light and dark mode, so a combination that passes on white but fails on neutral-950 is caught before you ship it. A failure is not blocking; it tells you which pair to adjust.

Dark mode fails contrast — what should I change?

Lighten the primary colour. Dark-mode tokens map primary to a lighter shade than light mode does (primary-500 against primary-600), so a primary that is already dark leaves too little headroom above a near-black background. Nudging the primary lighter usually clears both modes at once, and the checks re-run as you type.

Can I use this without Tailwind?

Yes — pick the CSS variables format. It emits a :root block plus a dark-mode selector with no Tailwind dependency, so the same scale works in plain CSS, SCSS, styled-components or any framework that reads custom properties. The shadcn/ui format is also plain CSS, using the space-separated channel syntax that library expects.

Does the theme persist if I reload the page?

Saved themes do. Save stores the current theme in your browser so it survives a reload, and Share encodes the whole configuration into the URL — that link is what you send to a teammate or paste into a ticket. An unsaved theme you are still tweaking is not kept.