: How to maintain color consistency across a website I am a web developer struggling with design issues. I have a blunt eye for colors and my design skills suck (I try to improve though). I'm

@Frith110

Firstly it's not rage inspiring and hasn't given me any kind of seizure, yet. In fact I've seen much worse colour schemes out there, and some of them from large companies!

One important thing I found to remember is that some colours have set meanings when used on buttons or other elements, for instance red can imply "cancel" or "delete" whereas green can imply "OK" or "go", this needs to be taken into account when choosing a colour scheme.

While the colour scheme itself is not bad, there is, as mentioned previously, a lack of contrast. Try following the "Rule of Three" until you find it easier to work things out by eye. Pick a main colour, a secondary colour and a highlight colour. Try to have some contrast between all three, such as red, black and light grey or white.


Click on image for to view full resolution

The black on the header bar is a touch strong, I would have gone for something softer like #252525 which is a very dark grey that's easier on the eyes. Also the dark grey of the background on the first page could, in my opinion, be lighter, maybe #d9d9d9 or even white.

The colour scheme itself does not detract from the movie posters, it would be easy for it to become overwhelming with the variety of colours and patterns that they create, but you have managed to avoid this.

Again I have to agree with previous reply in that some of the site is hard to read, this is partially down to the font and partially down to the colours chosen. Try making the sign up action a button, this will make it stand out and also allow you to keep the colours you have in the current header.

Here are a couple of articles I found useful:


Colour in Web Design
An Introduction to Color Theory for Web Designers

Vote Up Vote Down

@Ravi4787994

The main thing I'm not particularly crazy about regarding color is the contrast (or lack of it).

When you use dark colors as background, you need to use light ones for foreground. I have difficulty reading "Sign up now" because the back layer has black and white, and the shadow in the text is not enough to make the element stand by itself. At a glance, I have no idea what the text in the right side (with the drawings) says, because it's black on dark gray. The texts in the images' overlay are so thin (are you keeping Times New Roman?) that they look semi-transparent, and therefore very difficult to read.

My second comment would be the shades of red: dark crimson and shiny explosive light red. Their saturation is completely different, and I find it difficult to see them 'working together'. In general, if you go for dark colors you should try to keep their hue/saturation levels closer.

For example, in crimson:



Or if you wanted to go for the shiny red instead, you could combine it with other light warm colors, like orange:



These are some questions that might help you:


Is there a good resource or tool to help build a palette/color scheme around colors I select?
Sources for Color Theory or Psychology of Color
How can I improve my color selection skill? (the links in the first answer are great).


Also, some of the best resources on color theory I've seen lately are these Smashing Magazine's articles:


Color Theory for Designers, Part 1: The Meaning of Color
Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Vote Up Vote Down