Windows Accent Colours

In a new app concept I’m prototyping, I wanted to allow the user to select a colour for each main item which would effect the heading background colour.

Like this: (note; this is the end result)

Having done similar years ago, I remember the accessibility/legibility concerns this gave me. Allowing your customers to pick any colour they want is not ideal;

If you go completely free form (a full colour picker) then you hit the following problems:

• Ease of use suffers compared to a quick pick list.
• Present too many choices (decision fatigue).
• Many shades (very light and very dark) make it difficult to read and see UI elements.
• Some colours should absolutely not be offered (Black when the text is black, for example.

Effectively you are giving the users more work and at the same time a rope with which to hang themselves (Even if a colour is OK today, what happens when the theme changes?)

So, options?

Windows gives a list of ‘named’ colours. So how about that?

Well, it also doesn’t guarantee accessibility or contrast. They’re a list of general use colours, not a curated list for this purpose.

If only someone had spent mega dollars researching and building a list that can be relied upon?

Enter Microsoft.

Their Accent Colours serve effectively this exact purpose. Yay!

So I went hunting for an API or enumeration of them. I was aghast to find that one doesn’t seem to exist. Not even a list. I could get the current theme accent, but not them all.

Having spent a few days on and off looking and asking every learned person I could get my hands on, I final gave in and did it the brute force way. In fairness; this possibility was obvious days earlier but I refused to accept I couldn’t do it smarter.

I opened the Windows Personalisation settings, took a snippet and used a colour picker in Paint.Net to get teh Hex values. With that info I used the hover tooltip in Settings to get the colour friendly names.

To save you the wasted time replicating this; here is my list of Windows accent colours!

“#FFB900”, “Yellow Gold”
“#FF8C00”, “Gold”
“#F7630C”, “Orange Bright”
“#CA5010”, “Orange Dark”
“#DA3B01”, “Rust”
“#EF6950”, “Pale Rust”
“#D13438”, “Brick Red”
“#FF4343”, “Mod Red”

“#E74856”, “Pale Red”
“#E81123”, “Red”
“#EA005E”, “Rose Bright”
“#C30052”, “Rose”
“#E3008C”, “Plum Light”
“#BF0077”, “Plum”
“#C239B3”, “Orchid Light”
“#9A0089”, “Orchid”

“#0078D7”, “Default Blue”
“#0063B1”, “Navy Blue”
“#8E8CD8”, “Purple Shadow”
“#6B69D6”, “Purple Shadow Dark”
“#8764B8”, “Iris Pastel”
“#744DA9”, “Iris Spring”
“#B146C2”, “Violet Red Light”
“#881798”, “Violet Red”

“#0099BC”, “Cool Blue Bright”
“#2D7D9A”, “Cool Blue”
“#00B7C3”, “Seafoam”
“#038387”, “Seafoam Team”
“#00B294”, “Mint Light”
“#018574”, “Mint Dark”
“#00CC6A”, “Turf Green”
“#10893E”, “Sport Green”

“#7A7574”, “Gray”
“#5D5A58”, “Gray Brown”
“#68768A”, “Steel Blue”
“#515C6B”, “Metal Blue”
“#567C73”, “Pale Moss”
“#486860”, “Moss”
“#498205”, “Meadow Green”
“#107C10”, “Green”

“#767676”, “Overcast”
“#4C4A48”, “Storm”
“#69797E”, “Blue Gray”
“#4A5459”, “Gray Dark”
“#647C64”, “Liddy Green”
“#525E54”, “Sage”
“#847545”, “Camouflage Desert”
“#7E735F”, “Camouflage”

…listed in groups of 5 representing the horizontal rows in the settings picker.

Is it perfect? No. it wold be better if I could check the Accent-Background colours, but beggars can’t be choosers.

If you spot any errors, let me know.

Enjoy!
Rob.