Basics of ColorZilla’s Color Picker for CSS3 - dummies

Basics of ColorZilla’s Color Picker for CSS3

By John Paul Mueller

The first item on the ColorZilla menu for CSS3 is the Color Picker. When you select this option, you see a dialog box where you can work through color selections in a number of different ways. In many respects, the initial view of the Color Picker looks just like any other color picker you’ve used in the past.


Using the Color Picker saves you time. With it, you can enter colors directly by using the characteristics described at these links:

From this dialog box, you receive two different versions of CSS-specific output (both the rgb() function and the hsl() function). In addition, you also get a color name. When there’s no precise color name for the color you’ve created, the Name field is left blank.

Of course, some of the best features are hidden from view. Click Options and you see a single option named Color Picker Type. The Color Picker defaults to what is called a smooth color picker type. This setup lets you choose any color available, making it hard to choose a specific color at times.

To gain more control over your color choice, select the Discrete option. The display will change. Each color is now in a distinct block — making it a lot easier to choose a specific color every time you use Color Picker.


You may also see a color that you like on a page somewhere. In this case, click Sample Color from Document (the icon that looks like an eye dropper) and then click on the color you want to use from the page. The Color Picker will automatically display the values used to create that color.