Finding color codes in a webpage

If you are like me, a programmer, and not an artistic web-designer, chances are your color sense when it comes to designing web pages is, put it mildly, not as good. If you work for a large corporation or a big design firm, then you can probably afford to have two different people with two different job roles. But otherwise, you are pretty much stuck with a single person doing both, coding and ui design of the web page. Ofcourse, the goal of this article is not to indicate that web designers are not necessary and programmers can do everything. It all depends on the potential for the product or website. If you know it can generate a lot of revenue, there is no need to skimp on the professional resources with unique skills.

Anyway, so one tool I found recently which I find very useful is Colorzilla. It’s an add-on to Firefox. Once you install it, it creates a little color-picker icon in the left-hand side of the status bar. Now, when you are in any webpage, you can click on the color-picker and as you move your cursor over the webpage, you will be able to see the color codes for the background of the region currently pointed by the mouse. This is a great tool to get color codes from some of the well designed websites.

Ofcourse, this only helps you pick the individual colors. You need to hone your skills or hire professional to still get the overall theme of your webpage. There is no “theme picker”, so to speak (unless you steal the entire design of a webpage, which is the last thing you should be doing).

Advertisements

1 Comment

Filed under color picker, web design

One response to “Finding color codes in a webpage

  1. Actually, a couple of years ago I stumbled across just that – a “theme picker”. See here: http://wellstyled.com/tools/colorscheme2/index-en.html

    Not only does it assist in the selection of complementary colours, it also allows you to adjust for various types of colour-blindness. Quite an amazing tool for colour-illiterate web designers like me! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s