search

MicrosoftDocs / windows-dev-docs

Conceptual and overview content for developing Windows apps
Creative Commons Attribution 4.0 International
671 stars 1.19k forks source link

Accent color algorithm #1673

Open jolleekin opened 5 years ago

jolleekin commented 5 years ago

What is the algorithm that generates light and dark shades of the accent color? Can it be made public?

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

jevansaks commented 5 years ago

This used to be in the docs but I can't find it anymore. @chigy can you update this to include it?

chigy commented 5 years ago

@jolleekin , is this page not what you are looking for? https://docs.microsoft.com/en-us/windows/uwp/design/style/color#accent-color-palette

jolleekin commented 5 years ago

@chigy What I mean is the actual algorithm to calculate the light and dark shades of an accent color.

chigy commented 5 years ago

@jolleekin , the actual algorithm is not public and I do not believe there's any plan to do so. If it is available, how would you use it? We do provide a way for you to get different shades of accent color through Theme Resources as well as grammatically. What is missing that this does not give you? I'm just curious to know about the gap.

jolleekin commented 5 years ago

@chigy I have a package of general purpose web components (text box, combo box, dialog, menu, …) based on Microsoft design language. Part of that package is a theme manager that allows users to dynamically change theme properties (accent color, light/dark mode, and so on). When the accent color is changed, the theme manager will automatically recalculate the light and dark shades and update the theme stylesheet. I tried to reverse-engineer the algorithm but didn't succeed.

chigy commented 5 years ago

@jolleekin , I reached out to the team who might be able to help here but they've got a bit of moving of the resources around and I cannot pinpoint a person who can help answer this question. Sorry about that but I'm trying...

tipa commented 5 years ago

I would also be interested in that algorithm - any updates to this?

YellowAfterlife commented 5 years ago

The only thing that I can find on the matter is this StackOverflow answer from 2017, which links back to this page and cites the formula for title bar font color,

    Color c = uiSettings.GetColorValue(UIColorType.Accent);

    element.RequestedTheme = ((5 * c.G + 2 * c.R + c.B) <= 8 * 128)
        ? ElementTheme.Light
        : ElementTheme.Dark;

Having these little formulas public is essential for having applications fit in with the OS - if you experiment with middle-of-luminance-spectrum accent colors (e.g. #06A8C3), you can find that most people were too sane to sit through and figure out the exact formulas by experiment, and thus plenty of software looks slightly or not so slightly off - ranging from missing the lighter/darker accent shades (which you usually cannot tell unless they are next to those of a native window) to not calculating the title color correctly, at which point it might be an annoyance to end user.

Preppy commented 5 years ago

@jolleekin , I reached out to the team who might be able to help here but they've got a bit of moving of the resources around and I cannot pinpoint a person who can help answer this question. Sorry about that but I'm trying...

Thanks for reaching out and pointing me to this thread. I can confirm that the formula mentioned by YellowAfterlife is the formula in use here. That is the old logic used dating back at least to ComCtl and we have maintained compatibility with that.

tipa commented 5 years ago

I was rather curious about how UWP is calculating the shades based on an accent color, not the theme

Preppy commented 5 years ago

That is not currently documented that I am aware of. Quick general overview:

There's no meaningful way to perfectly mesh with the generated accent color "ramps" without simply using the supported API set that provides them. The generating formula has changed and will change as needed, so obtaining the correct UIColorType for your usage is probably the best most supportable plan.

LucaLindholm commented 4 years ago

You can find some color algorithms in the Fluent XAML Theme Editor in the Windows Store, made by Microsoft itself to help to customize app theme colors at once...

https://www.microsoft.com/store/productId/9N2XD3Q8X57C

...and in particular into it's source code:

https://github.com/Microsoft/fluent-xaml-theme-editor

Best regards

SFM61319 commented 3 years ago

I have a bunch of questions:

  1. What is the algorithm being talked about here?
  2. Will it be made public in the future?

    An accent color algorithm in the Windows shell generates light and dark shades of the accent color.

  3. What do you mean by "an accent color algorithm in the Windows Shell"? i. Is it an executable that is run to generate a palette based on a given SystemAccentColor?
  4. Does Fluent UI React use the same algorithm? If not, why doesn't it use it to make WinUI as a whole more consistent across platforms, since it is basically WinUI but for the web?
  5. What actually is the algorithm (the formulae, values used, etc.), if I may ask?
Preppy commented 3 years ago

1: As you note, that algorithm is not currently public.

2: I don't know if anybody here can or should speak to future plans in this volatile world. If you do want to achieve color parity, you would want to use the existing APIs.

3: That means that the classic Windows shell calls some common internal code to determine the color ramp (light to dark) used.

3i: I'm unaware of any executable that would generate a palette for you. You would generally want to use any existing APIs. I'm unaware of any APIs to get at these values within classic shell / classic shell applications.

4: I'm personally unaware. For some usages in Windows there is complicated internal mapping to map accent colors to color sets, so it is entirely possible that there is some internal mapping here. I don't know if Fluent UI exposes accent color-based ramps.

4b: Different design teams have different design visions: it's entirely possible that a new color system is viewed as being a full contextual replacement for a color system used in a different scenario. There's always a tough balance between legacy support and needlessly encumbering an implementation.

5: Those calculations are not public to my knowledge. I believe my comments above on Jul 24, 2019 are the most extensive references available, and they do point out that calculating these yourself would be troublesome as the handling code itself has internal undocumented variances.

SFM61319 commented 3 years ago

Ah, got it. Thank you for the detailed explanation!

Also, can you please tell me more about the APIs you mentioned?

Preppy commented 3 years ago

The entirety of the documentation for this specific area of interest that I'm aware of across all surfaces can be found here:

Beyond that I am unaware of any further documentation. The accent color ramp will not be directly accessible nor deducible from some code surfaces.