{"$schema":"https://toolsly.tools/schemas/tool-manifest-v1.json","generated":"2026-06-13T19:02:27.184Z","discovery":{"catalog":"https://toolsly.tools/tools.json","llmsTxt":"https://toolsly.tools/llms.txt","sitemap":"https://toolsly.tools/sitemap.xml"},"relatedTools":[{"slug":"shade-tint-generator","name":"Shade & Tint Generator","url":"https://toolsly.tools/shade-tint-generator"},{"slug":"material-palette","name":"Material Design Palette Generator","url":"https://toolsly.tools/material-palette"},{"slug":"tailwind-palette-extractor","name":"Tailwind Palette Extractor","url":"https://toolsly.tools/tailwind-palette-extractor"},{"slug":"tailwind-color-finder","name":"Tailwind Color Finder","url":"https://toolsly.tools/tailwind-color-finder"},{"slug":"triadic-colors","name":"Triadic Colors Generator","url":"https://toolsly.tools/triadic-colors"},{"slug":"analogous-colors","name":"Analogous Colors Generator","url":"https://toolsly.tools/analogous-colors"},{"slug":"random-color","name":"Random Color Generator","url":"https://toolsly.tools/random-color"},{"slug":"gradient-generator","name":"CSS Gradient Generator","url":"https://toolsly.tools/gradient-generator"}],"kind":"utility","slug":"tailwind-shade-generator","name":"Tailwind Shade Generator","description":"Generate a full Tailwind-style 50–950 shade scale from one hex color — CSS variables & config, in-browser.","longDescription":"Paste a single base hex color and instantly get a complete Tailwind-style colour scale: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950. The base color is converted to HSL, then the lightness is interpolated across the eleven steps (very light near 50, very dark near 950) while keeping the hue and gently easing saturation toward the extremes — the step you nominate keeps your exact original color. Output includes a plain scale list, CSS custom properties, and a ready-to-paste Tailwind `colors` config object. Perfect for building design-system palettes and theme tokens. Runs entirely in your browser.","category":"color","categoryName":"Color","keywords":["tailwind shade generator","tailwind color generator","tailwind palette generator","tailwind color scale","tailwind 50 to 950","generate tailwind shades","tailwind custom colors","color scale generator","tailwind config colors","tailwind theme colors","hex to tailwind palette","tailwind color shades","design system color scale","tailwind css variables colors","custom tailwind palette"],"badge":"Generator","url":"https://toolsly.tools/tailwind-shade-generator","inputs":[{"type":"text","key":"baseColor","label":"Base color","placeholder":"#3b82f6","defaultValue":"#3b82f6","monospace":true,"help":"A hex color like #3b82f6 (3 or 6 digits)."},{"type":"select","key":"baseStep","label":"Base maps to step","choices":[{"value":"50","label":"50"},{"value":"100","label":"100"},{"value":"200","label":"200"},{"value":"300","label":"300"},{"value":"400","label":"400"},{"value":"500","label":"500"},{"value":"600","label":"600"},{"value":"700","label":"700"},{"value":"800","label":"800"},{"value":"900","label":"900"},{"value":"950","label":"950"}],"defaultValue":"500","help":"The step that keeps your exact input color."}],"outputs":[{"key":"scale","label":"Scale","multiline":true,"monospace":true},{"key":"cssVariables","label":"CSS variables","multiline":true,"monospace":true},{"key":"tailwindConfig","label":"Tailwind config","multiline":true,"monospace":true}],"invocation":{"webUi":"https://toolsly.tools/tailwind-shade-generator","api":null,"notes":"Currently invoked via the web UI at `webUi`. Inputs are form fields; outputs are structured text values. A remote MCP/REST API is planned."}}