{"$schema":"https://toolsly.tools/schemas/tool-manifest-v1.json","generated":"2026-06-02T15:45:19.849Z","discovery":{"catalog":"https://toptool.io/tools.json","llmsTxt":"https://toptool.io/llms.txt","sitemap":"https://toptool.io/sitemap.xml"},"relatedTools":[{"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":"shade-tint-generator","name":"Shade & Tint Generator","url":"https://toptool.io/shade-tint-generator"},{"slug":"gradient-generator","name":"CSS Gradient Generator","url":"https://toptool.io/gradient-generator"},{"slug":"color-name-finder","name":"Color Name Finder","url":"https://toptool.io/color-name-finder"},{"slug":"color-converter","name":"Color Converter","url":"https://toptool.io/color-converter"},{"slug":"complementary-color","name":"Complementary Color Generator","url":"https://toptool.io/complementary-color"},{"slug":"triadic-colors","name":"Triadic Colors Generator","url":"https://toptool.io/triadic-colors"}],"kind":"utility","slug":"color-blender","name":"Color Blender","description":"Blend two colors together with an adjustable ratio — mix in RGB or HSL color space and see hex, RGB, HSL output.","longDescription":"Enter two colors in any supported format (hex, RGB, HSL, or CSS name) and set a blend ratio from 0 to 100. Choose between RGB and HSL blending modes — RGB interpolates red, green and blue channels linearly, while HSL interpolates hue (shortest arc), saturation and lightness for perceptually smoother gradients. The tool outputs the blended color in hex, RGB and HSL formats, plus the nearest Tailwind CSS color name. Perfect for designers creating color palettes, generating midpoint colors, or exploring color mixing theory. All processing happens locally in your browser.","category":"color","categoryName":"Color","keywords":["color blender","color mixer","blend colors online","color blending tool","mix two colors","color interpolation","rgb color mixer","hsl color blender","color midpoint","gradient midpoint","color mixing calculator","blend hex colors","color palette mixer"],"badge":"Blender","url":"https://toptool.io/color-blender","inputs":[{"type":"text","key":"color1","label":"Color 1","placeholder":"#FF0000 or red","defaultValue":"#3b82f6","monospace":true,"help":"First color — hex, rgb(), hsl(), or CSS name."},{"type":"text","key":"color2","label":"Color 2","placeholder":"#00FF00 or green","defaultValue":"#ef4444","monospace":true,"help":"Second color — hex, rgb(), hsl(), or CSS name."},{"type":"number","key":"ratio","label":"Blend ratio (%)","defaultValue":50,"min":0,"max":100,"step":1,"help":"0% = pure Color 1, 100% = pure Color 2, 50% = even mix."},{"type":"select","key":"mode","label":"Blend mode","defaultValue":"rgb","choices":[{"value":"rgb","label":"RGB (linear)"},{"value":"hsl","label":"HSL (perceptual)"}]}],"outputs":[{"key":"hex","label":"Blended hex"},{"key":"rgb","label":"Blended RGB"},{"key":"hsl","label":"Blended HSL"},{"key":"tailwind","label":"Nearest Tailwind color"}],"invocation":{"webUi":"https://toptool.io/color-blender","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."}}