Content is loading…
Share
Generate a full Tailwind 50–950 shade scale from any base color.
Click any swatch to copy its hex. The ringed swatch is your exact input color, placed at its nearest shade slot.
@theme {
--color-brand-50: #f2f2fd;
--color-brand-100: #e5e5fb;
--color-brand-200: #c0c1f6;
--color-brand-300: #9698f3;
--color-brand-400: #6366f1;
--color-brand-500: #2b2fee;
--color-brand-600: #1014d5;
--color-brand-700: #0c10b0;
--color-brand-800: #080b81;
--color-brand-900: #05075b;
--color-brand-950: #030430;
}Turn any hex color into a complete Tailwind-style shade scale from 50 to 950. Your exact base color is placed at its nearest shade slot, and the rest of the scale is generated by interpolating saturation and lightness against Tailwind palette anchors. Click any swatch to copy its hex, then export as Tailwind v4 @theme variables, a Tailwind v3 config snippet, or plain CSS custom properties. Runs entirely in your browser.
Share this tool
Visually build CSS gradients and copy the CSS output.
Upload an image and get all favicon sizes + HTML link tags.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.