Pinterest Stumbleupon Whatsapp

Inspiration often comes from observation. Before deciding on their own design, creatives typically gather ideas from other sources. As a graphic or web designer, you probably browse the Internet to review the work of your colleagues. With only so many pleasing color schemes Find The Perfect Color Scheme Every Time With Adobe Kuler Find The Perfect Color Scheme Every Time With Adobe Kuler Whether you're building a website, designing a brochure or painting your spare room; finding the perfect combination of colors can be a daunting task. It often takes more than just personal taste to marry shades... Read More available, it’s nothing shameful to copy color compositions Color Me Impressed: 3 Tools For Effortlessly Finding Beautiful Color Schemes For Any Project Color Me Impressed: 3 Tools For Effortlessly Finding Beautiful Color Schemes For Any Project Color is important. It's one of those primeval things -- colors make us feel. They can communicate danger, passion, calmness, and almost any other emotion. They work across language barriers, and they can clash in... Read More or a color with the perfect hue from an existing design. Few people come up with truly novel ideas never thought of before, thus imitation remains the sincerest form of flattery.

colorPicker 0.9 is a sophisticated eye dropper tool with many cool features, which makes it one of our Best Chrome Extensions for Developers. In this review, I will contrast colorPicker 0.9 with ColorZilla, one of our Best Firefox Addons for Developers, which is also available for Chrome.

How colorPicker 0.9 Works

When you left-click colorPicker’s icon in the Chrome extension bar, a small menu comes up. The addon offers two different modes: rotate color and eyedropper. Note that you need to reload pages or restart Chrome for colorPicker 0.9 to work immediately after installation.

colorPicker 0.9 Menu

For the eyedropper, you can choose a range from 1 pixel to 101 x 101 pixels. The range essentially is the square area from within which the average of all colors will be calculated. Since those calculations are processed in the background, the app may seem slightly unresponsive at first.

The eyedropper’s results are captured in a separate colorPicker 3 Free Color Picking Tools To Choose Colors From Your Desktop 3 Free Color Picking Tools To Choose Colors From Your Desktop Read More , which by default appears in the bottom right of the browser. The window can be dragged at its edges or resized by its bottom right corner. Color values are shown for HSB, RGB, CMYK modes, and the hex code is provided. To save a selected color to the palette, click the square with the circle in the bottom right. However, even after restarting the browser, the values wouldn’t align properly with their boxes, which looked a little funny.

colorPicker 0.9 Color Palette

One very neat feature within colorPicker is that you can accurately adjust color values, not only by manually typing in numbers into the input fields, but you can also scroll through them using the up/down arrow keys or the mouse. With the mouse, click a field and hold, then drag the mouse up or down to change the color value. It appears to be the scroll feature that makes the numbers act funny within their fields.

colorPicker 0.9 Scroll

To exit the eyedropper, click the [ESC] button.

The most interesting feature for developers is the rotate color mode. Open the website you’re currently working on, go into rotate color mode, and you can seamlessly change the color of any DOM element in real-time. As you move the mouse pointer across the website, the various elements will be highlighted. Click one to activate the DOM Color-Explorer. You can even select a tag and change its CSS rule.

colorPicker 0.9 change color

To exit the rotate color mode click [ESC] or the [X] button in the DOM Color-Explorer.

colorPicker 0.9 also has a JavaScript app and a web demo called playGround that you can experiment with.

How ColorZilla Works

Clicking the ColorZilla pipette icon in the Chrome addon bar reveals its various features.

ColorZilla Features

Every time you want to pick a color, you need to click the pipette icon in the addon bar. This behavior can be changed via the ColorZilla addon options available via the main menu. Here you can also enable a keyboard shortcut. As you drag the eyedropper across the screen, the current color and its RGB values and hex code are shown in the menu on top of the page.

ColorZilla Color Selection Menu

By default, the hex code of a selected color is automatically copied to the clipboard. All colors picked during a session are stored in the History, which you can open via ColorZilla’s menu. ColorZilla Color History

Moreover, ColorZilla comes with a tool to analyze the colors of a website, a palette browser, and a CSS gradient generator. ColorZilla CSS Webpage Color Analyzer

We have previously covered the ColorZilla Firefox addon 3 Color Picker Add-Ons For Web Designers & Graphic Artists [Firefox] 3 Color Picker Add-Ons For Web Designers & Graphic Artists [Firefox] Eyedroppers and color pickers can work outside a mammoth graphic tool like Photoshop and CorelDraw. Most of these tools are small and portable. But today, we will diverge from desktop color picking tools and look... Read More .

colorPicker 0.9 and ColorZilla Compared

These two tools are similar at first glance, but they differ significantly in their approach.

ColorZilla shines when it comes to picking colors, saving them in a history, analyzing website color schemes, and picking colors from a palette or creating a gradient.

colorPicker 0.9 on the other hand offers much more advanced features. Color picking is straight forward, but users have to build the palette manually and values are not automatically copied to the clipboard. colorPicker 0.9 blows its competitor out of the water when it comes to manipulating DOM elements on a live website. This is a killer feature for serious web developers.


To sum up, ColorZilla is the better tool if you want to analyze color schemes, build a palette, and use picked colors right away. If you are an experienced web developer and desire a tool that allows you to experiment with the color design of a website in real-time, you need colorPicker 0.9 in your toolbox.

Do you prefer a browser addon for picking colors or a desktop color picker 3 Desktop Color Picker Applications To Help You Pick The Perfect Shade 3 Desktop Color Picker Applications To Help You Pick The Perfect Shade "Creative" is a word I'll never use to describe myself! Not visually, at least. I'm proud of much of what I can do on the Internet, but when it comes to graphics and image editing,... Read More ? And what are the must-have features you cannot live without?

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Axel C
    July 11, 2013 at 9:36 am

    This looks nice.

    Cerainly gonne try those addons out.

    Thank you for the tips.