
Material Design Color Tool - kiyanwang
https://material.io/color/
======
duiker101
Uhm interesting. Seems like a good tool but either I'm using it wrong or it's
very weird that it doesn't seem to provide an option for the accent color.

here's some other similar tools that I collected over time

[https://www.sankk.in/material-mixer/](https://www.sankk.in/material-mixer/)

[http://flatuicolors.com](http://flatuicolors.com)

[https://www.materialpalette.com](https://www.materialpalette.com)

~~~
jasonlfunk
I figured it out. You have to click the 'Primary', 'Secondary' boxes in the
bottom right.

~~~
duiker101
Wow i totally missed that, thanks for pointing it out!

------
nkkollaw
Really cool.

The only problem I have with material design is that lots of apps just look
the same, and some people _do_ confuse Google stuff with apps that use
material design, thinking they're from Google.

Much better than all apps looking like Bootstrap's default theme, though,
which is a popular alternative to loading a material design theme with a
palette you picked.

~~~
GBKS
The other side of this is that it helps usability when things look and feel
familiar. It's interesting how it's accepted that desktop applications
generally look the same, but mobile apps are supposed to be more unique. Maybe
just the nature of mobile being generally more consumer oriented?

~~~
tptacek
Isn't it weird that when it comes to desktop apps and particularly UI
toolkits, we freak out when things don't match the OS style perfectly, but
with applications on the web --- many of which are more UI-intensive than
native apps --- we're constantly looking for the CSS Zen Garden?

------
foldr
"And the wheel," said the Captain, "What about this wheel thingy? It sounds a
terribly interesting project."

"Ah," said the marketing girl, "Well, we're having a little difficulty there."

"Difficulty?" exclaimed Ford. "Difficulty? What do you mean, difficulty? It's
the single simplest machine in the entire Universe!"

The marketing girl soured him with a look. "Alright, Mr. Wiseguy," she said,
"if you're so clever, you tell us what colour it should be."

~~~
jacquesm
HHGTTG. Excellent reference, if you're going to spend time on picking the
'right' colors rather than just any set of half decent colors and then move on
you might miss out on that important little thing called functionality without
which it really doesn't matter what color it will be.

Once you're established and you're tuning the last 0.3% of the market that you
might catch if only you used the 'right' colors you can spend time on this.

It's another nice example of premature optimization.

~~~
mseebach
Rational, practical people have always been quick to dismiss aesthetics in
favour of functionality, but it turns out it's actually pretty important.
People will use the ugly, functional thing if they have to, but they'll leave
if they get a chance. I think this dynamic alone explains a large part of the
success of a number of SaaS apps priced as is often advocated here to allow
individual managers to buy it on a corporate credit card without going through
procurement.

As an extreme worst-case scenario, consider post-war high-density
architecture. With a few exceptions, they are various degrees of slum today,
not because they lacked functionality (that came later when they were left to
deteriorate), because anyone with the resources to left.

Back to software, I have had the pleasure of replacing a good number of ugly
but functional line-of-business systems, and the eagerness with which users
will adopt the new thing, almost entirely because it's pretty (it often
doesn't much new for many users, the main improvements are on the backend and
for power users), always catches me a bit off guard.

On the personal level, I've found that investing a bit of time up front in
making a new thing pretty increases my personal level of happiness working on
the thing, even if I end up changing entirely away from the original look as
features evolve.

~~~
jacquesm
I've seen the opposite as well: ugly looking terminal or DOS based but _very_
productive software was replaced with spiffy looking windows or web based
software that was slightly slower or unable to keep up with the type-ahead of
the users and this led to huge disappointment.

I'm firmly believe if it doesn't work it doesn't matter how good it looks and
if it works but looks bad that's better than the reverse.

Then once you've figured out what to build you can always make it look pretty.

~~~
nkkollaw
You're comparing apples with oranges.

Terminal/DOS-based software isn't ugly, it's just a different interface (GUI
vs. non-GUI).

Of course some technical people that know what they're doing will enjoy using
the command line because you don't have a GUI that gets in the way, but using
this fact to "prove" that people like ugly software better doesn't make
sense—it's just a bad example.

~~~
sprafa
Most people would describe terminal software as hideous.

Happiness comes from visual variety.

~~~
AJ007
Are the blind happy?

~~~
karmajunkie
Not blind, but I had eye surgery about a year and a half ago, followed by a
recovery period about 4 weeks longer than I was told to expect, during which I
came to appreciate things like contrast. Not coincidentally, I also realized
my software was literally* painful to use for someone in my condition.

I have learned to give a shit about color choices.

*That's the literal 'literally', not the figurative one.

------
kuro-kuris
I think the accessibility tab is useful though I wish it highlighted which
combinations are accessible.

------
marknote
Good. I am also using 2 tools:
[http://designspiration.net/](http://designspiration.net/)
[http://paletton.com/](http://paletton.com/)

~~~
AlphaWeaver
Paletton is really good. It also allows you to simulate Color Blindness of
various types so you can plan for those users in your color selection as well.

~~~
marknote
Yes, it is really helpful, especially useful to match the secondary color when
primary color is defined.

------
crashdown
I'm surprised it took them so long to do this. Someone else made one ages ago
at [https://www.materialpalette.com/](https://www.materialpalette.com/)

~~~
kensai
Yes, but this is Google. Now it matters. You know when it will matter even
more? When Apple does the same. And even more more?! When Elon does it! :D

------
WA
What's the "A 100, A 200 etc." on the right-hand side?

And the 50-900, what's this about? From the docs, I read: "pick 500 as primary
color". But what does the number refer to?

~~~
yathern
Those are accent colors - A for accent. The number refers to the darkness
level of the color variant. Not sure what better way to describe it, but it
goes from:

Low Saturation Light (50) --> Very Saturated (500) --> Low Saturation Dark
(900)

------
tmatthewj
Nice to see that Google picked up a specific use-case, material design on
mobile apps, and built a guide tool. For color guide on more generic design
requirements, [https://color.adobe.com/create/color-
wheel/](https://color.adobe.com/create/color-wheel/) is something you might
want to look at.

------
dbg31415
This is cool, adding it to my list of colors tools.

* Paletton - The Color Scheme Designer || [http://paletton.com/](http://paletton.com/)

* Material Design Color Palette Generator - Material Palette || [https://www.materialpalette.com/](https://www.materialpalette.com/)

* Flat UI Colors - Color Pallette from Flat UI Theme || [http://flatuicolors.com/](http://flatuicolors.com/)

* Coolors.co - The super fast color schemes generator || [https://coolors.co/](https://coolors.co/)

* Spectrum - Chrome Web Store || [https://chrome.google.com/webstore/detail/spectrum/ofclemegk...](https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb)

------
andreygrehov
I'm not a color expert, but is there a color tool which would narrow down
available color options for the Secondary color palette? Primary palette is
cool, but I can still make it all look ugly by choosing random colors for the
Secondary palette, which is exactly what I would want to avoid.

~~~
theptip
There are a few, [https://color.adobe.com/create/color-
wheel/](https://color.adobe.com/create/color-wheel/) is one I was recommended
many years ago. Interested to see what the new hotness is though.

------
julius_set
Imo Googles new material design is not impressive. It does however help
developers who are not good designers build a cookie cutter app.

~~~
duiker101
I don't think it's as much a design for designers but a design for users. It's
a guideline that all apps can follow so that the user doesn't have to relearn
every single app and is more likely to know where to find stuff. As far as
aesthetics go it's not the greatest yes, but it doesn't have to be. Having a
good looking foundation on which to base your app is great. If you really want
it can always be innovated. There's plenty of nice changes you can find in
different apps and it's always evolving.

~~~
maaaats
As a user it's super un-intuitive, though. At least how gmail, calendar, maps
and other google apps are on Android at the moment. I mostly click and pray.

~~~
DanBC
It's interesting that lots of people on HN say the same thing: I don't know
how to perform an action; there are no affordances in the UI.

But Google is a data driven company and they must, surely, have scads of data
on this. They must know what their users are trying to do and how they're
trying to do it, so why are Google interfaces so hard to use?

~~~
welcomebrand
They still use their mighty data to show me ads for things I've literally just
bought, I do sometimes wonder if all data is even.

------
agd
> (though anybody who has ever had to read a lot of dark gray text on a light
> gray background knows that this is an issue)

On techcrunch which has...yep, dark gray text on a light gray background!

~~~
johnfn
And then I read your comment on HN. It's dark gray on light gray all the way
down!

------
H1Supreme
Great tool. Especially for people without a lot of design or color theory
experience. As someone with both, I find the palette a bit too saturated for
my tastes.

I've tried to only use the colors listed in the material design docs, but
usually make my own palettes in the long run.

~~~
karmajunkie
Are there some good resources you could recommend for color theory? I've come
across lots of palette tools but little indication of what makes colors work,
aside from contrast indications. I feel very much like someone in a workshop
with every tool imaginable and no idea of how to use them.

------
alc90
Really nice tool. Great work mate!

------
owly
Very nicely done.

------
ecesena
Direct url: [https://material.io/color/](https://material.io/color/)

~~~
sctb
Thanks, a moderator updated the submission link to this from
[https://techcrunch.com/2017/04/06/new-google-tool-helps-
deve...](https://techcrunch.com/2017/04/06/new-google-tool-helps-developers-
pick-the-right-colors-for-their-apps/), which didn't seem to add to the
original site.

------
xook
Oh, good. Now I can figure out which shade of blue I should use.

