Designing in the Dark: 10 Dark Sites and Their Color Schemes

What goes well with a black website? Today we’ll find out but taking a look at some excellent examples of dark web design along with their primary color palettes.

Each website will have a screenshot along with a brief description, a visual representation of the color scheme, and a link to download the Photoshop color swatches from Pictaculous.

Notio Web Design

Here the page itself has very little color and serves as more of a black matte to show off the designer’s work. This makes for a really classy feel, especially when combined with the subtle glow and reflections.

Download Photoshop Swatches

Sofasurfer is now Digitallabs

When designing with a dark theme, it can often be quite powerful to mix in a single bold color (primarily) and use it repeatedly as the designer did with orange below.

Download Photoshop Swatches

Rails.mx

The Rails site below definitely makes some bold color choices. This is mostly thanks to the excellent Ruby icon design, but the supporting colors work extremely well.

Download Photoshop Swatches

Dubbed Creative

As with SofaSurfer, here we see a mostly grayscale color palette with bursts of color to draw your attention to key points. This is a major function of color in web design. Always consider how you can structure the experience and guide the user through words, graphics, and of course, color.

Download Photoshop Swatches

Design or Die

This one is probably my favorite color palette in the whole list. The muted colors work very well together and create a decidedly retro feel. Time periods can definitely be communicated strongly through your color choices. Keep in mind this happens whether you intend it to or not!

Download Photoshop Swatches

Rodeopark Communication

Similar to the first site, this one draws most of its color from the samples of work in the thumbnails.

Download Photoshop Swatches

Element Gallery

The colors here stand out perfectly from the grungy chalkboard background. Notice the variation of color is repeated throughout both the graphical elements and the typography.

Download Photoshop Swatches

Jose Luis Merino Parra

This one shows that you don’t always need color to have a great design. Sticking with a pure grayscale color palette can make a strong statement.

Download Photoshop Swatches

Osvaldas Valutis

I love the concept there. A burst of color and life is breaking through the cracks of a colorless world. Very well done!

Download Photoshop Swatches

Natalie Sklobovskaya

Natalie uses a mixture of some really rich textures, graphics and colors to create a spooky environment that looks absolutely beautiful.

Download Photoshop Swatches

Show Us Yours!

Now that you’ve seen the color schemes from some of our dark sites, leave a comment below with a link to your dark site. Be sure to tell us about your color scheme and what you were trying to convey with it.

Comments & Discussion

17 Comments

http://www.musings.it Federica Sibella

Well done, interesting collection. I usually prefer light backgrounds and the darkest website I designed for a client is this one: http://www.albergogiardinetto.it next time I’ll try with something black ;)
http://www.itsstillthere.com loopka

Thank you for this interesting article. It s great source of inspiration. To me, dark layouts are more adapted to user experience websites, similar to TV adds. In them, you have no long text to read. The main content of this websites are : video, motion design, illustration, photography… When you work for portals, it s easier to use white backgrounds (or similar light backgrounds) : the text is easier to read. But it s only a general pricinple. Some dark layout portals are very nice and easy to read.
http://web.me.com/x3mbrand/site/VM_Portfolio.html Vitaly

Hi all. I love reading your site. Dark color in the sites I like. One of them http://web.me.com/x3mbrand/site/VM_Portfolio.html
http://therustyrobot.com Aaron

Thanks for the article.

I’m currently refreshing the look of campelectric.com

This is what I have so far http://cl.ly/1yhz

Our only goal with the color scheme was to be eye catching and appeal to Jr. high & high-school aged kids. I have been utilizing the, sometimes cliche, space theme to provide a neutral background for the big and bold graphics presented on all the materials for the camp.
Joshua Johnson

Aaron, dang that looks pretty awesome!
http://rolling-webdesign.com Theo

Great examples of dark sites. The only dark site i made is my own. The user can switch between four backgrounds to fit his/her mood ;)
http://scriptsnest.co.cc/ mayank

i liked http://www.dubbedcreative.com/ the most..what a wow design..great
Pingback: CSS Brigit | Designing in the Dark: 10 Dark Sites and Their Color Schemes
Mihai

Here’s a web site with a dark color scheme http://redgoblin.ro/?lang=en
Because it fits :)
Anthony

My portfolio site is a dark website with accents of red which is the only color besides black and white in my logo. The only other color on the pages comes from the thumbnails and displayed portfolio pieces. I wanted most all of the users attention to be on the portfolio pieces, which is why I choose a dark site style. My work is the whole point of the site, so a dark site was the best choice.
http://www.osvaldas.info Osvaldas

Wow, thanks for looking deeper at my site!
http://www.crearedesign.co.uk Laura Meider

I think dark websites are very popular and you really have to look at other websites to be able to get a feel for how to make these deeper and moodier rather than just having dark flat colours.

All of the websites above are all designed well, with appropriate colours. I like the twitter feed in the corner of Osvaldas, he looks very cute and has been made into a feature rather than just a link or button. I also like the Element Gallery for its sketchy feel but I am not sure if this style would work on an everyday business style website. This is a great source of information, thanks for the post.
http://www.webdesignkc.co.uk/ Victoria Blount

The dark websites look really seductive and high end, and its interesting to see the colour choices picked out, as sometimes when im designing the colour choices aren’t always a conscious thing.
http://www.marklea.com/ Mark Lea

I think loopka hit the nail squarely on the head.

If the site is about reading I believe light is the way to go, if it’s about looking, well dark usually wins out.

That’s probably why so many photography sites are dark, with fine art photography sites being a possible exception.

I do love dark sites but I always seem to go down the light route.
http://blog.justswell.org Christophe Eblé

This is the latest dark design I’ve done, hope you’ll enjoy it :)

http://img835.imageshack.us/img835/9260/webacabois.jpg
Pingback: From Mail « Mike Noweetzki
http://www.dreamincoloronline.com dreamincolor

Good selection !
Take a look on this Fresh collection of Amazing Dark Websites here
http://www.dreamincoloronline.com/20-amazing-dark-websites/

Design Shack — Web Design Gallery, Articles & Community