{"$schema":"https://toolsly.tools/schemas/tool-manifest-v1.json","generated":"2026-05-20T20:47:38.310Z","discovery":{"catalog":"https://toolsly.tools/tools.json","llmsTxt":"https://toolsly.tools/llms.txt","sitemap":"https://toolsly.tools/sitemap.xml"},"relatedTools":[{"slug":"color-converter","name":"Color Converter","url":"https://toolsly.tools/color-converter"},{"slug":"complementary-color","name":"Complementary Color Generator","url":"https://toolsly.tools/complementary-color"},{"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":"shade-tint-generator","name":"Shade & Tint Generator","url":"https://toolsly.tools/shade-tint-generator"},{"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"},{"slug":"wcag-contrast-checker","name":"WCAG Contrast Checker","url":"https://toolsly.tools/wcag-contrast-checker"}],"kind":"utility","slug":"tailwind-palette-extractor","name":"Tailwind Palette Extractor","description":"Generate a full 11-shade Tailwind-style palette (50–950) from any single hex color.","longDescription":"Generate a complete 11-shade Tailwind-style palette — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 — from any single hex / rgb / hsl color. The tool interpolates HSL lightness across the canonical Tailwind curve and applies modest saturation scaling at the extremes to match the official Tailwind v3 palette feel. Perfect for extending Tailwind with a brand color, building design tokens, or theming. Output includes a `tailwind.config.js` snippet you can paste straight into your `theme.extend.colors` map. Runs locally — no upload, no signup.","category":"color","categoryName":"Color","keywords":["tailwind palette generator","tailwind palette from hex","tailwind palette extractor","tailwind 50 to 950 generator","tailwind brand palette","tailwind shades generator","tailwind color scale generator","tailwind theme generator","tailwind config palette","tailwind extend colors","tailwind palette free","tailwind v3 palette generator"],"badge":"Palette","url":"https://toolsly.tools/tailwind-palette-extractor","inputs":[{"type":"text","key":"color","label":"Base color","placeholder":"#3b82f6","defaultValue":"#3b82f6","monospace":true,"help":"Hex, rgb(), hsl(), or a CSS color name. Used as anchor for the 500 shade."},{"type":"text","key":"name","label":"Palette name","defaultValue":"brand","placeholder":"brand","help":"Used in the tailwind.config.js snippet."}],"outputs":[{"key":"palette","label":"Tailwind-style palette (50–950)","multiline":true},{"key":"hexList","label":"Hex list","multiline":true},{"key":"tailwindConfig","label":"tailwind.config.js snippet","multiline":true},{"key":"cssVars","label":"CSS variables","multiline":true}],"invocation":{"webUi":"https://toolsly.tools/tailwind-palette-extractor","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."}}