Web Color Schemes using Colorschemedesigner.com

Unfortunately I can’t design. I can art direct websites to a certain extent, being that I have the web experience, taste level, and eye for detail that my opinion is always welcomed by my creative colleagues. But give me a blank canvas to work with and I am stuck. Even when it’s something as simple as personalizing colors for my Twitter homepage I don’t have the confidence to hand-pick a palette myself from scratch. Luckily I work alongside some of the top creative talents in the industry and am spoiled for choice when it comes to picking a designer for my work. But I can’t really afford to pay a designer for every random niggle I produce, and I only want to call in favors with my designer friends for things that really matter, and besides there’s some stuff that I just want to look at it and know I did it for myself. And that’s where I found myself today when I decided it was time I personalized my Twitter homepage.

So to personalize the homepage I decided I was going to disable the background image and just pick a color scheme, there’s 5 colors to pick in all – from background to sidebar to link color. When I’m picking a color palette I usually turn to the web for help and always come across some tool or other that is of some help in the moment, but I’ve never come across anything really that’s been worth remembering. Today was different, I came across colorschemedesigner.com and was instantly inspired by what it had to offer. To start with you enter your base color or hand-pick it from a hue chart, and from there you can make certain adjustments, from secondary hues to saturation/brightness and contrast, helping to move the color scheme in the direction you are looking for. There’s various models too, from Mono through to Accented Analogic, and once you’re closing in on your palette your can overlay the color grid with text and even have a light or dark web page preview. You can even go as far as to simulate what it would look like for people suffering from various types of color blindness, which is all very interesting. And once you’re done you can export your palette in various ways such as HTML+CSS or ACO (Photoshop palette). It’s the complete package for a novice with simple needs such as myself who finds Photoshop quite daunting, and I’m not even sure if Photoshop offers the kind of aid this application does, I’d be interested to know how useful it would be to a professional designer.

Analogic Model with text

Light page preview

HTML+CSS Palette export

In the end I went with quite a simple schema for my Twitter homepage, it may be boring to some but I think it’s very clean and easy on the eye. The light blue Twitter logo will always appear on the page so I incorporated the color into my palette. To be fair to myself I think that designers don’t just have their own training and experience to fall back on, they also have their arsenal of tools as well as other designers work they look to for inspiration. Just like when I turn to code samples and confer with fellow industry professionals when I’m looking for inspiration with coding. So when I lean on a tool such as colorschemedesigner.com it is not cheating in any way, it’s merely inspiration to help me design something for myself.

Tags: Web 2.0, Web Apps, Web Design

4 Responses to “Web Color Schemes using Colorschemedesigner.com”

  1. ch3mical says:

    Very cool sight, but it does lack some customization tools. Couple of other cool color sights.

    Kuler:
    http://www.adobe.com/products/kuler/
    http://kuler.adobe.com/

    and

    http://www.colourlovers.com/

  2. Richie says:

    Cool thanks, those sites are great!

  3. Cherra says:

    Nice page MrRich…thus very usefull…and nice meeting mate, saw u in twiter and have a look in your blog…do u only think in codes?? ;D

Leave a Reply