How to design sites with dark colours (red and black palette)


The graphic designer for my club created a red and black logo (major color is black highlighted with red). Everyone thinks it looks great, and I agree. The issue lies with designing the site. We've been trying to design a red and black site around the logo, but everything we've come up with looks dark, heavy, and saturated.

Is there a trick to designing dark-colored sites? I've looked at other sites that use red and black (for instance, these), but they all seem to be graphical, rich-content sites, as opposed to a simple text-heavy site like we are trying to design.

9/5/2012 10:13:00 PM

Accepted Answer

It's not so much that there's a trick to designing a black-and-red site as that there are certain subjects that work well with such a scheme. B/W photography works very well on a black background, for example. Text doesn't.

White text on black is hard on the eyes. Add bright red (for your H1's, say) and you'll glare the user away from the site, eyes watering, reaching for the Tylenol and not very motivated to return. Grey text and dark red on black won't glare but will look gloomy -- great for a vampire fan club website, but probably not much else. :)

The solution is to follow Scott's and DA01's advice, which is the same as mine. Use the logo, but don't let it dominate the page. Make it a graphical accent, an ornament that contrasts with the rest of the site. Your page would be white or preferably a pale grey, with black text. That will make your text much easier to read.

Quite often in design you'll run into situations where you must either match elements exactly or use a bold contrast. In this case, contrast will open up many more design choices and work far better for you than trying to match your logo colors across the whole site.

8/31/2012 11:03:00 PM

Please have a look at these websites. they have pulled off lighter colors your are interested in. You can work around something like these websites.

  1. enter image description here
  2. BBC news

    enter image description here

  3. Stick Sports enter image description here
  4. TED enter image description here
  5. Scitable enter image description here
  6. enter image description here
  7. Youtube enter image description here

As Scott mentioned in his comment, "White is your friend".

You can also look here for some more inspiration.

I hope this helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow

Website under construction!!!