TOOL · COLORS
Tailwind scale generator (50–950)
Paste your brand color and take the 11 shades in the Tailwind standard — interpolated in OKLCH so the scale looks even to the eye, with the tailwind.config block and CSS variables ready.
tailwind.config
marca: {
50: '#fff2ef',
100: '#ffe0da',
200: '#ffc8bf',
300: '#ffa698',
400: '#f77363',
500: '#e64436',
600: '#ca2f23',
700: '#ad261c',
800: '#8e231a',
900: '#74221a',
950: '#4a130e',
}CSS variables
:root {
--marca-50: #fff2ef;
--marca-100: #ffe0da;
--marca-200: #ffc8bf;
--marca-300: #ffa698;
--marca-400: #f77363;
--marca-500: #e64436;
--marca-600: #ca2f23;
--marca-700: #ad261c;
--marca-800: #8e231a;
--marca-900: #74221a;
--marca-950: #4a130e;
}Processed in your browser — your files never leave your computer.
How it works
-
Pick the base color
Type your brand hex or use the visual picker. rgb(), hsl() and oklch() work too — the scale recalculates as you type.
-
Check the 11 shades
The ruler goes from 50 (almost white) to 950 (almost black), with your color anchoring the middle of the scale. Click any shade to copy its hex.
-
Copy in your project's format
Two ready blocks: the object for tailwind.config and the CSS variables for :root. Each with its own copy button.
Frequently asked questions
Why is the scale generated in OKLCH?
Because OKLCH lightness is perceptual: the jump from 300 to 400 looks the same as from 600 to 700 — exactly like the official Tailwind palettes, which are also designed in OKLCH. Generating in HSL would leave some shades blown out and others dull.
How do I use the scale in tailwind.config?
Copy the block and paste it into theme.extend.colors in your tailwind.config (or a @theme block in Tailwind 4). Then use it like any native color: bg-marca-500, text-marca-700, border-marca-200. Rename "marca" to whatever you like.
Does my original color appear in the scale?
The scale preserves your hue and anchors your color's intensity at shade 500; each step's lightness follows the Tailwind standard. If your color is very light or very dark, its closest shade may be 300 or 700 — that is expected behavior.
What are extreme shades like 50 and 950 for?
50 and 100 are backgrounds: item hover, badge fill, table stripes. 900 and 950 are text on light backgrounds and dark mode surfaces. Rule of thumb: light background + 700+ text from the same scale almost always passes AA contrast.
Does it work without Tailwind?
Yes. The second block comes as plain CSS variables (--marca-50 to --marca-950) ready for the :root of any project — framework or not.
Is my color sent to a server?
No. The scale is computed inside your browser, on your device. Nothing leaves your computer.