TL;DR: Grab a website’s full color palette instantly with Microsoft Edge DevTools’ CSS Overview to match your Power App to your brand.
💡 Challenge
Maintaining a consistent corporate design, especially colors, in Power Apps can be tedious. How can you quickly grab all the colors used on a webpage?
✅ Solution
Use Microsoft Edge’s built-in CSS Overview in DevTools to extract a site’s color palette instantly.
🔧 How It’s Done
1. Open the webpage in Edge
🔸 Navigate to the site whose colors you want to capture.
2. Open DevTools
🔸 Right-click and select Inspect to open Edge DevTools on the current page.
3. Go to CSS Overview
🔸 Click the CSS Overview tab in DevTools and start the capture.
4. Review the extracted data
🔸 You’ll see all colors, fonts, and font sizes used on the website.
🎉 Result
Copy the listed color values and paste them into your Power Apps template (as shown in PowerPlatformTip #50). Your app now matches your website’s color scheme, ensuring brand consistency.
🌟 Key Advantages
🔸 Quickly gather a full color palette without manual sampling
🔸 Ensure uniform branding across web and app
🔸 No extra extensions needed, built into Edge DevTools
🎥 Video Tutorial
🛠️ FAQ
Q: What is CSS Overview in Edge?
CSS Overview is a feature in Microsoft Edge DevTools that analyzes a page’s CSS and summarizes key data, colors, fonts, media queries, and more.
Q: Can I use this on any website?
Yes. As long as the page is accessible in Edge, CSS Overview will scan and list the styling details for you.
Q: Do I need any browser extensions or add-ons?
No, CSS Overview is built into Edge’s developer tools; no additional installations are required.
Marcel Lehmann
Microsoft MVP