{"$schema":"https://toolsly.tools/schemas/tool-manifest-v1.json","generated":"2026-05-20T20:47:38.301Z","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":"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"},{"slug":"color-name-finder","name":"Color Name Finder","url":"https://toolsly.tools/color-name-finder"}],"kind":"utility","slug":"shade-tint-generator","name":"Shade & Tint Generator","description":"Generate N evenly-spaced shades (darker) and tints (lighter) of any base color — runs locally.","longDescription":"Shades are darker variations of a base color (mixed with black); tints are lighter (mixed with white). This tool interpolates the HSL lightness from 0 (pure black) up through the base color and onward to 100 (pure white), producing N evenly distributed colors that smoothly transition through the base. Set the count between 3 and 20 for a complete dark → mid → light ramp. Useful for building consistent dark-mode palettes, hover/pressed state variants, and design tokens. All math runs in your browser — no upload, no signup.","category":"color","categoryName":"Color","keywords":["shade generator","tint generator","shade and tint generator","color ramp generator","lighter darker color","color shades online","color tints online","color variation generator","tonal palette generator","hsl lightness interpolation","design token colors","shade tint free"],"badge":"Palette","url":"https://toolsly.tools/shade-tint-generator","inputs":[{"type":"text","key":"color","label":"Base color","placeholder":"#3b82f6","defaultValue":"#3b82f6","monospace":true,"help":"Hex, rgb(), hsl(), or a CSS color name."},{"type":"number","key":"count","label":"Step count","defaultValue":9,"min":3,"max":20,"step":1,"help":"Total number of colors (shades + tints, including the base midpoint)."}],"outputs":[{"key":"ramp","label":"Shades → tints","multiline":true},{"key":"hexList","label":"Hex list","multiline":true},{"key":"cssVars","label":"CSS variables","multiline":true}],"invocation":{"webUi":"https://toolsly.tools/shade-tint-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."}}