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

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points
Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Suggestion on mixing and matching colours

I have designed a site for a friend who want there website to have an innerbox with an opacity on top of a background image.

I have done this for them a screen dump can be seen here

However the colour of the innerbox doesn't really match up with the background image. Do any designers have any suggestions on what would be a good colour to use for the innerbox?

Esteban Buckhaimer
Esteban Buckhaimer
Courses Plus Student 1,080 Points

Yes

2 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

A really easy way to bring some cohesion here is to use a color similar to whats on the background. One you could try is #2c363d, which is a slightly lighter, and blue-er color than the dark sky in the upper right. With the opacity change you may need to adjust the color further, but it will probably get you close.

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Thanks, managed to get a similar colour using rgba values and decreased the opacity from there

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Perfect, glad you have it figured out

Steve Hamilton
Steve Hamilton
7,890 Points
Steve Hamilton
Steve Hamilton
7,890 Points

If you are looking for general help with color coordination check out this site with a really user friendly generator:

https://coolors.co

You can upload an image and select a part of it to use as a reference for the generator to get complimentary colors that match. You can then lock the colors you like and continue generating other colors if you need them.

Cheers

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Hi thanks for the reply, this seems like a useful tool to use. I will check this out in the future properly