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 ?

4 Answers 4


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

var fgc = app.foregroundColor;  


// 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),

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

  • To be honest I have absolutely no idea how HSB(HSV) is converted to HSL. I will look into that script and see if it's suitable to my needs, thanks. Commented Jan 18, 2016 at 14:13
  • @topleft even if I did i just looked it up on stack overflow anyway.
    – joojaa
    Commented Jan 18, 2016 at 14:13

Apparently you can download from Adobe itself:


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

  • Thanks, I installed it but I'm not sure that's whatI wanted. I do have a hsb/hsl filter that somewhat does some action on my image, but the color picker is still showing HSB and not HSL. Commented Jan 18, 2016 at 14:10
  • oh ok, I couldn't find a plugin that changes the color picker
    – Luciano
    Commented Jan 18, 2016 at 14:17
  • Actually I forgot to mention the color picker in my question so it's my bad. I edited accordingly Commented Jan 18, 2016 at 14:18

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


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.

Xscope's Loupe tool

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

  • thanks, actually I'm on win10, maybe there is an alternative I'm gonna check it out Commented Jan 20, 2016 at 9:26

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.