Does the output use shadcn's exact variable names?

Yes — the block follows the --background/--foreground style convention the components reference, so it is consumable without renaming.

Can it generate the dark mode block too?

The exporter emits the light-scope block; the dark scope is the same variable names redeclared under a dark selector — pick values with the dark-mode palette generator and re-run.

Does it emit HSL channels or full colors?

The output follows the notation convention shadcn's theme expects, formatted so the components render exactly what the preview showed.

What if my palette has more colors than shadcn's slots?

Bind the core slots first; extra colors become additional custom properties in the same block, referenceable by your own components.

Do the variables need a particular order in the file?

No — custom properties resolve by name rather than position, so the rows can be reordered freely. What matters is that every name a component references is present, since a missing one falls back silently rather than erroring.

Shadcn/ui Color Exporter

Palette

CSS

:root {
  --brand-1: #3B82F6;
  --brand-2: #A855F7;
  --brand-3: #EF4444;
  --brand-4: #10B981;
  --brand-5: #F59E0B;
}

You Might Also Need

Color Palette CSS Exporter

Export a palette as CSS

Bootstrap Color Exporter

Export a palette as Bootstrap colors

CSS Custom Properties Exporter

Export a palette as CSS custom properties

Chakra UI Color Exporter

Export a palette for Chakra UI

The shadcn/ui color exporter emits a palette as the CSS custom properties shadcn themes consume — the shadcn css variables generator for the --background/--foreground convention.

What is Shadcn/ui Color Exporter?

shadcn/ui themes are CSS custom properties with a contract: --background, --foreground and their named companions, declared in :root and consumed by every component. The shadcn/ui color exporter produces that block from an editable palette — build the color set, and the tool emits the variable declarations in shadcn's naming convention, copy-ready for the theme file. It is the shadcn css variables generator for the convention the component library assumes.

The export speaks shadcn's dialect specifically: the variable names follow the --role/--foreground pairing the components reference — surfaces, borders, rings, the semantic slots — so the pasted block is consumable as-is, not a generic variable dump requiring renaming. The editor rows carry names and values; the block regenerates live; the copy hands over the complete declaration set. That focus on the convention is the tool's whole value: shadcn themes break silently when variable names drift, and the generator keeps the export on-contract — a shadcn theme colors export that lands working.

The workflow it serves is theme bootstrap and brand adaptation: a palette decided elsewhere — brand guideline, derived ramp, mood board harvest — needs to become the variable block shadcn components read. Editing lives in the palette rows; the CSS variables architecture (one redeclaration per theme, dark modes as scoped swaps) comes free with the format. The generic CSS custom properties exporter emits the same architecture without the shadcn naming; the token exporters feed pipelines instead of theme files.

Shadcn's convention is unusual enough to catch people out: the palette lives in HSL channel values without the wrapper, so the components can compose their own alpha and colour-mix expressions.
A theme block is therefore not just a list of colours but an agreement about notation, and a file written in another format produces components that render transparent or as an unrecognised value.
Getting that agreement right at the start is most of the work, which is why a shadcn ui color exporter is worth running rather than transcribing by hand: the notation, the variable names and the light and dark registers all come out together.
The tokens are also the ones components depend on implicitly, so a missing entry does not throw — it quietly renders a fallback — and a complete block is worth more than a pretty one.

Checking the dark register against the light one before shipping the theme is the last cheap step, since both are generated from the same palette and either can be the one that fails.

As an hsl variables for shadcn instrument — the notation shadcn's convention uses — it is one palette in, the theme block out, on-contract by construction. For teams starting a shadcn project from a brand palette, it is the first file in the theme directory, and the one the components silently depend on.

Keep the block in one file and import it once, since splitting a register across components is how a theme quietly acquires a second, contradictory definition; where a value genuinely needs to differ, override the variable rather than the token.

How to use Shadcn/ui Color Exporter

Build the palette rows with shadcn role names — background, foreground, primary, and companions.
Watch the custom property block generate in shadcn's convention.
Copy the block into your theme file; the components consume it as-is.

When to use Shadcn/ui Color Exporter vs related tools

Use this to bootstrap or rebrand a shadcn/ui theme from a palette. Use the generic CSS variables exporter for non-shadcn projects, the token exporters for pipelines, and the dark-mode palette generator for the values of the dark scope. Once the block is in place, the palette accessibility checker is where the pairs a real interface depends on get audited, and the other framework whose hook is a short list of named roles is covered by the bootstrap color exporter.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.