[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-categories-en-US":3,"categories-en-US":3,"resource-color-magic-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":48,"alternatives-color-magic-en-US":116,"related-resources-color-magic-en-US":176},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":10,"tagline":11,"description":12,"seo":13,"features":15,"pros":20,"cons":24,"best_for":27,"cover":28,"icon":29,"pricing":30,"platform":10,"github_url":10,"twitter_url":10,"discord_url":10,"dribbble_url":10,"pricing_tiers":31,"views_count":32,"featured_rank":10,"categories":33,"tags":38,"files":10},172,"ColorMagic","color-magic","https:\u002F\u002Fcolormagic.app\u002F","2025-11-12T01:48:27.548+00:00",null,"An AI-powered color palette generator that creates harmonious schemes from keywords or images, supporting customization and multi-platform use.","AI Generation:\nCreates palettes from keywords (e.g., \"sunset\", \"cyberpunk\") or images\nSupports complementary, analogous color schemes\nAdjust brightness, saturation, color temperature\nSave and export palettes (CSS, image formats)\nUse Cases\nWeb design, branding, graphic design, presentations",{"title":14,"description":11},"ColorMagic - An AI-powered color palette generator that creates harmonious schemes from keywords or images, supporting customization and multi-platform use. | DesignToolMark",[16,17,18,19],"Ready-made UI components","Figma\u002FSketch\u002FXD formats","Responsive layouts","Customizable design tokens",[21,22,23],"Color palette generation","Export to CSS\u002Fdesign tools","Multiple export formats",[25,26],"Limited to color generation only","May require learning curve","Save and export palettes (CSS, image formats) Web design, branding, graphic design, presentations","74c04d36-97eb-4937-98d3-6c161da37d15.webp","7e9fec34-f8c1-4fd3-8aab-94bf7ce8bcf7.svg","free",{"free":3},0,[34],{"name":35,"slug":36,"sub_categories":37},"Colors & Palettes","colors-palettes",[],[39,42,45],{"name":40,"slug":41},"Colors","colors",{"name":43,"slug":44},"Freebie","freebie",{"name":46,"slug":47},"Gradient","gradient",[49,68,84,102],{"id":50,"url":51,"icon":10,"name":52,"slug":53,"tags":54,"cover":64,"tagline":65,"is_featured":66,"date_created":67,"date_updated":10},670,"https:\u002F\u002Fattentioninsight.com","Attention Insight","attention-insight",[55,57,59,61],{"seo":10,"name":10,"slug":56},"wireframe",{"seo":10,"name":10,"slug":58},"user-research",{"seo":10,"name":10,"slug":60},"web-design",{"seo":10,"name":62,"slug":63},"Freemium","freemium","ef36c4d0-cade-4956-a397-b7c4436ad473.webp","AI-powered attention prediction and visual analytics",false,"2026-06-17T09:18:38.384779+00:00",{"id":69,"url":70,"icon":10,"name":71,"slug":72,"tags":73,"cover":81,"tagline":82,"is_featured":66,"date_created":83,"date_updated":10},669,"https:\u002F\u002Fwww.frontitude.com","Frontitude","frontitude",[74,75,76,78,80],{"seo":10,"name":10,"slug":56},{"seo":10,"name":10,"slug":58},{"seo":10,"name":10,"slug":77},"collaboration",{"seo":10,"name":10,"slug":79},"design-handoff",{"seo":10,"name":62,"slug":63},"5237122f-f736-4899-bd25-2002bf09dec2.webp","UX content management platform for multilingual products","2026-06-17T09:18:30.634258+00:00",{"id":85,"url":86,"icon":10,"name":87,"slug":88,"tags":89,"cover":99,"tagline":100,"is_featured":66,"date_created":101,"date_updated":10},668,"https:\u002F\u002Fwww.aura.build","Aura Build","aura-build",[90,91,93,94,96,98],{"seo":10,"name":10,"slug":56},{"seo":10,"name":10,"slug":92},"prototyping",{"seo":10,"name":10,"slug":60},{"seo":10,"name":10,"slug":95},"responsive",{"seo":10,"name":10,"slug":97},"icons",{"seo":10,"name":62,"slug":63},"be6ec3d1-5806-4cf8-bc58-5d536af6c04d.webp","AI-powered website builder and design assistant","2026-06-17T09:18:13.351637+00:00",{"id":103,"url":104,"icon":10,"name":105,"slug":106,"tags":107,"cover":113,"tagline":114,"is_featured":66,"date_created":115,"date_updated":10},667,"https:\u002F\u002Fwww.magicpatterns.com","Magic Patterns","magic-patterns",[108,109,110,111,112],{"seo":10,"name":10,"slug":56},{"seo":10,"name":10,"slug":92},{"seo":10,"name":10,"slug":77},{"seo":10,"name":10,"slug":79},{"seo":10,"name":62,"slug":63},"6d6649e5-e83d-44c6-bdf0-91d6cb530736.webp","AI prototype generator for product teams","2026-06-17T09:18:05.299046+00:00",[117,123,129,135,141,147,152,158,164,170],{"url":118,"name":119,"slug":120,"cover":121,"tagline":122},"https:\u002F\u002Fwww.shadergradient.co\u002F","ShaderGradient","shader-gradient","25d6792e-1d64-46dd-9110-1c4dd1b39d27.webp","A dynamic gradient generator with Figma\u002FFramer plugins and React components, supporting 3D effect customization.",{"url":124,"name":125,"slug":126,"cover":127,"tagline":128},"https:\u002F\u002Foklch.com\u002F","Oklch","oklch","bc98de7e-d6b1-4658-b7a7-ea6547508d8b.webp","An OKLCH color picker and converter with lightness, chroma, hue adjustments and multi-format conversion.",{"url":130,"name":131,"slug":132,"cover":133,"tagline":134},"https:\u002F\u002Fpalettemaker.com\u002F","Palettemaker","palettemaker","fa7f4a06-1734-4b03-b43e-a143f8f1da1c.webp","An AI color palette generator with live preview on real designs, free to use and supporting multi-format export.",{"url":136,"name":137,"slug":138,"cover":139,"tagline":140},"https:\u002F\u002Fcolpat.itsvg.in\u002F","Colpat","colpat","36ce2391-da91-499a-8606-db1b26ba6b01.webp","An AI-powered color toolbox supporting Tailwind CSS palette generation, gradients, image extraction, and multi-format export.",{"url":142,"name":143,"slug":144,"cover":145,"tagline":146},"https:\u002F\u002Fmeodai.github.io\u002Fpoline\u002F","Poline","poline","579ac455-722f-4fb6-9ecf-d7f75ec0e427.webp","A polar coordinate-based color palette generator that creates harmonious schemes by connecting anchor points, supporting custom position functions and HSL color model.",{"url":148,"name":149,"slug":149,"cover":150,"tagline":151},"https:\u002F\u002Fcolorca.org\u002F","colorca","7ee9485b-d3c8-4e59-b651-e2ab631dc414.webp","An HSLuv color space tool for creating accessible palettes for digital products, with multi-color systems and brightness level adjustments.",{"url":153,"name":154,"slug":155,"cover":156,"tagline":157},"https:\u002F\u002Falphredo.app\u002F","Alphredo","alphredo","f57df3b6-ee55-4cfe-a016-0b38cb8a968d.webp","An alpha color generator that creates translucent colors visually matching their opaque counterparts, with background and saturation adjustment support.",{"url":159,"name":160,"slug":161,"cover":162,"tagline":163},"https:\u002F\u002Fcolorschemer.com\u002F","Color Schemer","color-schemer","screenshots\u002Fcolor-schemer.webp","A color scheme generation tool with 30+ algorithms and resource libraries, supporting Mac and PC platforms to enhance design efficiency.",{"url":165,"name":166,"slug":167,"cover":168,"tagline":169},"https:\u002F\u002Fatmos.style\u002F","Atmos","atmos","4ccc3028-7544-4106-a17a-b80bf8624c15.webp","A UI design color tool with LCH\u002FOKLCH editing, contrast checking, and multi-platform export for professional palette creation.",{"url":171,"name":172,"slug":173,"cover":174,"tagline":175},"https:\u002F\u002Fwww.oddcontrast.com\u002F","OddContrast","odd-contrast","582057d6-3d24-401b-a459-159ba2e734f2.webp","A color contrast checker supporting multiple color spaces and verifying WCAG compliance.",[177,189,201],{"url":178,"icon":10,"name":179,"slug":180,"tags":181,"cover":186,"tagline":187,"is_featured":3,"date_created":188,"date_updated":10},"https:\u002F\u002Fcolorhunt.co","Color Hunt","color-hunt",[182,183,185],{"seo":10,"name":10,"slug":41},{"seo":10,"name":184,"slug":30},"Free",{"seo":10,"name":10,"slug":47},"e4a2e456-fabc-4bbf-8729-ecaf1cbfcbb6.webp","A curated collection of beautiful color palettes for designers and artists","2026-06-16T07:14:22.345664+00:00",{"url":190,"icon":10,"name":191,"slug":192,"tags":193,"cover":198,"tagline":199,"is_featured":10,"date_created":200,"date_updated":10},"https:\u002F\u002Frealtimecolors.com","Realtime Colors","realtime-colors",[194,195,196,197],{"seo":10,"name":10,"slug":41},{"seo":10,"name":184,"slug":30},{"seo":10,"name":10,"slug":92},{"seo":10,"name":10,"slug":47},"f17efa2a-e7d2-41f4-944a-db7a8cec4a3b.webp","Visualize color palettes on a live UI mockup — see how your colors actually look in context","2026-06-16T07:16:47.351438+00:00",{"url":202,"icon":203,"name":204,"slug":205,"tags":206,"cover":210,"tagline":211,"is_featured":10,"date_created":212,"date_updated":213},"https:\u002F\u002Fmaterialui.co\u002F","15324c56-05b1-4716-bbfb-eec368aea396.svg","Material UI Color Tool","material-ui-color-tool",[207,208,209],{"seo":10,"name":10,"slug":41},{"seo":10,"name":10,"slug":44},{"seo":10,"name":10,"slug":47},"screenshots\u002Fmaterial-ui-color-tool.webp","Material UI Color Tool provides a Material Design-styled color scheme generation and preview tool.","2025-10-18T09:23:35.221+00:00","2026-06-12T06:58:27.97347+00:00"]