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

/ From / SEO & Homepage / Post a comment
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 weaver, you usually need hexadecimal values ​​for the colors. This means that #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 look in vain for an output with HEX values. This is, of course, useless for people involved in working on websites. 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 this is completely useless.

I already have the app “Sip” via 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 path via Photoshop or “Inspect Element”

You really shouldn't say it, but so far I've often done it by taking a screenshot of part of a web page and then opening it in Photoshop to pick out the color with the eyedropper. 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 "Inspect Element" or "Inspect". 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.
After all, the "Check element" function can be used in common browsers to determine font colors, typefaces or colors of DIV blocks or other HTML elements.

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 doesn't work is extracting a color in a graphic, because you only get information about the URL address of the graphic and the size. Their content will not be revealed via the “Inspect” 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 feature is generating a color palette of a webpage. If, for example, you have found a website while browsing the Internet where you find the color combination very appealing, you can have the colors put together in a palette using the “Webpage Color Analyzer” menu item.

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.

Related Articles

Did you like the article and did the instructions on the blog help you? Then I would be happy if you the blog via a Steady Membership would support.

Post a comment

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

In the Sir Apfelot Blog you will find advice, instructions and reviews on Apple products such as the iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini and Mac Studio.

sir appleot
Specials
Shopping