Palette as CSS Variables
Takes a hex palette and exports it as a CSS variables block (:root { --primary-50: ... }) ready to use.
—
CSS Custom Properties: dynamic theming made native
CSS Custom Properties (also called CSS Variables) were introduced as part of CSS Custom Properties for Cascading Variables Module Level 1 and have been universally supported since Chrome 49 (2016). Today their global support sits above 96%, so they are production-safe for every audience. They unlocked something Sass and Less could not: variables that live at runtime, react to media queries and can be re-assigned from JavaScript — turning a stylesheet into something closer to a small reactive system.
Syntax basics
Custom properties are declared with two leading dashes and consumed via var(). The standard place to declare global tokens is on the :root pseudo-class, which targets <html>:
:root {
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
}
.button {
background: var(--color-primary);
}
.button:hover {
background: var(--color-primary-hover, #1d4ed8);
}The second argument of var() is a fallback used when the variable is undefined — a free safety net for older browsers or partial themes.
Naming conventions that scale
- Token-style —
--color-primary-500,--color-primary-600: mirrors the Tailwind / Material 50-950 ramp. - Semantic —
--color-text,--color-background,--color-surface: decouples meaning from the underlying hex, so dark mode is one rule away. - BEM-style —
--color-button-bg-hover: precise but verbose, good for component-scoped variables.
Dynamic themes and dark mode
Because variables are inherited through the DOM tree, switching a single attribute on <html> re-skins the entire app without duplicating a single rule. The typical dark-mode pattern is:
:root { --bg: #fff; --fg: #111; }
[data-theme="dark"] { --bg: #0b1220; --fg: #e6edf6; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --bg: #0b1220; --fg: #e6edf6; }
}From JavaScript, document.documentElement.style.setProperty('--color-primary', '#ff0000') swaps a token in real time — perfect for theme builders, white-label tenants and live design previews.
Design tokens and tooling
The CSS variables generated by this tool are essentially design tokens — the same abstraction popularised by Style Dictionary (Amazon) and Theo (Salesforce), which transform a JSON source of truth into CSS, iOS, Android and Figma outputs. Tailwind's tailwind.config.js feeds the same pipeline: extending the colors object generates utility classes that internally reference variables in v4. Tying tokens to an HSL or OKLCH ramp (e.g. --hue: 220; --color: hsl(var(--hue) 70% 50%);) lets you re-brand the whole site by changing one number.
FAQ
How do CSS variables differ from Sass variables? Sass variables are resolved at compile time and disappear from the final CSS. CSS variables live at runtime, can be inspected in DevTools, change with the cascade, react to media queries and be mutated from JavaScript.
Do they hurt performance? No. They are a native browser primitive, comparable in cost to a normal property lookup; modern engines (Blink/WebKit/Gecko) optimise the dependency graph aggressively.
Is dynamic theming reliable? Yes — calling setProperty() on :root triggers a style recalculation, but layout and paint stay minimal because only the affected properties invalidate.
How do they compare with CSS-in-JS? Libraries like styled-components and emotion ship a runtime that injects styles per render. CSS variables are zero-runtime: the browser already does the lookup. Pair the two when you need both dynamic theming and component-scoped logic.
Related Tools
Handwriting Generator
Convert typed text into an image with handwriting appearance. Useful for adding a personal touch to digital work.
Resume Generator
Fill a simple printable A4 CV from a form with personal data, education and experience.
Favicon Generator
Generate a favicon from text/emoji in all common sizes (16, 32, 48, 64, 192, 512). PNG download.