
Ask HN: A systematic approach to picking app colors? - archagon
I&#x27;m the sole creator and designer of an app, and picking colors in particular is causing me a lot of stress. There are so many variables! Let&#x27;s say I need to pick the color for a button. I have to answer the following questions:<p>* What&#x27;s the primary color? Red for destructive and green for confirmation is given, but what about everything else?<p>* Given the primary color, how do I select the hue, saturation, and brightness to mesh with my existing color scheme?<p>* How do I pick the text color? Should it be lighter or darker than the background?<p>* What color will the button be when it&#x27;s held down or disabled?<p>* If the button is particularly important, how do I give it extra weight? Otherwise, how do I ensure it has the same intensity as other buttons in its category?<p>* Maybe the button can be toggled. What color should I make its toggle state? How do I keep it legible while making it clear that it&#x27;s not just a weirdly colored button?<p>* What color should the border be, if any?<p>...over and over again! Matters are further complicated by the fact that the user can pick their own hue for several prominent UI elements. There&#x27;s also a dark mode, which multiplies the design effort by 2. (You can&#x27;t just darken the existing colors and call it a day: many pairs of colors have to be switched in order to preserve the legibility, e.g. the color of a button background and its label.) Picking colors has become an incredible burden, forcing me to try colors over and over again until I find something that intuitively feels right. I&#x27;ve tried some algorithmic approaches (&quot;if toggled, darken by 20%&quot;), but it doesn&#x27;t give consistent results. Perhaps switching to a perceptual color space (HCL?) would help, but it would be a major refactor. In the meantime, I have to make do with what I have.<p>(Sample screenshot: http:&#x2F;&#x2F;i.imgur.com&#x2F;SRh5pPA.png)<p>Is there a good, systematic way to pick and organize colors for a theme, especially with modifiers? (Toggled, disabled, etc.)
======
bigmanwalter
Wow. It feels like nobody even tried to answer you.

For starters, there won't be any easy algorithmic way to defines shades and
tones of colours (shade is the term for mixing a colour with black, tone is
mixing a colour with white) as the eyes perceive them all a bit too
differently, so they will all require some hand tweaking.

When users can choose colours, try and keep any preselected colours neutral.
Blacks, whites and greys. Sometimes a slight blue can be applied. Blue is
universally the easiest/most agreeable colour.

For finding good color combos the major ways to go about it are to either pick
color chords and tweak slightly, or to play with the hot/cold contrast.

Color chords means using 3 or 4 colours which are equidistant on the HSL wheel
(90 or 120 degrees apart), you can then play with them a bit to see what you
like.

Hot cold contrast just means that warm colors and cold colours always look
good against each other. So red/orange/yellow against blue/violet.

Also worth noting that different colours have different weights. Yellow is
perceptually bigger than purple. So if you have two equal sized dots, one
yellow one purple, the yellow will appear larger.

Most of this comes from The Elements of Color [https://www.amazon.ca/Elements-
Color-Johannes-Itten/dp/04712...](https://www.amazon.ca/Elements-Color-
Johannes-Itten/dp/0471289299) . Im sure many other books cover it but this one
is considered a classic.

~~~
archagon
Thank you for the practical advice! I will have to read that book.

------
huevosabio
For the palette look at
[http://www.colourlovers.com/palettes](http://www.colourlovers.com/palettes)

in general I found this talk to have some interesting recommendations
[https://www.youtube.com/watch?v=uKpfO331DY4](https://www.youtube.com/watch?v=uKpfO331DY4)

------
tracker1
Look into the source for bootstrap 3 or 4... They only define a handful of
colors. In the end, pick your main branding color, and work out from there.

Even if you don't use bootstrap, it's a good baseline to look at, and imho
every web developer/designer should definitely dig through the source of that
codebase.

------
spotman
You are approaching it too much like a programmer in my humble opinion.

Yes there is rules and guidelines, but before you can follow them you need a
style , a feel , a culture .

You should get ( pay ) a graphic designer friend to come up with some food
mockup of a single page. Work on it worth them or have them do a few
iterations until you are really excited about it and both of you think "aha!"

Once you get that far your next challenge is to truly use this as a style
guide and pivot off of it as you design the rest of the pages.

Good luck, it can be rewarding!

------
DanBC
One thing that no-one has mentioned so far is that you shouldn't rely on color
to convey information, because some people have color blindness. That's about
10% of the male population.

You also want to pick things that have nice levels of contrast (again for
accessibility).

I'd be interested to read how you approach this problem.

------
55555
Do this:

1\. Kuler.adobe.com . Click on Most Popular. Pick a palette. Now you have your
absolute colors.

2\. Now go to the website of a beautiful SAAS that you think looks good that
makes over a half million dollars per month. Now copy them for using your
absolute colors relative to one another.

Ta-da! Now don't spend any other effort on this problem.

------
niftich
I've used 'color scheme designer' [1], recently renamed 'paletton' [2], in the
past. It has some of the specific features you are looking for, like
darkened/lightened alternatives of your main colors.

[1]
[http://colorschemedesigner.com/csd-3.5/](http://colorschemedesigner.com/csd-3.5/)
[2] [http://paletton.com](http://paletton.com)

------
siquick
Always found this useful [https://color.adobe.com/create/color-
wheel/](https://color.adobe.com/create/color-wheel/)

And whatever you do, don't spend too much time on this stuff.

As long as your colours aren't too garish, then you should spend way more time
on whitespace and typeface.

------
MyNewAcc
Just so ya know... the color scheme will look very different on different
monitors. So make it look good, but be careful not to yak shav over colors
only you will ever see as intended.

~~~
archagon
That's another bullet point I forgot to mention: testing with different
brightness settings and color temperatures! Egads!!

