ColorZilla color pipette for Chrome and Firefox - Pick of the week in CW13

ColorZilla Browser Extension - Pick of the Week CW13

My Pick of the week this time is a small but nice browser extension that can be downloaded for Firefox or Google Chrome. It is free and makes life as a blogger or web designer easier because you can extract colors in HEX format from website elements or fonts very quickly.

With ColorZilla I have an extremely practical color pipette available in Firefox and Chrome that reliably puts all colors - including from images - as HEX code on the clipboard.

With ColorZilla I have an extremely practical color pipette available in Firefox and Chrome that reliably puts all colors - including from images - as HEX code on the clipboard.

Mac tool "Digital Color Meter" unusable

As a web worker you usually need hexadecimal values ​​for the colors. That means, a #FFFFFF is, for example, the color white with the values ​​red = 255, green = 255, blue = 255. The Apple tool "Digital Color Meter", which can be found in Applications> Utilities, offers different color models , but you won't find any output with HEX values. This is of course useless for people who have to do with working on Internet sites. That's why I was looking for a practical solution.

Here you can see the Apple tool "Digital Color Meter" in operation, which unfortunately only shows the color values ​​as a decimal value - for my purposes it is completely useless.

Here you can see the Apple tool "Digital Color Meter" in operation, which unfortunately only shows the color values ​​as a decimal value - for my purposes it is completely useless.

I already have the app "Sip" over SetApp installed, but I don't want it every time I boot, and basically it's overly extensive for my needs. Therefore my search for a solution was not finished with Sip.

The Mac app "Sip", which is included in the SetApp bundle, also offers a practical color picker.

The Mac app "Sip", which is included in the SetApp bundle, also offers a practical color picker.

My way through Photoshop or "Examine Element"

You shouldn't actually say it, but so far I've done it not infrequently that I took a screenshot of a part of a website and then opened it in Photoshop to pick out the color with the pipette. Extremely cumbersome and of course there is an easier way: In Chrome, Safari or Firefox you can right-click on a page and then select "Examine element" or "Examine". An additional information window will now open.

Using the "examine element" function, you can at least determine font colors, fonts or colors of DIV blocks or other HTML elements in common browsers.

Using the "examine element" function, you can at least determine font colors, fonts or colors of DIV blocks or other HTML elements in common browsers.

If you move the mouse pointer over a heading or a DIV container, its properties are displayed in the info window. You can find out, for example, the color or the fonts of headings.

What does not work is to extract a color in a graphic, because you only get the information about the URL address of the graphic and the size. Your content is not shown in more detail via the "Investigate" option.

 

ColorZilla browser extension - versatile helper for web designers

Yesterday I came across the ColorZilla browser extension by accident, which can be found for both Firefox and Chrome:

It is completely free of charge and advertising and not only offers a quickly available color pipette that can pick up colors in the entire browser area, but it also has a few other functions.

The lower arrow shows my crosshairs with which I analyze the color and the upper one shows the bar of ColorZilla with a dark background, in which the current color value can also be found.

The lower arrow shows my crosshairs, with which I analyze the color, and the upper arrow shows the colorZilla bar with a dark background, in which the current color value can also be found.

Gradient generator with CSS output

One thing that might be of interest to some web designers is the gradient generator. With it you create a gradient, as you are used to with Photoshop, and ColorZilla also tinkers together the complete CSS code that you need for this gradient. I don't need that much, but I'm sure quite a few web designers will be happy with it because in the future they will no longer have to go to websites that do this work for them.

The CSS code for gradients can quickly become quite complex. ColorZilla turns it into a copy and paste task that is easy to do even as a beginner.

The CSS code for gradients can quickly become quite complex. ColorZilla turns it into a copy and paste task that is easy to do even as a beginner.

Create a color palette for a website

Another nice function is the generation of a color palette for a website. For example, if you found a website where you found the color scheme very appealing while browsing the internet, you can have the colors put together in a palette via the menu item "Webpage Color Analyzer".

ColorZilla offers a few more little things, such as a history of the pipetted colors or copying the color values ​​in different color systems, but my most important requirement was simply to fetch a color from a website with the pipette and then to save it as a hexadecimal value on the clipboard to have. That makes ColorZilla perfect and straightforward. Thanks to the developers for this great tool.

-
Do you like my blog? Then I would be happy to receive a short review on Google. Easy leave something here for a moment - that would be great, thank you!

Leave a Comment

Your e-mail address will not be published. Required fields are marked with * .