{"$schema":"https://toolsly.tools/schemas/tool-manifest-v1.json","generated":"2026-06-02T15:45:19.820Z","discovery":{"catalog":"https://toptool.io/tools.json","llmsTxt":"https://toptool.io/llms.txt","sitemap":"https://toptool.io/sitemap.xml"},"relatedTools":[{"slug":"color-name-finder","name":"Color Name Finder","url":"https://toptool.io/color-name-finder"},{"slug":"tailwind-color-finder","name":"Tailwind Color Finder","url":"https://toptool.io/tailwind-color-finder"},{"slug":"color-converter","name":"Color Converter","url":"https://toptool.io/color-converter"},{"slug":"triadic-colors","name":"Triadic Colors Generator","url":"https://toptool.io/triadic-colors"},{"slug":"analogous-colors","name":"Analogous Colors Generator","url":"https://toptool.io/analogous-colors"},{"slug":"random-color","name":"Random Color Generator","url":"https://toptool.io/random-color"},{"slug":"wcag-contrast-checker","name":"WCAG Contrast Checker","url":"https://toptool.io/wcag-contrast-checker"},{"slug":"hsv-color-picker","name":"HSV Color Picker","url":"https://toptool.io/hsv-color-picker"}],"kind":"utility","slug":"complementary-color","name":"Complementary Color Generator","description":"Find the complementary (opposite) color for any hex / rgb / hsl input — instant, free, no upload.","longDescription":"The complementary color is the one diametrically opposite on the HSL color wheel — exactly 180° away. Paste any color (hex `#RRGGBB`, `rgb()`, `hsl()`, or a CSS name) and this tool converts to HSL, rotates the hue by 180°, and converts back to RGB/hex. Complementary pairs offer the highest visual contrast and are a classic choice for accent buttons, headlines on backgrounds, or eye-catching call-to-actions. Runs entirely in your browser — your color never leaves the page.","category":"color","categoryName":"Color","keywords":["complementary color","complementary color generator","opposite color","color wheel","complementary hex","complementary rgb","complementary hsl","color theory tool","color contrast pair","complementary color online","complementary color free","color flip 180"],"badge":"Palette","url":"https://toptool.io/complementary-color","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":"preview","label":"Base preview","multiline":true},{"key":"compPreview","label":"Complement preview","multiline":true},{"key":"baseHex","label":"Base — Hex"},{"key":"baseRgb","label":"Base — RGB"},{"key":"baseHsl","label":"Base — HSL"},{"key":"compHex","label":"Complement — Hex"},{"key":"compRgb","label":"Complement — RGB"},{"key":"compHsl","label":"Complement — HSL"}],"invocation":{"webUi":"https://toptool.io/complementary-color","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."}}