Colorizer Plugin

Colorizer Plugin

If you do any work in HTML and CSS, you’ve probably spent your fair share of time coding color values; however, a value like “#432958” doesn’t really help you know exactly what color that value represents. Wouldn’t it be nice if the text editor could let you quickly visualize these color values?

TKE’s CSS Colorizer plugin to the rescue. If you are editing an HTML or CSS file, the Colorizer plugin will parse for all valid CSS-styled color syntax and set the background color of the syntax to the color that it represents.

[[img src="colorizer.gif" alt="Colorizer Plugin"]]

To install the plugin, select the Plugin / Install… menu option and then select the “CSS Colorizer” from the resulting plugin list. Once the plugin has been installed, you can colorize any HTML/CSS/SCSS file by selecting the Plugins / CSS Colorizer / Colorize menu option. This will immediately colorize all of the color syntax within the current file.

Once you have selected the colorize menu option once for a file, any subsequent saves of that file will automatically re-colorize the file. You can also re-select the colorize menu option at any time to re-parse the file.

The following color syntax is supported:

• #RRGGBB
• #RGB
• rgb( red, green, blue )
• rgba( red, green, blue, alpha )
• hsl( hue, saturation%, luminosity% )
• hsla( hue, saturation%, luminosity%, alpha )