convert hsl to hsb

1.4k views Asked by At

what is the formula to convert HSL to HSB? I could only find code that I could easily port for RGB to HSL. According to this stack overflow answer I can conver hsb to hsl using this formula:

(b - s) / 2

but I want to go the other way, and (b+s) * 2 returns significantly different values than photoshop's conversion, for example:

?rgbtohsb(100,100,100) s: 0 h: 0 b: 200 whereas photoshop returns 0,0,39

here is my code based on the easyrgb.com website's rgb to hsl code (this is written in Brightscript, a Basic like language for the Roku Digital Video Player):

function RGBtoHSB(r as integer, g as integer, b as integer) as object
hue=0.0
var_R = ( R / 255 )
?"var_R=";var_r
var_G = ( G / 255 )
?"var_g=";var_g
var_B = ( B / 255 )
?"var_b=";var_b
var_Min = min([ var_R, var_G, var_B ])    'Min. value of RGB
?"var_min=";var_min
var_Max = max([ var_R, var_G, var_B ])    'Max. value of RGB
?"var_max=";var_max
del_Max = var_Max - var_Min             'Delta RGB value
?"del_max=";del_max



LUM = ( var_Max + var_Min ) / 2
?"LUM=";LUM
if ( del_Max = 0 )                     'This is a gray, no chroma...
?"del_max=0"
   HUE = 0                                'HSL results from 0 to 1
   SAT = 0
else                                    'Chromatic data...
?"del_max";del_max
   if ( LUM < 0.5 ) then 
        SAT = del_Max / ( var_Max + var_Min )
        ?"Lum < 0.5 so SAt=";sat
   else           
   ?"LUM > 0.5, LUM=";LUM
        SAT = del_Max / ( 2 - var_Max - var_Min )
        ?"SAT=";SAT

       del_R = ( ( ( var_Max - var_R ) / 6 ) + ( del_Max / 2 ) ) / del_Max
       ?"del_r=";del_r
       del_G = ( ( ( var_Max - var_G ) / 6 ) + ( del_Max / 2 ) ) / del_Max
       ?"del_g=";del_g
       del_B = ( ( ( var_Max - var_B ) / 6 ) + ( del_Max / 2 ) ) / del_Max
       ?"del_b=";del_b


       if var_R = var_Max THEN
           HUE = del_B - del_G
           ?"var_r=var_max, so HUE=";hue
       else if ( var_G = var_Max ) then 
           HUE = ( 1 / 3 ) + del_R - del_B
           ?"var_g=var_max so HUE=";hue
       else if ( var_B = var_Max ) then 
           HUE = ( 2 / 3 ) + del_G - del_R
           ?"var_b=var_max so HUE=";hue
       end if



       if ( HUE < 0 ) then 
           HUE = HUE + 1
           ?"hue < 0 so hue=";hue
       end if
       if ( HUE > 1 ) then 
           HUE = HUE - 1
           ?"hue > 1 so hue=";hue
       end if

    end if
end if


?"sleeping"
sleep(5000)

bri=0.0
bri=(lum+sat) *2
?"hue=";HUE;" SAT=";sat;" LUM=";lum;" bri=";bri 

return {h:int(hue*255),s:int(sat*255),l:int(lum*255),b:int(bri*255)}
end function
2

There are 2 answers

0
Roko C. Buljan On

Related to This Answer

Hue is the same for both so let's see the math:

var SL = {s:0, l:0},
    SB = {s:0, b:0};

function sb2sl(){
  var l = (2 - SB.s / 100) * SB.b / 2;              // Lightness range 0-100
  SL.s = Math.round( SB.s * SB.b / (l<50 ? l * 2 : 200 - l * 2) ) |0;
  SL.l = Math.round( l );
}
function sl2sb(){
  var t = SL.s * (SL.l<50 ? SL.l : 100-SL.l) / 100; // Temp value
  SB.s = Math.round( 200 * t / (SL.l+t) ) |0;
  SB.b = Math.round( t+SL.l );
}
// Above, the "|0" prevents the NaN while dividing by 0

See also: http://code.stephenmorley.org/javascript/colour-handling-and-processing/

0
Peter O. On

I've written some functions for converting HSL directly from HSV and back. However, it assumes the S, L, B, and V values range from 0 through 1 rather than from 0 through 100. Also, the functions are in C# rather than BrightScript.

https://gist.github.com/4085710

The code is released to the public domain.