Ask HN: How do you find a colorscheme for your project?
34 コメント
I grab a camera and take pictures of things that were obviously put together by someone who knows color.
There is a neighborhood full of very well-painted homes that has inspired a few of my designs. One time I pulled a color scheme from macro shots of my backyard. My client said, "Wow, I really like that brown, what is that?"
It was dog poop.
There is a neighborhood full of very well-painted homes that has inspired a few of my designs. One time I pulled a color scheme from macro shots of my backyard. My client said, "Wow, I really like that brown, what is that?"
It was dog poop.
Ah yes, the Caganer color theme. It just goes to show you that sometimes people don't realize what they want.
I mostly pull colors from images, but http://www.colourlovers.com and http://www.wellstyled.com/tools/colorscheme2/index-en.html are sometimes helpful. FireBug is real helpful for experimentation.
The best advice I know regarding color schemes: spend time up front finding a good 6-8 colors to cover everything from backgrounds to link hovers, and then, stick with that scheme for your first iteration so that you don't get hung up on choosing colors all the time.
The best advice I know regarding color schemes: spend time up front finding a good 6-8 colors to cover everything from backgrounds to link hovers, and then, stick with that scheme for your first iteration so that you don't get hung up on choosing colors all the time.
Abject thievery.
As I waste-time on the internet (err, do market research) I bookmark attractive sites. My only scruple is that I try to pick a site that is totally off-topic in a completely different industry. One of my projects recently "was inspired by" http://heroku.com/. I hope they take that as a compliment.
As I waste-time on the internet (err, do market research) I bookmark attractive sites. My only scruple is that I try to pick a site that is totally off-topic in a completely different industry. One of my projects recently "was inspired by" http://heroku.com/. I hope they take that as a compliment.
i also resort to abject thievery.
my feed reader is full of design blogs that i use to siphon ideas into my head. i'm not good with creative design. i design like an engineer would -- i look at a lot of things, take the pieces i like, and reassemble them together to the best of my abilities.
most of the things i create are just compilations of things i've seen in the past that i thought were neat.
my feed reader is full of design blogs that i use to siphon ideas into my head. i'm not good with creative design. i design like an engineer would -- i look at a lot of things, take the pieces i like, and reassemble them together to the best of my abilities.
most of the things i create are just compilations of things i've seen in the past that i thought were neat.
I employ a similar method. Rather than thievery I think it is just influence. I will use bits from several designs I think work well (layout ideas from one, colurs from another etc etc.).
Remember that the secret of creativity is how well you hide your sources. ;) Most creative works now stand on the shoulders of giants.
A well-known designer trick I've used is to spend 20 minutes paging through a stock photo site (I like sxc.hu), find a picture you like with some good color contrasts, and pull it into an image editor to eyedrop colors out.
Kuler has tools that support this workflow too.
What I don't get is the "shopping for color schemes" workflow that sites like Kuler support by default. I have also never liked anything that came out of a "generate split complements" color wheel tool; the real aesthetics of things like triadic schemes depend too much on saturation/value, and not enough on hue.
Kuler has tools that support this workflow too.
What I don't get is the "shopping for color schemes" workflow that sites like Kuler support by default. I have also never liked anything that came out of a "generate split complements" color wheel tool; the real aesthetics of things like triadic schemes depend too much on saturation/value, and not enough on hue.
Work with grayscale first. Design your UI with contrast in mind rather then color. Then when all the main elements are in place, pick a good color scheme. I've always found colourlovers.com to be an invaluable resource.
That's pretty much my approach and it seems to work well. I find that it helps to concentrate on color last, and not only that, but to set the overall color scheme first and then introduce highlight and alert colors last (like cilantro on top of the main salad) rather than trying to choose the entire palette at once.
What about for images? Rounded corners, gradients, logos, etc. I would imagine going back and messing with all those later would be a real pain, which is why I think choosing and settling on a color scheme from the start is important.
Not at all - it just depends on how good a designer you are and/or comfortable with html/css.
images don't have anything to do with html/css
It depends - are you prototyping by making wireframes in an image editor or prototyping by coding up a rough working copy? If you're a designer and prefer mocking stuff up in Fireworks or Photoshop, then you should have the chops to build upon the gray boxes and text and layer in effects to add visual polish. If you're a coder and would rather create crude functional demos first, then you should have the html/css chops to layer in visual polish via background images or etc.
Either way, designer or coder, it helps to concentrate on the rough functionality first and then layer things in later, like typography, logos, icons, color schemes and other visual polish.
I'm giving a talk at Adobe in about a week and a half on the subject of rapid prototyping in Fireworks, I think there'll be a screencast or video going on, for anyone interested:
http://www.meetup.com/Fire-On-The-Bay/calendar/9583191/
And don't just take my word for it, Mark Boulton's got a great PDF book out with the same approach, if you're interested in improving your process as a designer:
http://www.fivesimplesteps.co.uk/
Either way, designer or coder, it helps to concentrate on the rough functionality first and then layer things in later, like typography, logos, icons, color schemes and other visual polish.
I'm giving a talk at Adobe in about a week and a half on the subject of rapid prototyping in Fireworks, I think there'll be a screencast or video going on, for anyone interested:
http://www.meetup.com/Fire-On-The-Bay/calendar/9583191/
And don't just take my word for it, Mark Boulton's got a great PDF book out with the same approach, if you're interested in improving your process as a designer:
http://www.fivesimplesteps.co.uk/
I am absolutely not a graphic designer. Usually I start with a dominant colour that I like (for example the default orange header here) and I'll plug it into a colour-match system like http://colorblender.com/
Another resource I've used to good success is http://kuler.adobe.com (requires flash) which lets people (some of whom are quite a lot more competent than I at this) create and share colour themes.
Finally, a neat tool that I saw make the rounds recently is http://www.gpeters.com/color/color-schemes.php which lets you search on a word and uses Yahoo!'s image search to come up with some colour suggestions. That is not a theme place, but it's a fun way to perhaps stumble across a colour you like to use with tools like those above.
Another resource I've used to good success is http://kuler.adobe.com (requires flash) which lets people (some of whom are quite a lot more competent than I at this) create and share colour themes.
Finally, a neat tool that I saw make the rounds recently is http://www.gpeters.com/color/color-schemes.php which lets you search on a word and uses Yahoo!'s image search to come up with some colour suggestions. That is not a theme place, but it's a fun way to perhaps stumble across a colour you like to use with tools like those above.
I'll second http://kuler.adobe.com as a great tool to find or piece together a color scheme.
Hire somebody that's good at this stuff; same as dealing with icons and images and such.
Creating good color schemes and good icons is as much a specific skill as creating good code.
If you're serious about a product, it's worth the investment. The first thing folks see with your project is the UI; the colors and the icons and such, after all.
Creating good color schemes and good icons is as much a specific skill as creating good code.
If you're serious about a product, it's worth the investment. The first thing folks see with your project is the UI; the colors and the icons and such, after all.
Is this really good advice? I assume the OP asked because he wants to learn. You don't learn when you pay someone to do things for you.
Also, not everyone has money to spend at the beginning of their startup.
Also, not everyone has money to spend at the beginning of their startup.
I think the quality of that piece of advice depends on a few things.
One obvious one is the audience you're expecting. If you're selling to a bunch of other coders, maybe a great design is less important than your feature list and the first-glance at documentation. If you're trying to do something social aimed at college students, or moms, or something, it may become worth considering, depending on the second point.
The other, less obvious (and less insulting than it sounds) one is, frankly, if you're any good at design. This might sound harsh (and will maybe be disregarded coming from a designer), but good design is harder, and more subtle, than most people think. Many programmers (and managers/producers/friends/pets) know just enough about design to be dangerous. Unlike the source code, everyone on a project sees the design, and everyone has seen and interacted with a million designed websites and front-end interfaces. Hell, most people on most teams have probably built their own full site from scratch, often many times over.
What that means is that when it comes to the design of your site and whether or not to call an outsider, you need to be honest with yourself. Do you know enough, or do you know enough to be dangerous? When you're making decisions about how a piece of art looks, or how a point of interaction works, are you thinking first and then acting, or are you acting first on something that seems cool and then retroactively filling in reasons behind that act to reassure yourself that you're being smart? Do you like a widget on that site because it maps to a specific end-user need you're trying to fulfill, or because of their fancy javascript implementaton?
As for wanting to learn to be a better designer, I think my best advice is to not do it on the job. If your motivation is truly to learn and gain skills for the future, it makes no sense to risk your current project by using it as a classroom for your own benefit. Would you let your graphics designer friend check chunks of code into your site to teach him how to program?
If it is a matter of not having the funds, then obviously you must make the best with what you've got! If what you've got is yourself, no free time, and no money, then there is definitely some excellent advice for how to inspire yourself in a pinch spread across this thread.
If you have time, though, I think that as a designer, beginning or seasoned, the most important question to ask at any juncture is "why?" Most of the advice earlier in the thread seems to stop at "I find some colors that I like and just use them." That's sound advice, as long as it takes the next step! Why did the designer of this other bicycles-themed site choose these colors? Were they really trying to communicate some mood or tone or feeling about the product, or has their parent company's logo just been a blue and yellow plaid since 1936? Why did the designer of this site decide to make the login panel side down instead of just appear instantaneously? Further, why wasn't the login panel simply visible the whole time, why was the decision made to hide it by default in the first place? Was there some sort of intended user behavior or control of site flow there, or was someone just excitedly jerking off because they'd discovered ui.jquery.com?
If you have the time to explore, start a smaller or less risky project, personal page, or hobby endeavor, and use that to learn the ropes, to find out what your strengths are, what you like about designing things. That might sound a tad touchy-feely, but finding out what you like about design and what you do well will help you when its time to sit down and do something real.
Also, if after some exploration, you do find that design really just isn't you for whatever reason, your best bet is to instead spend the time learning the language of design so you can properly talk to and problem-solve with people who are really into design and (if they're good) share your goals of building quality things. Learn the basic terms surrounding typography and colors, of desktop publishing and layout. Learn what is complicated for a designer and what is easy, and remember that, like programming, while designers strive to achieve results which look very simple and clean to "outsiders," the path they take to get there is never as easy and simple looking as the output it presents.
That was certainly more rambling than I intended. Sorry, guys.
One obvious one is the audience you're expecting. If you're selling to a bunch of other coders, maybe a great design is less important than your feature list and the first-glance at documentation. If you're trying to do something social aimed at college students, or moms, or something, it may become worth considering, depending on the second point.
The other, less obvious (and less insulting than it sounds) one is, frankly, if you're any good at design. This might sound harsh (and will maybe be disregarded coming from a designer), but good design is harder, and more subtle, than most people think. Many programmers (and managers/producers/friends/pets) know just enough about design to be dangerous. Unlike the source code, everyone on a project sees the design, and everyone has seen and interacted with a million designed websites and front-end interfaces. Hell, most people on most teams have probably built their own full site from scratch, often many times over.
What that means is that when it comes to the design of your site and whether or not to call an outsider, you need to be honest with yourself. Do you know enough, or do you know enough to be dangerous? When you're making decisions about how a piece of art looks, or how a point of interaction works, are you thinking first and then acting, or are you acting first on something that seems cool and then retroactively filling in reasons behind that act to reassure yourself that you're being smart? Do you like a widget on that site because it maps to a specific end-user need you're trying to fulfill, or because of their fancy javascript implementaton?
As for wanting to learn to be a better designer, I think my best advice is to not do it on the job. If your motivation is truly to learn and gain skills for the future, it makes no sense to risk your current project by using it as a classroom for your own benefit. Would you let your graphics designer friend check chunks of code into your site to teach him how to program?
If it is a matter of not having the funds, then obviously you must make the best with what you've got! If what you've got is yourself, no free time, and no money, then there is definitely some excellent advice for how to inspire yourself in a pinch spread across this thread.
If you have time, though, I think that as a designer, beginning or seasoned, the most important question to ask at any juncture is "why?" Most of the advice earlier in the thread seems to stop at "I find some colors that I like and just use them." That's sound advice, as long as it takes the next step! Why did the designer of this other bicycles-themed site choose these colors? Were they really trying to communicate some mood or tone or feeling about the product, or has their parent company's logo just been a blue and yellow plaid since 1936? Why did the designer of this site decide to make the login panel side down instead of just appear instantaneously? Further, why wasn't the login panel simply visible the whole time, why was the decision made to hide it by default in the first place? Was there some sort of intended user behavior or control of site flow there, or was someone just excitedly jerking off because they'd discovered ui.jquery.com?
If you have the time to explore, start a smaller or less risky project, personal page, or hobby endeavor, and use that to learn the ropes, to find out what your strengths are, what you like about designing things. That might sound a tad touchy-feely, but finding out what you like about design and what you do well will help you when its time to sit down and do something real.
Also, if after some exploration, you do find that design really just isn't you for whatever reason, your best bet is to instead spend the time learning the language of design so you can properly talk to and problem-solve with people who are really into design and (if they're good) share your goals of building quality things. Learn the basic terms surrounding typography and colors, of desktop publishing and layout. Learn what is complicated for a designer and what is easy, and remember that, like programming, while designers strive to achieve results which look very simple and clean to "outsiders," the path they take to get there is never as easy and simple looking as the output it presents.
That was certainly more rambling than I intended. Sorry, guys.
There's a fantastic (physical) product design blog at http://www.thedieline.com/ that I often use as inspiration, especially since many of the product ranges use a palette of 3-7 colors.
I just make them up. They don't come "at the drop of a hat"; it takes time and a lot of hard work, usually. Often there are false starts and wrong turnings. One site design I did a while back went through four utterly different designs before I was happy with it. Sometimes that's just how it is; usually things go a little more smoothly.
Usually it's art that I draw from, rather than the work of other designers--Rothko, Hokusai. Recently I saw an understated gem of an exhibition: Vilhelm Hammershøi at the Royal Academy. I would love to incorporate some of his subtle tones and textures into something.
Usually it's art that I draw from, rather than the work of other designers--Rothko, Hokusai. Recently I saw an understated gem of an exhibition: Vilhelm Hammershøi at the Royal Academy. I would love to incorporate some of his subtle tones and textures into something.
I usually pick a theme I want my site to have, like "education", then do a Google image search for the term to see how others have represented it with color. After getting a basic idea of what color I like I hand it off to the designer with very general suggestions. I have learned this is one area I am better off delegating to someone more talented.
I generally pick a main color i want to use and pick colors that are on either side of it in the color wheel (Also that are similar in brightness and so on) if I don't want a monochromatic site.
Or if I'm at a loss, i have this widget: http://www.colorschemer.com/galleria_info.php
Or if I'm at a loss, i have this widget: http://www.colorschemer.com/galleria_info.php
on hndir.com, i basically got my inspiration from the textmate editor theme "Blackboard." many of them can be found here: http://wiki.macromates.com/Themes/UserSubmittedThemes
i guess after a while, you like black as a background so much that it creeps into your projects ("black's da new white, yall!").
our next project, which we should have ready in march, is also themed the same way. dark background, neon'ish colors. i need to get over it. there was a phase i went through where everything was white and blue. i honestly have no idea where i get these fetishes (fetishii?).
but yeah, great artists steal. anarchy has no rules, so declare a form of government and go ballistic ("maybe wrong in YOUR country, but in mine, which i happen to login via root, it's perfectly acceptable.")
i guess after a while, you like black as a background so much that it creeps into your projects ("black's da new white, yall!").
our next project, which we should have ready in march, is also themed the same way. dark background, neon'ish colors. i need to get over it. there was a phase i went through where everything was white and blue. i honestly have no idea where i get these fetishes (fetishii?).
but yeah, great artists steal. anarchy has no rules, so declare a form of government and go ballistic ("maybe wrong in YOUR country, but in mine, which i happen to login via root, it's perfectly acceptable.")
Try to define the subject of your branding. It your logo is a monkey, for example, find some photos of monkeys and pick the colors. Make a palette of these colors and see what is matching well.
Hint : it's good to mix some cold and warm colors. Try to keep some white space (or at least, light tones).
Hint : it's good to mix some cold and warm colors. Try to keep some white space (or at least, light tones).
I prefer Black and White as http://mobify.me/ does.
I ask myself what I want a user to "feel" when they visit my site. Then, I choose basic colors which elicit that feeling. After that, I look at different color schemes to see which complementary colors I like (this part is mostly subjective).
I found these by by asking Google:
http://colorschemedesigner.com/
http://www.colourlovers.com/palettes/top
but found them pretty wanting..
http://colorschemedesigner.com/
http://www.colourlovers.com/palettes/top
but found them pretty wanting..
Has anyone ever tried Adobe Kuler. It has a lot of themes put together by I guess designers. I admit some of them are awful but it gives one an opportunity to see how different colours complement each other...
I just kind of go into it intuitively. I guess you could call it synesthesia, but that's a bit overwrought a description. I pick colors that feel right and jiggle until it comes together perfectly.
Oh I would definitely hit up http://www.colr.org :)
...unless my project IS www.colr.org.
Then I stick with white and gray.
...unless my project IS www.colr.org.
Then I stick with white and gray.
I like to check out wordpress themes.
ask a designer (-:
Do you "borrow" from a site you like, get help from design-savvy friends, use online color tools, or do you just have great design sense and come up with breathtaking colorshcemes at the drop of a hat?
If there are any good online resources for this please share them :-)
Thanks!