Image to Power Apps Theme (Fluent v9 & v8)

Build the official Power Apps theme from an image or brand color, for modern controls (Fluent v9) and the Creator Kit (Fluent v8).

Upload a logo or screenshot, pick a brand color with the eyedropper or let the tool find the dominant color (the exact pixel value, not rounded). You get the App.Theme YAML for "Paste theme" and the Creator Kit palette as JSON and Power Fx. HueTorsion and Vibrancy are limited to -100 to 100, and names with special characters are quoted correctly.

Open Image to Theme

Free. You enter your email address once, then all tools are unlocked. Your data is processed locally in your browser.

How it works

Upload an image (PNG, JPG or SVG), it stays in your browser.
Click into the image with the eyedropper or let the tool find the dominant color.
Optionally adjust theme name, font, HueTorsion and Vibrancy.
Copy the YAML or the v8 palette and paste it into Power Apps.

Example: modern controls (Fluent v9)

Themes:
  BrandFromImage:
    Font: "'Segoe UI', 'Open Sans', sans-serif"
    BasePaletteColor: '#2e4bf0'
    HueTorsion: 0
    Vibrancy: 0

Example: Creator Kit palette (Fluent v8)

{
  "palette": {
    "themePrimary": "#0078d4",
    "themeLighterAlt": "#f3f9fd",
    "themeLighter": "#d0e7f8",
    "themeLight": "#a9d3f2",
    "themeDark": "#005ba1",
    "neutralPrimary": "#323130",
    "white": "#ffffff"
  }
}

Two theming systems in short

Power Apps has two approaches. The tool builds both, so you can pick the one you need:

Modern controls (Fluent v9): you only supply the base color, Power Apps computes the color ramp. Paste it from the app authoring menu: Themes, Add a theme, Paste theme. Settings only turns the feature on. In formulas you use App.Theme.
Creator Kit AppTheme (Fluent v8): the full 22-slot palette as JSON. Use it via ColorValue(AppTheme.palette.themePrimary).

Frequently asked questions

What is the difference between modern controls and the Creator Kit theme?

Modern controls (Fluent v9) use a YAML theme where you only supply BasePaletteColor, Power Apps computes the 16-slot ramp. The Creator Kit (Fluent v8) uses a full 22-slot palette as JSON.

Are my images uploaded?

No. The image is only drawn onto a canvas in your browser to pick the color.

How do I add the modern theme in Power Apps?

From the app authoring menu: Themes, Add a theme, Paste theme. Settings only turns the feature on. Then you use the theme via App.Theme.

What do HueTorsion and Vibrancy mean?

HueTorsion shifts the hue across the ramp, Vibrancy controls saturation. Both range from -100 to 100 and are optional (default 0).

Is the tool free?

Yes.

Related tips

#PowerPlatformTip 55: 'Picking colors'

All tips in the archive