Open brampitoyo opened 5 years ago
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?
@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!
Problems
Focus uses ink colour scheme throughout its UI – mostly
ink-80
– with splashes ofmagenta-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:
magenta-70
doesn’t contrast well (by WCAG 2.0) when set againstink-80
magenta-60
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 alsogrey-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:
My proposal is something along these lines:
#fcf7fc
L98#f8baf0
L85#f181d8
L73#e452b9
L61#45a1ff
L64#ff1ad9
L55#d22f9a
L50#9400ff
L50#08a4ff
L52#ed00b5
L46#b9187b
L41#8000d7
L42#0060df
L44#b5007f
L35#980a5e
L32#6200a4
L32#003eaa
L33#7d004f
L25#700241
L22#440071
L22#002275
L23#440027
L13#440027
L13#25003e
L12#000f40
L13Examples
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 currentmagenta-70
vs our proposed magenta doesn’t look that different.Compare the screenshot to what we currently ship in product:
What are your thoughts?