Potentially extend magenta colour scheme

[brampitoyo]

Problems

Focus uses ink colour scheme throughout its UI – mostly ink-80 – with splashes of magenta-70 as accent colours for buttons and form elements, and a unique gradient in its start page and loading bar.

Through using this combination over and over again, I’ve learnt a few things:

1. The main shade of magenta we use, magenta-70 doesn’t contrast well (by WCAG 2.0) when set against ink-80
2. Neither does magenta-60
3. magenta-50 passes – only just barely – but it would be ideal if it’s not so saturated as to give off a ‘glow’ effect.

The solution I’ve proposed is pretty simple: design lighter shades of magenta (10, 20, 30, 40) that we can use to set elements against dark colours (not just ink-80, but also grey-80 for other products that want to use magenta).

Along the way, I wondered whether the whole magenta colour scheme can be rethought to avoid the ‘glow’ problem along the 40, 50 and 60 colour bands, but then I wonder if this saturation was by design? Colours like teal, green, yellow and red clearly glows on screen – whereas with blue and purple, it’s a different story.

Proposal

I have a few aims with this proposal:

1. To extend the existing magenta colour scheme to lighter shades
2. To avoid the ‘neon glow’
3. To maintain luminosity values that are relatively consistent with existing Photon colour values. The luminosity doesn’t have to be strictly consistent, and it’s only one tool to maintain harmony – nevertheless, it’s an objective measure.

My proposal is something along these lines:

	Magenta (current)	Magenta (proposed)	Purple (to compare)	Blue (to compare)
10		#fcf7fc L98
20		#f8baf0 L85
30		#f181d8 L73
40		#e452b9 L61		#45a1ff L64
50	#ff1ad9 L55	#d22f9a L50	#9400ff L50	#08a4ff L52
60	#ed00b5 L46	#b9187b L41	#8000d7 L42	#0060df L44
70	#b5007f L35	#980a5e L32	#6200a4 L32	#003eaa L33
80	#7d004f L25	#700241 L22	#440071 L22	#002275 L23
90	#440027 L13	#440027 L13	#25003e L12	#000f40 L13

Examples

Using lighter shades of magenta (in this case, magenta-30) would greatly improve colour contrasts within our app:

What you don’t notice:magenta-70 has been modified to follow the proposed value. In the grand scheme of things within our app, our current magenta-70 vs our proposed magenta doesn’t look that different.

Compare the screenshot to what we currently ship in product:

What are your thoughts?

[aminalhazwani]

Hey @brampitoyo, thanks for your feedback and the proposal! iirc @shorlander wanted to review and extend our color palette with this tool http://www.colorbox.io/ which as you also did is "luminosity-driven". Did you use any tool or did you tweaked the colors manually?

[brampitoyo]

@aminalhazwani I generated the new magenta colour values using ColorBox, in fact.

Here’s the URL that will generate identical results to the palette I’ve shared: http://www.colorbox.io/#steps=9#hue_start=303#hue_end=326#hue_curve=easeOutQuad#sat_start=1#sat_end=50#sat_curve=easeOutQuad#sat_rate=200#lum_start=99#lum_end=27#lum_curve=easeOutQuad

My ColorBox methodology was quite conservative. I never set out to generate totally new magenta colour values. To do that would be to break away from the rest of Photon colour system. I just wanted to extend the current palette and modify it to be more versatile against both light and dark backgrounds.

Therefore, I didn’t generate a whole new set of magenta using a set recipe. Instead, I deconstructed the existing Photon magenta, then try to find a ColorBox recipe that will match as many existing colours as possible – if not by hex values, then visually.

My thinking: if I try to match Photon colours as much as possible on the 50–90 range, then whatever values ColorBox generates on the 10–40 range can be slotted in harmoniously. Plus, it will solve my original problem: I want light magenta on dark backgrounds.

Can we extend the rest of our colours (orange, blue, red, green, etc.) using this conservative approach? I think so. Some values will be new, but most values will either remain the same, or look visually similar enough.

But that’s only one way to solve the problem! If we want to totally rethink our colour scheme, we can also do that. Happy to talk through this with you and @shorlander!