HSL instead of HSB in Photoshop CC 2015

Question

I'm a front end developer and I'm having issues with Photoshop. I have the HSB value in the Color Picker but I can't use it, because I need ligthness instead of brightness for CSS purposes. That's a problem because I have to take the hex value and convert it to HSL outside of Photoshop which is a loss of time.

To my surprise I couldn't easily find a plugin that would help me. Seems there was a HSL/HSB plugin 8 years ago with CS4 in the install CD. Even if I could get it I'm not sure at all it would work with current PS version.

Any insight ?

Answer 1

You could create a script that does this for you. Start extendscript toolkit and run following in Photoshop:

var fgc = app.foregroundColor;  

alert(hsb_to_hsl(fgc.hsb))


// http://stackoverflow.com/a/31851617/1335032
// Note: HSB and HSV is same thing
function hsb_to_hsl(color) {
    var h = color.hue;
    var s = color.saturation/100;
    var v = color.brightness/100;

    // both hsv and hsl values are in [0, 1]
    var l = (2 - s) * v / 2;

    if (l != 0) {
        if (l == 1) {
            s = 0
        } else if (l < 0.5) {
            s = s * v / (l * 2)
        } else {
            s = s * v / (2 - l * 2)
        }
    }

    return [Math.round(h),
            Math.round(s*100),
            Math.round(l*100)]
}

I'm sure you as a developer can whip up something more suitable in no time.

Answer 2

Apparently you can download from Adobe itself:

https://helpx.adobe.com/photoshop/kb/optional-file-format-plugins.html

It's the one called Electric Image & HSBHSL (Optional Multiplugin)

Answer 3

A different solution: use the excellent Xscope app (if you're on a Mac, that is).

http://xscopeapp.com/

It has a Loupe tool, which overlaps any screen under your cursor with crosshair showing the exact color value of that pixel in many different color spaces (and HSL is one of them!). So you just hover the cursor over different parts of the image and you'll see the color values.

The app has other very useful tools, so maybe it is worth the cost for you.

Answer 4

I was searching a way to do this too, but I still failed to find a convinient way to accomplish this in 2019. Then I wrote a CEP extension to do it, hope it may help someone looking for it. https://github.com/XiaoXiaoLui/photoshop_hsl_plugin

After installation, go to "windows" -> "Extensions" -> "HSL" to open it.