{"$schema":"https://toolsly.tools/schemas/tool-manifest-v1.json","generated":"2026-10-20T13:00:48.530Z","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":"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":"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":"tailwind-palette-extractor","name":"Tailwind Palette Extractor","url":"https://toptool.io/free-tools/tailwind-palette-extractor"},{"slug":"tailwind-shade-generator","name":"Tailwind Shade Generator","url":"https://toptool.io/free-tools/tailwind-shade-generator"},{"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":"material-palette","name":"Material Design Palette Generator","description":"Generate a 10-step Material Design tonal palette (50–900) from any base color.","longDescription":"Generate the 10 Material Design 3 tonal palette steps — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 — from any base color. Each step is an HSL-lightness-interpolated approximation of the official MD3 tonal range, preserving your input's hue and saturation. Useful for theming Android apps, Material Web, or any system using the standard 10-stop tonal naming convention. Output includes hex, RGB, and CSS variable declarations for direct copy-paste. Runs entirely in your browser.","category":"color","categoryName":"Color","keywords":["material palette generator","material design palette","md3 palette","material tonal palette","material design colors","material 50 100 200 generator","material palette from hex","material theme generator","android color palette","material design 3 palette","material palette free","material color picker"],"badge":"Palette","runsOn":"client","url":"https://toptool.io/free-tools/material-palette","inputs":[{"type":"text","key":"color","label":"Base color","placeholder":"#3b82f6","defaultValue":"#3b82f6","monospace":true,"help":"Hex, rgb(), hsl(), or a CSS color name."}],"outputs":[{"key":"palette","label":"Tonal palette (50–900)","multiline":true},{"key":"hexList","label":"Hex list","multiline":true},{"key":"cssVars","label":"CSS variables","multiline":true},{"key":"kotlin","label":"Kotlin/Compose constants","multiline":true}],"invocation":{"webUi":"https://toptool.io/free-tools/material-palette","api":null,"notes":"Use the web UI to enter inputs and view the result; there is no public execution API."}}