Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Working on a new design. Help?
So I've been around here for a month and messing with websites for 7 years now. But I still don't understand colors. Is there just something about colors that I can't get? =/ I feel super confident with my coding, but not so great with my choice in colors.
Can you guys help me out with this one in particular?
Don't pull any punches either. ;) This is gonna be for my personal site, so I want you guys to be brutally honest with me. Helpful, of course, but honest. Thank you =)
I'm going to be different and say ignore using the colour wheel. It is helpful I think, but you can literally get any set of colours to eventually work together according to a tool like color scheme designer and you won't really be any better off.
Start simple, use monochrome colour palettes, use 2 or 3 colours at most.
Avoid using shades of yellow, it's a difficult colour to use on the web (my opinion at least).
When choosing a background colour make sure it's darker or lighter than the main content area (hopefully this makes sense)
-- See this site itself, white content area, slightly darker background -- https://news.layervault.com/ - light content area, darker background
- Look at other websites and see how they're doing it, where and how they use the various colours
Look at the top colour palettes on these websites: http://www.colourlovers.com/palettes/most-loved/all-time/meta https://kuler.adobe.com/explore/most-popular/?time=all
You'll hopefully see patterns in what makes them work well. Try apply some to your designs. Pick colours you like from those palettes and try make your own.
Hopefully this helps, it's really hard to get across how to, it's like anything with practice and taking in lots of examples and inspiration you eventually get an eye for it.
Edit: A couple of points about your current colour scheme on your website. The colours you have chosen are too close in lightness and saturation. You need different levels of saturation and lightness.
Here's what I mean I've taken a screenshot of your website and reduced the saturation to 0, it's all one shade of grey pretty much. https://www.dropbox.com/s/ivslkcicqvhg2a1/saturation_0.jpg
Matt CadenCourses Plus Student 6,588 Points
Hey Max, just wanted to share a link I find useful and keep in my toolbox.
The interactive color wheel is a great tool when you want to use multiple colors in your design and you can really fine tune the color scheme using the Adjust Scheme Tab. There are also Light and Dark Page examples of how the colors could be used in a design. Hope you find it useful.
Patrick Cooney12,216 Points
I agree with Stephen, your colors are VERY muted. It's the type of color palate I'd expect to see on a corporate site that is trying to remain fairly reserved. To be fair, on my personal site I stick to black, grays and white as I've always been a fan of minimalism in my designs.
Treehouse actually has a color theory course of it's own that you can find here
Here are a couple of websites in the spirit of Stephen's suggestion that I happened to have open in my browser:
I can give you some pointers about color usage. It would be better to reference the basics so you have a better undestanding why color combinations work or don't . I think what your site needs is a clear definition of how color harmonies can be defined. There are different ways to combine colors:
Complementary Colors that are opposite each other on the color wheel are considered to be complementary colors (example: red and green).
Analogous Analogous color schemes use colors that are next to each other on the color wheel. They usually match well and create serene and comfortable designs.
-–-------- These are safe bets when creating a color scheme, these next ones are a little more risky.
Triad A triadic color scheme uses colors that are evenly spaced around the color wheel.
Split-Complementary The split-complementary color scheme is a variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement.
Rectangle (tetradic) The rectangle or tetradic color scheme uses four colors arranged into two complementary pairs.
Square The square color scheme is similar to the rectangle, but with all four colors spaced evenly around the color circle.
When dealing with the last group, the use of black or white can make or break a site. Try to keep text and backgrounds and text also in neutral colors. Try first adding as little color as possible and build up using these color theories.
I've done the color theory course. My problem is that I learn more with a project based approach when it comes to abstract things like color.
I really appreciate the feedback. It helps a lot. A few questions though, if I may.
How can I use the color wheel effectively? I tinkered around with it when putting this design together and got some colors and used those, but wasn't much of a fan of what I made, so I went with a more muted look. How do I know I'm using the wheel right? And, really, is there even a wrong way to use it?
As far as design trends go, can someone explain to me exactly what "flat design" is? I've seen it all over Twitter but everyone's talking about it, not explaining it... =/
One last question: As far as the colors I did choose for this design, did I do well? Do these colors work together? Is this an appropriate amount of color? Is it in the right place? I just want to know I'm improving. My first design was all dark blue... It was torture to make and to look at... =/ but we all have to dare to suck if we dare to get better, right?
Thank you both =)