Ask HN: A systematic approach to picking app colors?
* 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.)
11 comments
[ 2.8 ms ] story [ 36.5 ms ] threadEven 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.
[1] http://colorschemedesigner.com/csd-3.5/ [2] http://paletton.com
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!
in general I found this talk to have some interesting recommendations https://www.youtube.com/watch?v=uKpfO331DY4
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.
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.
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.
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.