For developers

Extract a theme from any site.

Paste a URL or drop a screenshot. CSS Crème samples the pixels, maps them to shadcn/ui roles — background, surface, primary, accent, text, muted — and hands you the CSS, light and dark, contrast checked. The same engine behind our themes. No account.

or drop a screenshot

Drop an image, click to choose, or paste from your clipboard.

PNG, JPG or WebP. Everything stays in your browser.

Colour is one layer. To pull the whole system from a live page — type scale, spacing, radii, shadows, gradients, plus an accessibility and CSS-health read — use the Decode workspace, or edit any theme by hand in the Workbench.

How it works

Role-mapped, not just swatches

We split colors by their chroma so a near-black background never gets mistaken for a brand color, then assign the six shadcn roles by contrast and prominence.

Light and dark, checked

You get both modes with WCAG-checked contrast, in OKLCH — the same output a curated theme ships.

Yours to keep

Copy the CSS straight into globals.css, or open it in the workbench to tune it first. Screenshot uploads never leave your browser.