[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-material-theme-builder-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":47,"alternatives-material-theme-builder-en-US":113,"related-resources-material-theme-builder-en-US":174},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":10,"tagline":11,"description":12,"seo":13,"features":16,"pros":22,"cons":26,"best_for":29,"cover":30,"icon":31,"pricing":32,"platform":10,"github_url":10,"twitter_url":10,"discord_url":10,"dribbble_url":10,"pricing_tiers":33,"views_count":34,"featured_rank":10,"categories":35,"tags":40,"files":10},165,"Material Theme Builder","material-theme-builder","https:\u002F\u002Fmaterial-foundation.github.io\u002Fmaterial-theme-builder\u002F","2025-11-11T09:36:08.08+00:00",null,"A Material Design 3 theme builder with dynamic color generation, brand customization, and cross-platform code export.","Dynamic Color:\nGenerates light\u002Fdark themes from device wallpaper\nHCT color picker for precise hue, chroma, and tone adjustments\nTheme Customization:\nCore colors: Primary, Secondary, Tertiary, Error, Neutral\nExtended colors: Add custom semantic colors (e.g., caution, onCaution)\nCross-platform Support:\nExport formats: Android (Jetpack Compose), Flutter, Web (CSS variables), JSON\nFigma plugin: Real-time theme application in design workflows\nWorkflow\n1. Select dynamic colors (wallpaper-based) or custom brand colors\n2. Adjust color roles and state layers\n3. Export code or JSON for project integration",{"title":14,"meta_description":15},"Material Theme Builder - A Material Design 3 theme builder with dynamic color generation, brand customization, and cross-platform code export. | DesignToolMark","Dynamic Color: Generates light\u002Fdark themes from device wallpaper HCT color picker for precise hue, chroma, and tone adjustments Theme Customization: Core col...",[17,18,19,20,21],"Dynamic color generation from device wallpaper for light\u002Fdark themes","HCT color picker for precise hue, chroma, and tone adjustments","Core color editing for Primary, Secondary, Tertiary, Error, Neutral","Custom semantic color support with extended color roles","Cross-platform code export for Material Design 3 implementation",[23,24,25],"Full Material Design 3 specification compliance","HCT color space provides perceptually accurate color adjustments","Generates complete light and dark theme pairs automatically",[27,28],"Only useful for Material Design 3 projects","Learning curve for understanding HCT color space and M3 roles","Android and web developers building Material Design 3 apps who need dynamic theming with proper accessibility.","cb0b2d27-b8ee-407f-b999-fde2343712ec.webp","7147a666-d614-4bf9-a5ec-b00035a68004.svg","free",{"free":3},0,[36],{"name":37,"slug":38,"sub_categories":39},"Colors & Palettes","colors-palettes",[],[41,44],{"name":42,"slug":43},"Colors","colors",{"name":45,"slug":46},"Freebie","freebie",[48,80,90,100],{"id":49,"url":50,"icon":10,"name":51,"slug":52,"tags":53,"cover":76,"tagline":77,"is_featured":78,"date_created":79,"date_updated":10},858,"https:\u002F\u002Fwww.genspark.ai\u002F","Genspark Design","genspark-design",[54,57,59,62,64,66,68,70,72,74],{"seo":10,"name":55,"slug":56},"AI Powered","ai-powered",{"seo":10,"name":10,"slug":58},"ai",{"seo":10,"name":60,"slug":61},"Freemium","freemium",{"seo":10,"name":10,"slug":63},"free-trial",{"seo":10,"name":10,"slug":65},"image-editing",{"seo":10,"name":10,"slug":67},"video",{"seo":10,"name":10,"slug":69},"animation",{"seo":10,"name":10,"slug":71},"prototyping",{"seo":10,"name":10,"slug":73},"no-code",{"seo":10,"name":10,"slug":75},"productivity","fc3931e4-3210-4155-a94b-da3a261fe281.webp","The next-gen AI for design — powered by Claude Opus 4.7",false,"2026-06-28T03:12:01.911314+00:00",{"id":81,"url":82,"icon":10,"name":83,"slug":84,"tags":85,"cover":87,"tagline":88,"is_featured":78,"date_created":89,"date_updated":10},857,"https:\u002F\u002Folivia-tsui.github.io\u002Fct\u002F","World's Best Scale Tool","worlds-best-scale-tool",[86],{"seo":10,"name":10,"slug":43},"eb5afb81-91ac-496d-96b6-bd870afbc2a8.webp","Advanced color scale and palette generation tool","2026-06-24T04:31:04.697212+00:00",{"id":91,"url":92,"icon":10,"name":93,"slug":94,"tags":95,"cover":97,"tagline":98,"is_featured":78,"date_created":99,"date_updated":10},856,"https:\u002F\u002Fwww.tints.dev\u002F","Tailwind CSS Color Generator","tailwind-css-color-generator",[96],{"seo":10,"name":10,"slug":43},"bd6eba7c-091e-4cfa-83c6-a7f3392e1032.webp","Tailwind CSS 11-color palette generator and API","2026-06-24T04:30:57.92162+00:00",{"id":101,"url":102,"icon":10,"name":103,"slug":104,"tags":105,"cover":110,"tagline":111,"is_featured":78,"date_created":112,"date_updated":10},855,"https:\u002F\u002Fscreensiz.es\u002F","Screensiz.es","screensiz-es",[106,108],{"seo":10,"name":107,"slug":32},"Free",{"seo":10,"name":10,"slug":109},"inspiration","b56672d4-1eab-4481-a3f5-4440977fb881.webp","Device screen sizes and viewport reference","2026-06-24T04:30:50.994519+00:00",[114,120,126,132,138,144,150,156,162,168],{"url":115,"name":116,"slug":117,"cover":118,"tagline":119},"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":121,"name":122,"slug":123,"cover":124,"tagline":125},"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":127,"name":128,"slug":129,"cover":130,"tagline":131},"https:\u002F\u002Fcolornamer.netlify.app\u002F","Color Namer","color-namer","screenshots\u002Fcolor-namer.webp","An interesting tool that finds a vivid, descriptive name for any hex color code.",{"url":133,"name":134,"slug":135,"cover":136,"tagline":137},"https:\u002F\u002Fwww.happyhues.co\u002F","Happy Hues","happy-hues","06ef73ee-10b3-439b-ac96-a85df6f400b9.webp","Learn Color Palettes in a Real-World Context",{"url":139,"name":140,"slug":141,"cover":142,"tagline":143},"http:\u002F\u002Fcolormind.io\u002F","Colormind","colormind","3b9fbb79-3f40-41ea-8b33-2d681fccc65a.webp","Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.",{"url":145,"name":146,"slug":147,"cover":148,"tagline":149},"https:\u002F\u002Fmycolor.space\u002F","ColorSpace","color-space","b1f850d0-7f74-413b-831e-d88bab9c5a35.webp","A color palette and gradient generator supporting color input for palettes and 3-color gradient creation.",{"url":151,"name":152,"slug":153,"cover":154,"tagline":155},"https:\u002F\u002Fcolordesigner.io\u002F","Color Designer","color-designer","b83f79d5-6a64-4b70-b079-2fc0114b5c53.webp","A comprehensive color tool platform with 12 tools including palette generators, gradients, and color pickers, supporting professional color management and multi-format export.",{"url":157,"name":158,"slug":159,"cover":160,"tagline":161},"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":163,"name":164,"slug":165,"cover":166,"tagline":167},"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":169,"name":170,"slug":171,"cover":172,"tagline":173},"https:\u002F\u002Fbrandcolors.net\u002F","BrandColors","brand-colors","screenshots\u002Fbrand-colors.webp","The Official Color Code Library for the World's Biggest Brands",[175,187,190],{"url":176,"icon":10,"name":177,"slug":178,"tags":179,"cover":184,"tagline":185,"is_featured":3,"date_created":186,"date_updated":10},"https:\u002F\u002Fcolorhunt.co","Color Hunt","color-hunt",[180,181,182],{"seo":10,"name":10,"slug":43},{"seo":10,"name":107,"slug":32},{"seo":10,"name":10,"slug":183},"gradient","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":82,"icon":10,"name":83,"slug":84,"tags":188,"cover":87,"tagline":88,"is_featured":78,"date_created":89,"date_updated":10},[189],{"seo":10,"name":10,"slug":43},{"url":92,"icon":10,"name":93,"slug":94,"tags":191,"cover":97,"tagline":98,"is_featured":78,"date_created":99,"date_updated":10},[192],{"seo":10,"name":10,"slug":43}]