{"$schema":"https://toolsly.tools/schemas/tool-manifest-v1.json","generated":"2026-10-20T13:00:48.383Z","discovery":{"catalog":"https://toptool.io/free-tools/tools.json","llmsTxt":"https://toptool.io/free-tools/llms.txt","sitemap":"https://toptool.io/free-tools/sitemap.xml"},"relatedTools":[{"slug":"shade-tint-generator","name":"Shade & Tint Generator","url":"https://toptool.io/free-tools/shade-tint-generator"},{"slug":"tailwind-color-finder","name":"Tailwind Color Finder","url":"https://toptool.io/free-tools/tailwind-color-finder"},{"slug":"material-palette","name":"Material Design Palette Generator","url":"https://toptool.io/free-tools/material-palette"},{"slug":"tailwind-shade-generator","name":"Tailwind Shade Generator","url":"https://toptool.io/free-tools/tailwind-shade-generator"},{"slug":"triadic-colors","name":"Triadic Colors Generator","url":"https://toptool.io/free-tools/triadic-colors"},{"slug":"analogous-colors","name":"Analogous Colors Generator","url":"https://toptool.io/free-tools/analogous-colors"},{"slug":"random-color","name":"Random Color Generator","url":"https://toptool.io/free-tools/random-color"},{"slug":"color-name-finder","name":"Color Name Finder","url":"https://toptool.io/free-tools/color-name-finder"}],"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","runsOn":"client","url":"https://toptool.io/free-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://toptool.io/free-tools/tailwind-palette-extractor","api":null,"notes":"Use the web UI to enter inputs and view the result; there is no public execution API."}}