[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-categories-en-US":3,"categories-en-US":3,"resource-realtime-colors-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":57,"alternatives-realtime-colors-en-US":124,"related-resources-realtime-colors-en-US":125},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":12,"features":14,"pros":21,"cons":27,"best_for":32,"cover":33,"icon":9,"pricing":34,"platform":35,"github_url":9,"twitter_url":9,"discord_url":9,"dribbble_url":9,"pricing_tiers":37,"views_count":39,"featured_rank":9,"categories":40,"tags":45,"files":9},644,"Realtime Colors","realtime-colors","https:\u002F\u002Frealtimecolors.com",null,"Visualize color palettes on a live UI mockup — see how your colors actually look in context","Realtime Colors is a free web tool that lets designers visualize color palettes applied to a live UI mockup in real-time. Unlike traditional color palette generators that show swatches in isolation, Realtime Colors renders your colors on a functional website layout — headers, buttons, cards, text, and backgrounds — so you can see exactly how they work together. Features include real-time color adjustment, contrast checking, CSS variable export, light\u002Fdark mode preview, and URL sharing for team collaboration. Essential for making informed color decisions in context.",{"title":13,"description":10},"Realtime Colors - Visualize color palettes on a live UI mockup — see how your colors actually look in context | DesignToolMark",[15,16,17,18,19,20],"Live UI mockup with real-time color preview","Real-time color adjustment and exploration","Built-in contrast checking","CSS variable export","Light and dark mode preview","Shareable URLs for team feedback",[22,23,24,25,26],"See colors in context, not isolation","Fast and intuitive interface","Contrast checking built in","CSS export ready for development","Free to use, no account needed",[28,29,30,31],"Limited to the provided mockup layout","No palette saving\u002Faccount features","No image upload or custom mockups","Export limited to CSS variables","Designers and developers who want to evaluate color palettes in a realistic UI context before committing to implementation.","f17efa2a-e7d2-41f4-944a-db7a8cec4a3b.webp","free",[36],"Web",{"free":3,"note":38},"Free to use",0,[41],{"name":42,"slug":43,"sub_categories":44},"Colors & Palettes","colors-palettes",[],[46,48,51,54],{"name":47,"slug":34},"Free",{"name":49,"slug":50},"Colors","colors",{"name":52,"slug":53},"Prototyping","prototyping",{"name":55,"slug":56},"Gradient","gradient",[58,77,93,110],{"id":59,"url":60,"icon":9,"name":61,"slug":62,"tags":63,"cover":73,"tagline":74,"is_featured":75,"date_created":76,"date_updated":9},670,"https:\u002F\u002Fattentioninsight.com","Attention Insight","attention-insight",[64,66,68,70],{"seo":9,"name":9,"slug":65},"wireframe",{"seo":9,"name":9,"slug":67},"user-research",{"seo":9,"name":9,"slug":69},"web-design",{"seo":9,"name":71,"slug":72},"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":78,"url":79,"icon":9,"name":80,"slug":81,"tags":82,"cover":90,"tagline":91,"is_featured":75,"date_created":92,"date_updated":9},669,"https:\u002F\u002Fwww.frontitude.com","Frontitude","frontitude",[83,84,85,87,89],{"seo":9,"name":9,"slug":65},{"seo":9,"name":9,"slug":67},{"seo":9,"name":9,"slug":86},"collaboration",{"seo":9,"name":9,"slug":88},"design-handoff",{"seo":9,"name":71,"slug":72},"5237122f-f736-4899-bd25-2002bf09dec2.webp","UX content management platform for multilingual products","2026-06-17T09:18:30.634258+00:00",{"id":94,"url":95,"icon":9,"name":96,"slug":97,"tags":98,"cover":107,"tagline":108,"is_featured":75,"date_created":109,"date_updated":9},668,"https:\u002F\u002Fwww.aura.build","Aura Build","aura-build",[99,100,101,102,104,106],{"seo":9,"name":9,"slug":65},{"seo":9,"name":9,"slug":53},{"seo":9,"name":9,"slug":69},{"seo":9,"name":9,"slug":103},"responsive",{"seo":9,"name":9,"slug":105},"icons",{"seo":9,"name":71,"slug":72},"be6ec3d1-5806-4cf8-bc58-5d536af6c04d.webp","AI-powered website builder and design assistant","2026-06-17T09:18:13.351637+00:00",{"id":111,"url":112,"icon":9,"name":113,"slug":114,"tags":115,"cover":121,"tagline":122,"is_featured":75,"date_created":123,"date_updated":9},667,"https:\u002F\u002Fwww.magicpatterns.com","Magic Patterns","magic-patterns",[116,117,118,119,120],{"seo":9,"name":9,"slug":65},{"seo":9,"name":9,"slug":53},{"seo":9,"name":9,"slug":86},{"seo":9,"name":9,"slug":88},{"seo":9,"name":71,"slug":72},"6d6649e5-e83d-44c6-bdf0-91d6cb530736.webp","AI prototype generator for product teams","2026-06-17T09:18:05.299046+00:00",[],[126,137,151],{"url":127,"icon":9,"name":128,"slug":129,"tags":130,"cover":134,"tagline":135,"is_featured":3,"date_created":136,"date_updated":9},"https:\u002F\u002Fcolorhunt.co","Color Hunt","color-hunt",[131,132,133],{"seo":9,"name":9,"slug":50},{"seo":9,"name":47,"slug":34},{"seo":9,"name":9,"slug":56},"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":138,"icon":139,"name":140,"slug":141,"tags":142,"cover":147,"tagline":148,"is_featured":9,"date_created":149,"date_updated":150},"https:\u002F\u002Fmaterialui.co\u002F","15324c56-05b1-4716-bbfb-eec368aea396.svg","Material UI Color Tool","material-ui-color-tool",[143,144,146],{"seo":9,"name":9,"slug":50},{"seo":9,"name":9,"slug":145},"freebie",{"seo":9,"name":9,"slug":56},"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",{"url":152,"icon":153,"name":154,"slug":155,"tags":156,"cover":160,"tagline":161,"is_featured":9,"date_created":162,"date_updated":163},"https:\u002F\u002Fgradienthunt.com\u002F","0c9b5e0d-44d8-4596-bd46-46a18300b880.svg","Gradient Hunt","gradient-hunt",[157,158,159],{"seo":9,"name":9,"slug":50},{"seo":9,"name":9,"slug":145},{"seo":9,"name":9,"slug":56},"screenshots\u002Fgradient-hunt.webp","A free, open platform for sharing thousands of handcrafted gradients with one-click code copying.","2025-10-07T07:14:33.847+00:00","2026-06-12T06:50:15.922637+00:00"]