{"$schema":"https://toolsly.tools/schemas/tool-manifest-v1.json","generated":"2026-06-02T15:45:19.828Z","discovery":{"catalog":"https://toptool.io/tools.json","llmsTxt":"https://toptool.io/llms.txt","sitemap":"https://toptool.io/sitemap.xml"},"relatedTools":[{"slug":"triadic-colors","name":"Triadic Colors Generator","url":"https://toptool.io/triadic-colors"},{"slug":"material-palette","name":"Material Design Palette Generator","url":"https://toptool.io/material-palette"},{"slug":"tailwind-palette-extractor","name":"Tailwind Palette Extractor","url":"https://toptool.io/tailwind-palette-extractor"},{"slug":"analogous-colors","name":"Analogous Colors Generator","url":"https://toptool.io/analogous-colors"},{"slug":"color-converter","name":"Color Converter","url":"https://toptool.io/color-converter"},{"slug":"random-color","name":"Random Color Generator","url":"https://toptool.io/random-color"},{"slug":"tailwind-color-finder","name":"Tailwind Color Finder","url":"https://toptool.io/tailwind-color-finder"},{"slug":"color-blender","name":"Color Blender","url":"https://toptool.io/color-blender"}],"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://toptool.io/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://toptool.io/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."}}