Hex to HSL Color Converter
Sublime Text 2/3 plugin to convert CSS Hex colors to HSL.
- Total 23K
- Win 16K
- OS X 5K
- Linux 2K
|Nov 15||Nov 14||Nov 13||Nov 12||Nov 11||Nov 10||Nov 9||Nov 8||Nov 7||Nov 6||Nov 5||Nov 4||Nov 3||Nov 2||Nov 1||Oct 31||Oct 30||Oct 29||Oct 28||Oct 27||Oct 26||Oct 25||Oct 24||Oct 23||Oct 22||Oct 21||Oct 20||Oct 19||Oct 18||Oct 17||Oct 16||Oct 15||Oct 14||Oct 13||Oct 12||Oct 11||Oct 10||Oct 9||Oct 8||Oct 7||Oct 6||Oct 5||Oct 4||Oct 3||Oct 2|
Adds commands to Sublime Text that converts RGB colors, in either hex or RGB() format, to HSL colors. For example:
hsl(74, 64%, 59%)
rgb(75, 96, 6)becomes
hsl(74, 88%, 20%)
rgba(117, 149, 9, 0.65)becomes
hsla(74, 89%, 31%, 0.65)
In the past, due to browser (IE) compatibility, it was best to use a CSS preprocessor to convert the HSL colors to hex. But now all major browsers support HSL color, including IE9+, so you can use HSL colors in CSS unless you need to support IE8.
You can install using Package Control or you can download or clone the repository and drop it into your Sublime Text packages directory.
Version 2 Features
- Version 2 now converts hex and RGB to HSL and RGBA to HSLA. The previous version only converted hex to HSL.
- Optionally, you can convert hex, RGB, and RGBA to HSLA (force alpha).
- You can now convert all hex, RGB, and RGBA colors in a file by inputting the following command twice: (
- Convert Selected to HSL: shift+ctrl+U
- Convert Selected to HSLA: shift+ctrl+alt+U
- Convert All to HSL (preserving alpha): shift+ctrl+U + shift+ctrl+U
- Convert All to HSLA (force alpha): shift+ctrl+alt+U + shift+ctrl+alt+U
Why No Hex/HSL to RGB support
HSL color is just better than hex or RGB (Brandon Mathis gives a good explanation why HSL rocks). I don't see any use for RGB—HSL is just more intuitive and makes it much easier to combine colors into a logical color scheme.
If you have the need to convert to RGB, you might try the CSS Color Converter plugin.
If you need more convincing about HSL, try these:
- W3: HSL Colors
- HSL Color Picker
- An Easy Guide To HSL Color In CSS3
- Three Ways You Should Be Using HSL Color In Your Site Today
- Color in Opera 10 — HSL, RGB and Alpha Transparency
- HSL Color Wheel Demo
- Paul Irish's Mother-effing HSL
- Coding Colors Easily Using CSS3 hsl() Notation
- Treehouse Quick Tip: HSLa Color Values in CSS