ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Hex to HSL Color Converter

by atadams ALL

Sublime Text 2/3 plugin to convert CSS Hex colors to HSL.

Details

  • 2017.04.20.14.18.37
  • github.​com
  • github.​com
  • 8 years ago
  • 2 hours ago
  • 13 years ago

Installs

  • Total 24K
  • Win 17K
  • Mac 5K
  • Linux 2K
Dec 31 Dec 30 Dec 29 Dec 28 Dec 27 Dec 26 Dec 25 Dec 24 Dec 23 Dec 22 Dec 21 Dec 20 Dec 19 Dec 18 Dec 17 Dec 16 Dec 15 Dec 14 Dec 13 Dec 12 Dec 11 Dec 10 Dec 9 Dec 8 Dec 7 Dec 6 Dec 5 Dec 4 Dec 3 Dec 2 Dec 1 Nov 30 Nov 29 Nov 28 Nov 27 Nov 26 Nov 25 Nov 24 Nov 23 Nov 22 Nov 21 Nov 20 Nov 19 Nov 18 Nov 17 Nov 16
Windows 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 0 0 0 0 0 0 0 2 0 0 0 0 0 0 1 0 0 0 0 1
Mac 0 0 0 1 0 0 0 1 0 1 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Linux 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0

Readme

Source
raw.​githubusercontent.​com

About

Adds commands to Sublime Text that converts RGB colors, in either hex or RGB() format, to HSL colors. For example:

  • #bada55 becomes 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.

Installation

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: (shift+ctrl+U).

Usage

  • 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.

HSL Resources

If you need more convincing about HSL, try these: