Color Picker


The color picker is used to select colors for CSS properties, SVG Icons, etc.


The color picker has several modes that make selecting colors a breeze.

The color picker also has support for semi transparent colors (when set into either 'rgba', 'hsla' mode).

In the image below, the 'Fan Decks' (like paint swatch sheets that you get from a paint store) allows you to select from a series of predefined colors.

On the left you can select any color and transparency that you want by dragging the sliders.

The selected color is shown in the rectangle at the top left.

In the top right corner of this rectangle a much smaller square is shown. This is the color that was originally selected when the color picker was first opened. It allows you to quickly switch back to the initial color by clicking on the color square.

In the Palettes mode (shown below) you can select from a palette of pre-defined colors that you define.

You can easily add a new color to the palette by selecting a color in the left hand pane and then clicking the + icon in the Palettes pane.

Another way to add a color to the palette (when the Palettes mode is not selected) is by clicking on the button in the left hand pane.

You can manage your palettes by clicking the down arrow icon in the Palettes mode

In the Image mode (shown below) you can load an image into the image picker and then select colors by pointing to different parts of the image.

You can set the mode in which the color picker works by clicking on the button (shown as HEX in the above image)

This brings up a menu showing the mode.