Ask HN: A systematic approach to picking app colors?
9 comments
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... . Im sure many other books cover it but this one is considered a classic.
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... . Im sure many other books cover it but this one is considered a classic.
Thank you for the practical advice! I will have to read that book.
For the palette look at http://www.colourlovers.com/palettes
in general I found this talk to have some interesting recommendations https://www.youtube.com/watch?v=uKpfO331DY4
in general I found this talk to have some interesting recommendations https://www.youtube.com/watch?v=uKpfO331DY4
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.
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.
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!
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!
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.
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.
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.
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.
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/ [2] http://paletton.com
[1] http://colorschemedesigner.com/csd-3.5/ [2] http://paletton.com
Always found this useful 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.
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.
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.
That's another bullet point I forgot to mention: testing with different brightness settings and color temperatures! Egads!!
* What's the primary color? Red for destructive and green for confirmation is given, but what about everything else?
* Given the primary color, how do I select the hue, saturation, and brightness to mesh with my existing color scheme?
* How do I pick the text color? Should it be lighter or darker than the background?
* What color will the button be when it's held down or disabled?
* 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?
* 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's not just a weirdly colored button?
* What color should the border be, if any?
...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's also a dark mode, which multiplies the design effort by 2. (You can'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've tried some algorithmic approaches ("if toggled, darken by 20%"), but it doesn'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.
(Sample screenshot: http://i.imgur.com/SRh5pPA.png)
Is there a good, systematic way to pick and organize colors for a theme, especially with modifiers? (Toggled, disabled, etc.)