UI Color Theme Generator (shadcn, Tailwind, Material 3)
Brand color in, full light and dark theme out — every text pair checked for contrast.
Brand colors
Preview
The sample uses system fonts. Colors that come from the theme: every surface, text, border, ring and chart color.
Contrast checks
| Theme | Where | Text / element on surface | Ratio | Needs | Result |
|---|
Tokens
| Token | Light | Dark |
|---|
Export
About the UI Color Theme Generator (shadcn, Tailwind, Material 3)
Start from your brand color — and, if you like, a second one — and get a complete UI theme for both light and dark mode: background, foreground, card, popover, primary, secondary, muted, accent, destructive, success and warning, border, input, focus ring, five chart colors and the sidebar set, with the token names shadcn/ui uses. Text colors are not guessed: each one is moved in OKLCH lightness, keeping its hue, until it reaches WCAG AA (4.5:1) — or AAA (7:1) if you choose — against every surface it is used on.
All the checks are listed, from body text to destructive buttons, focus rings and chart colors, and the theme is shown live on a sample landing page and a dashboard that you can switch between light and dark. Export it as a shadcn/ui globals.css, a Tailwind CSS v4 @theme, plain CSS variables in HEX, RGB, HSL or OKLCH, or as Material Design 3 tokens built with Google’s material-color-utilities.
How to use it
- Enter your Brand color. Add a Second color if your brand has one; it tints secondary buttons and becomes the second chart color.
- Choose how gray the neutrals are, the corner radius and the contrast level — AA for most sites, AAA for stricter needs.
- Look through the Contrast checks for both modes. If your exact brand color cannot pass, turn off Keep my exact brand color to let the tool adjust its lightness.
- Switch the Preview between the landing page and the dashboard, and between light and dark.
- Under Export, pick shadcn/ui, Tailwind v4, CSS variables or Material 3 and copy or download the code.
Examples
Brand color #2563eb · subtle neutrals · AA
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.1443 0.0094 262.99);
--primary: oklch(0.5461 0.2152 262.88);
--primary-foreground: oklch(0.9854 0.0013 286.38);
--muted-foreground: oklch(0.5339 0.0168 264.42);
…
}The near-white text on the primary reaches 4.95:1 and muted text 4.75:1 on the muted surface. In dark mode the primary is lightened to oklch(0.5859 0.2152 262.92) so it can also be read as link text.
Brand color #facc15 (yellow)
primary-foreground: a near-black · Link text check: fails (1.53:1)
Yellow buttons need dark text, and yellow text on white cannot pass — so the tool advises not to use text-primary for links in the light theme.
Source #6750a4 · Tonal spot · standard contrast
--md-sys-color-primary: #65558f; --md-sys-color-on-primary: #ffffff; --md-sys-color-surface: #fdf7ff;
Common uses
- Setting up the colors of a new shadcn/ui or Tailwind project in minutes, with a dark mode that works.
- Checking that a brand color can carry buttons, links and focus rings accessibly before a design is built.
- Producing Material Design 3 color tokens for Android, Flutter or Material Web from a brand color.
- Giving designers and developers one set of tokens for both themes.
How the theme is built
- Neutrals (background, card, muted, border) follow the lightness steps of shadcn/ui’s default theme, tinted with your brand hue: none, a little (like Tailwind’s zinc) or more (like slate).
- Primary is your exact brand color in the light theme, unless you let the tool adjust it. In the dark theme it is lightened until it reads on the dark background. Its text color is near-white or near-black, whichever has more contrast.
- Every text color is solved: its OKLCH lightness moves until it reaches the target on all the surfaces it appears on — muted text, for example, on the page, on cards, on muted and on hovered surfaces.
- Destructive starts from shadcn/ui’s reds; success and warning are added as extra tokens the way the shadcn/ui docs describe, with their own foregrounds.
- Focus ring, input border and chart colors are made to reach 3:1 against the background, the minimum for interface components and graphics (WCAG 1.4.11).
What the contrast checks cover
For both themes the tool measures body, card and popover text; primary and secondary buttons; link text (text-primary); muted text on the page, cards and muted surfaces; hovered and selected items (accent); error text; the destructive button (white text, drawn at 60% opacity in shadcn/ui’s dark theme); success and warning badges; and the sidebar. Text needs 4.5:1 for AA or 7:1 for AAA (WCAG 1.4.3, 1.4.6); ratios are cut to two decimals, never rounded up. Translucent colors such as the dark-mode border (white at 10%) are measured as they appear over the background.
shadcn/ui’s own default input border is decorative (about 1.3:1 on white). With Input borders with 3:1 contrast on, the input border is darkened so fields remain visible to people with low vision.
Material 3 tokens
The Material export uses material-color-utilities, Google’s library for the Material Design 3 color system: your color is converted to Material’s HCT color space, tonal palettes are built from it, and every Material 3 role — primary, on-primary, the containers, the surface-container levels, outline, inverse and fixed colors — is taken from those palettes for the chosen scheme variant and contrast level. A second color becomes the tertiary palette. The tokens use Material’s names, --md-sys-color-*, which Material Web components read directly.
Limitations
- Contrast follows WCAG 2.2; it does not model font weight or size beyond the AA/AAA thresholds, so check thin or very small text yourself.
- The preview uses system fonts and simple shapes; your components may use the tokens differently than shadcn/ui does.
- Some brand colors cannot pass every check while staying exact — a light yellow cannot be link text on white. The tool tells you which checks fail and why.
- Chart colors are checked against the background and kept apart in hue, but not simulated for color vision deficiencies — use the Color Blindness Simulator for that.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
How do I use the theme with shadcn/ui?
Choose shadcn/ui under Export and replace the color variables in your app/globals.css (or src/styles/globals.css) with the code. It contains the :root and .dark blocks and the @theme inline mapping Tailwind v4 needs; success and warning are extra tokens you can use as bg-success and text-warning-foreground.
Why did my primary color change in dark mode?
On a near-black background a mid-tone brand color is hard to read as link text and looks dull as a button, so the dark theme uses a lighter version with the same hue. The light theme keeps your exact color unless you turn off Keep my exact brand color.
What is the difference between AA and AAA?
AA needs 4.5:1 for normal text and is what most laws and guidelines require. AAA needs 7:1 and makes text readable for more people with low vision, but it leaves less room for brand colors.
Can I use a second brand color?
Yes. It tints the secondary surface (secondary buttons and badges) and becomes the second chart color, and in the Material 3 export it is used as the tertiary palette.
Which Material 3 variant should I pick?
Tonal spot is Android’s default and gives calm, balanced colors. Content stays close to your color, and Fidelity keeps your exact color as the primary container. Vibrant and Expressive are more colorful; Neutral and Monochrome are almost gray.
Are my colors uploaded?
No. The theme, the checks and all exports are calculated in your browser, and the page works offline once loaded.