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.
Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.
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.
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.
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.
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.
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!
Rodeopark Communication
Similar to the first site, this one draws most of its color from the samples of work in the thumbnails.
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.
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.
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!
Natalie Sklobovskaya
Natalie uses a mixture of some really rich textures, graphics and colors to create a spooky environment that looks absolutely beautiful.
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.
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 ;)
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.
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
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.
Aaron, dang that looks pretty awesome!
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 ;)
i liked http://www.dubbedcreative.com/ the most..what a wow design..great
Here’s a web site with a dark color scheme http://redgoblin.ro/?lang=en
Because it fits :)
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.
Wow, thanks for looking deeper at my site!
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.
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.
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.
This is the latest dark design I’ve done, hope you’ll enjoy it :)
http://img835.imageshack.us/img835/9260/webacabois.jpg
Good selection !
Take a look on this Fresh collection of Amazing Dark Websites here
http://www.dreamincoloronline.com/20-amazing-dark-websites/