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! While you're at it, check out some resources Treehouse students have shared here.

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

Design

ian izaguirre
ian izaguirre
3,220 Points

I am not confident that my color scheme works, I am fairly new to design please assist me ?

My website is iamdentistry.com

Here's my color scheme it's is primarily:

  1. #46a5e5 --> Used Mainly to color the overall design
  2. #182945 --> Used Mainly just for the font color
  3. #FFAC43 --> is used Mainly as an accent color for small things
  4. And My color scheme uses like three small variations of shades of grey ( which I don't count towards the main scheme)

One thing I cant decide on is if the background is good and the overall color scheme and how I implemented it.

I know about kuler and color wheel tools etc ( I have used them). So I am not looking to be pointed to those tools. I want advice your opinion and mainly any help. (I am really new to all of this and I am teaching myself)

-- Any helps greatly appreciated, Thank you

7 Answers

you sound like a programmer, so here is a tip from some one who designs . when ever you want to get visual advise have visual ques to help visual people give you that advise. In other words show us some visual examples or pictures.

ian izaguirre
ian izaguirre
3,220 Points

Thanks for your reply , but I listed my website so you can see it live so there's no need for me to post pictures of my site and its colors when I listed the url ?

James Barnett
James Barnett
39,199 Points

I actually agree with this point. A website has a lot more colors than just those 3. Generally when talking about color palettes people place the color swatches together so it's easy to see.

ian izaguirre
ian izaguirre
3,220 Points

Oooo ok Now I understand I will create a palette to show you but before I do that do I also include the grey colors in the palette ?

James Barnett
James Barnett
39,199 Points

In this case I think so, you make pretty heavy use of the greys in your site.

ian izaguirre
ian izaguirre
3,220 Points

Hi thanks for the quick reply , ok This is my palette the only thing I did not include is the color white. I did include the main 2 greys I use but left out the other 2 different shades that are very subtle in my design and not dominate.

http://www.colourlovers.com/palette/3055298/Ian_I

Advice and help would be fantastic :-)

James Barnett
James Barnett
39,199 Points

I like the shade of blue in your logo and your use of gray. However there are some places you've used darker blues and blacks they don't work as well.

  1. Learn more about color theory
  2. Use colorschemedesigner.com to make a complementary scheme
  3. Use colllor.com to lighten/darken a color, which usually make them look better
ian izaguirre
ian izaguirre
3,220 Points

Awesome tools thank you.

-Ok so I eliminated my "dark blue hues" from my background gradient and made a new gradient which consist of the main color of my logo and mixes in to match the two colors used for my menu bar below my header. Does this appear better to you ?

-Specifically where are the uses of black you are talking about ?

  • Do you think my orange accent color should be used more (# FFAC43) ?

Thank you for helping me

James Barnett
James Barnett
39,199 Points

Overall I think I like the color palette itself but I'm not sure how I like it applied to the site. I really like the blue & grey you used in your logo those 2 pair really well together.

I don't like how the gradient for your background is just at the top of the page. I also don't like how dark the blue is on your buttons e.g. Read, Watch, Connect. I don't like how dark the black is for buttons or the nav links. I also didn't notice any use of your orange accent color.

ian izaguirre
ian izaguirre
3,220 Points

Thanks a ton for helping me. ok so for the gradient in the background I have changed it I think everyday not being satisfied lol.

1.) The gradient right now is the #46A5E5 blue at the top then it blends in to two slightly different shades of grey. I noticed that making it a variation of shades of #46A5e5 makes the site look so dark to me which I don't like, then making it all grey or different shades makes it way to light since I use a lot of white space in the main content it becomes to much lightness. So I am stuck at not knowing how to make a perfect gradient.

2.) If I change just the font color of the main navigation bar below my header wouldn't that make the font to light so I would also have to change the color of the background of the main navigation bar also ? It may look black but its actually #182945.

3.) Once the background gradient is settled on then I could change the read watch connect buttons colors to match it, so I have to wait to settle on that first, but I agree with you.

4.) The Orange accent I have actually only applied to one button which is the submit comment button on a blog post. Don't I have to be cautious using the orange since its an accent and to much will look bad Since it draws the eye immediately?

Thanks again for your awesome help

ian izaguirre
ian izaguirre
3,220 Points

anymore help on what I wrote above would be great

oh I did not see the URL there. It already looks pretty good but if you where to add color to the logos for the buttons, magnifying glass and maybe some of the fonts at the bottom of the page could be orange. It would not hurt, but simple is always more.

ian izaguirre
ian izaguirre
3,220 Points

Thanks I will work on that :-)

Scott Prock
Scott Prock
666 Points

Coming from a colorblind designer (yes, that's me, deficient with reds, greens, and browns) I always without fail rely on some sort of color wheel when picking my colors. There's several color wheel tools, the one James posted is great. I also use Adobe's Kuler - http://kuler.adobe.com.

Something you might play with, is setting the background image to stationary and have the main content area scroll. Also spread out your gradient so it's more subtle instead of the harsh contrast between white and blue, you'll also reduce any chance of color banding with high res monitors.

... Scott

ian izaguirre
ian izaguirre
3,220 Points

Hi thank you so much for taking the time to help me I really appreciate it. Ok so I added background-attachment: fixed; position: static; width: 100%;

And yes I agree with you going that route does make everything look better. As far the background colors go these are the main colors of my website: (http://www.colourlovers.com/palette/3055298/Ian_I) I cant seem to find the right balance between something looking to dark or to light. Should I just choose one of those colors and then pick different shades to create the gradient ? This is a tough choice for me as I cant decide the right background color combo. I know about all those tools but I don't know which color to settle on as the background .

Scott Prock
Scott Prock
666 Points

Hi Ian,

I have created a couple of files for you to look at (see link below). One is a psd which includes your color palette with more colors to choose from. You can always take your colors place layers with varying degrees of transparency to create shades of the colors over the primary colors. This will make more sense if you look at the psd. Let me know if you need the file in a different format.

The other file is a background image with a lighter blue at the blended into a darker color for the bottom. Just see how that looks as your background image. No worries if you don't like it, I just thought I would give you a sample of what I was referring to.

Let me know if you have any questions, I'm happy to help. http://prockstar.com/imd/imd-files.zip

... Scott

ian izaguirre
ian izaguirre
3,220 Points

Thank you so much I will take a look at that and let you know. Appearntly though there is a problem with my free word press theme I have been using : (https://teamtreehouse.com/forum/should-i-switch-from-my-free-wordpress-theme-to-a-paid-wordpress-theme-from-themeforest) Your advice would be awesome. Thanks for going out of your way again to help me

Matthew Willmott
Matthew Willmott
9,426 Points

Apologies for bumping an old thread but I came across a video broadly on this subject and in case any of you haven't seen it I thought I would share the link: http://methodandcraft.com/videos/creating-harmonious-color-schemes

I hope some of you find it useful :)