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.

New App: Year in Pixels

This month a new app joined the Valley Software stables on Windows 10, Xbox and Mixed Reality.

Year in Pixels is a take on the popular diary technique of ‘Pixel Journals’ with a modern Windows 10 design and feel.

At it’s heart; Year in Pixels is a year calendar broken up into a grid appearance of Months down the side and days along the top.

This slideshow requires JavaScript.

You can colour each ‘Pixel’ (Cell) to mark something about that day. It is regularly used to track mood and emotions in a fast, simple way without any onerous typing or text. By removing this requirement it becomes really easy to record regardless of feeling or even being busy.

Another common use is the daily tick sheet to record doing a certain activity each day.

The beauty of this method is in:

  • It’s visually appealing.
  • Fast to enter.
  • Ease of spotting patterns, warning signs or achievements as they arise.

I have also tried something different with the monetisation. Rather than make it paid with trial it is FREE with ad support. The further options, and removing ads are individual IAP to purchase cheaply in the app so you can customise only what you need. Alternatively I have also included an ‘bundle’ IAP which gives you all the IAP for a lower combined price.

Get it now from Microsoft Store and let me know what you think!

Rob.

English badge

As an added bonus : here are free codes to unlock the Patterns and OneDrive capabilities for the first 200 people!

Free Patterns In App Purchase unlock

Free OneDrive In App Purchase unlock

Easy Writer – New Freature: Auto Save.

From your feedback, I have completed adding an Autosave feature to Easy Writer.

AutoSave
If you look closely, you’ll see the AutoSave indicator fade in and out again in the top corner.

It’s minimal, so as not to be distracting, but should be a reassuring reminder as you create.

AutoSave happens every 2 minutes while in Edit mode.

Releasing to store this week!

Rob.

Dipping my toe in Xamarin; Hot Tip for Navigation.

I’ve been tinkering in Xamarin, to allow my development to more easily target multiple mobile platforms.

I’ve made a start on two apps, and I just hit a little wall that was easily fixed but I thought was worth sharing:

The Xamarin tutorials show navigation as being done with a “Push” like this:

await Navigation.PushAsync (new Page2Xaml ());

Which is great, except it doesn’t work out of the box.

The issue is for this to function, you need your app to be utilizing a NavigationPage element.  A Navigation page is a page which holds other pages and navigation… I suppose (very) roughly like a Frame in UWP.

But the default templates don’t include one.  So the easy way to change it is to go to your App.xaml.cs and change the constructor from opening a regular page like this:

MainPage = new MyAppName.Views.MainView();

to this creating a NavigationPage and then “Push”-ing to the start view**:

var p = new NavigationPage();
MainPage = p;

p.PushAsync(new MyAppName.Views.MainView());

Now your whole application exists within the NavigationPage element and navigation should work as intended.

Rob,
Valley Software.

 

** Yes the var is not required, however this is a logical layout to show the example.