#PowerPlatformTip 55: 'Picking colors'

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? And once you have the palette, Power Apps’ Power Fx has no native concept of a CSS variable, so without a deliberate structure you end up retyping the same hex codes into dozens of individual controls’ Fill and Color properties, with no single place to update them later.

✅ Solution

Use Microsoft Edge’s built-in CSS Overview in DevTools to extract a site’s color palette instantly, then centralize the extracted values as named formulas instead of hardcoding hex codes control by control.

🔧 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. CSS Overview groups colors by where they’re used (background, text, border), which also tells you at a glance which shade is your primary brand color versus an incidental border or hover-state tint, useful context that a raw color-picker sample of one pixel wouldn’t give you.

5. Centralize the palette as named formulas

🔸 Instead of pasting each hex value into every control that needs it, define them once as named formulas in App settings (e.g. BrandPrimary =: ColorValue("#2DD4BF");). Reference BrandPrimary from any control’s Fill or Color property across the whole app. When the brand palette changes later, you update one formula instead of hunting through every screen for a hardcoded hex value.

6. Check contrast, not just match

🔸 A color pulled straight from a marketing site’s hero banner isn’t automatically safe as, say, button text on a white background. Run the extracted foreground/background pairs through a WCAG contrast checker before locking them into your named formulas, matching the brand exactly is worth less than an app that’s actually readable.

🎉 Result

Copy the listed color values and paste them into your Power Apps template (as shown in PowerPlatformTip #50), ideally via named formulas rather than one-off hex values. Your app now matches your website’s color scheme, ensuring brand consistency, and stays easy to re-theme later.

🌟 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

🔸 Named formulas turn a one-time color match into a maintainable, single-source theme for the whole app

🎥 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.

🔗 Related Tips

🔸 #PowerPlatformTip 50: ‘Use TemplateApp’ - apply the palette you just extracted to the Material Design template referenced above.

🔸 #PowerPlatformTip 22: ‘Change Fill & Color’ - centralize those extracted colors in a single theme variable across your app.