Pick The Perfect Colors For Your Website With colorPicker 0.9 & ColorZilla

colorpicker   Pick The Perfect Colors For Your Website With colorPicker 0.9 & ColorZillaInspiration 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 available, it’s nothing shameful to copy color compositions 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   Pick The Perfect Colors For Your Website With colorPicker 0.9 & ColorZilla

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, 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   Pick The Perfect Colors For Your Website With colorPicker 0.9 & ColorZilla

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   Pick The Perfect Colors For Your Website With colorPicker 0.9 & ColorZilla

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 change color   Pick The Perfect Colors For Your Website With colorPicker 0.9 & ColorZilla

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   Pick The Perfect Colors For Your Website With colorPicker 0.9 & ColorZilla

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   Pick The Perfect Colors For Your Website With colorPicker 0.9 & ColorZilla

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   Pick The Perfect Colors For Your Website With colorPicker 0.9 & ColorZilla

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   Pick The Perfect Colors For Your Website With colorPicker 0.9 & ColorZilla

We have previously covered the ColorZilla Firefox addon.

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.

Conclusion

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? And what are the must-have features you cannot live without?

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

One Comment -

0 votes

Axel C

This looks nice.

Cerainly gonne try those addons out.

Thank you for the tips.