Why Brightness Drops When You Cut Saturation? - HSB vs HSL

[ad_1] So i received an email from a turkish photographer named bharat ostamir and he sensed something strange with the saturation slider in photoshop you can read the whole question but his question is pretty straight forward let me take you through it so here we have a color with hue zero degrees saturation hundred Percent at the brightness hundred percent right even if you check it it will show you the saturation is hundred and the brightness is also hundred however if you go ahead and create a hue saturation adjustment layer right and if you decrease the saturation now when you Check the colors so if you go back to the color picker and you pick this color have a look the saturation was meant to be zero because we decreased it but the brightness now is 50 why the hell is this happening that was this question very interesting one now Let's take another case so here we have another color but this time the brightness is already 50 if you check it you can also check it if you wish to take a look it is in the middle the brightness is 50 saturation is 100. if you again decrease the saturation in the Hue saturation adjustment and then if you check it again have a look the brightness is again halved why it's 25 now so why is all of this happening hi there this is unmish from picks and perfect and today we will learn why do we seem to lose brightness every time we Decrease the saturation or is it what's really happening we'll find out so without any further ado let's get started back in the magical photoshop and let's get straight to it why is this happening actually the answer is it's not actually happening take a look at this whenever you're working with hue saturation You're working with the hue saturation lightness hsl color model and if you're working with the color picker right here you're working with the hsb color model both are similar but they are absolutely not the same now what is the difference between both of these color models to understand it better Let's take a look at some easy diagrams so on our left we have a graphical representation of the hsl color model and on our right we have the hsb in other words it's also called hsv it's the same thing so to understand it better we need to understand what does Hsl stand for and what do they mean all right so h right here stands for hue now what is hue hue just determines what color is it all right so every degree represents a color so hue ranges from 0 to 360 degrees so even if you look at The color picker here is same in both of the cases in hsl and hsb or hsv here's the same all right so here we have zero degree it is red we take it up 112 degree it is a shade of green right so hue determines what color is it so every Angle determines the hue right here so all around the circle are different values of use so let's say let me take a brush right here so that it's easy for you to understand so let's take a color so let's say it's two degrees right here at zero degree right Here and 45 and then we go ahead and increase it right and it gets back right here to 360 degrees so that is why when you go ahead and choose the hue zero degree and if you go at the very top it goes to 360 and goes back to zero because It comes in circle to the exact same position so that's how hue is represented right here take a look at the arrow of the hue right here as you change the angle the color changes here is the only determining factor of what color is it right saturation and lightness or saturation and brightness Only modify that color think of it that way now what does s stand for you already know it is saturation now saturation determines the intensity of color how much color there is so once you have decided the hue let's say i've decided the hue to be zero degrees which Is red then you decide the saturation of how much of red do you want the more the saturation the more the intensity of the red you will have now as you decrease the saturation right here take a look it slowly and gradually becomes gray right because the intensity of the color Is being decreased and slowly and gradually the color is going away and it's turning gray grayscale right so all in all in this diagram you can clearly see that the center is neutral as you move away from the center have a look at the arrow of saturation the saturation Or the intensity of the color increases so as you move towards the center the saturation decreases and finally for hsl lightness is very simple to explain lightness is simply adding white or black that's all the more the lightness the more white you are adding and finally at the very top it's absolutely white The less the lightness the more black you're adding and finally at the very low end you have absolute black that's all there is to it so let's say you chose a dark blueish color where the intensity of the color is not that much where do you think that would be in this Graph now keep in mind we told dark blue so it would have a lower lightness now lightness is determined from here to here from bottom to top right so it would be somewhere around here the lightness would be somewhere around here dark it is bluish so the hue Would be somewhere around bluish so that particular degree right here and the saturation it's not very saturated remember we told you if the color intensity is not that much so it would be somewhere around right here right so understand how this works right now if it doesn't make sense please re-watch it It is very important to understand before we move forward in explaining as to why this thing is happening now let's take a look at hsb or hsv brightness or value is basically the same thing now in here as well the hue is around the angle it's the same as hsl The hue is the same similarly here as well here determines what color so if you chose 0 degrees it would be red and you can go ahead and increase the degrees and it comes back to the same position saturation is the intensity of the color And here as well if you move away from the center the saturation increases if you move towards the center the saturation decreases and you reach neutral right here now here we don't have lightness this is the differentiating factor also the saturation writer works a little differently first of all let's Understand how brightness works now brightness is like lightness but the lowest value here is absolute black right and the highest value of brightness can be white and it can also be a color but if you look at hsl the lowest value is always black and the highest value is Always white because we are adding white as we go up and adding black as we go down but with hsb it is a little different as we go down we definitely sure are adding black but as we go up look at the maximum value if the saturation is zero if we are moving Away from the edge and towards the center if it's absolutely zero we are talking about saturation right here at the maximum value of brightness it would be white right but at the maximum value of brightness if you start to increase the saturation it can be any other color of course Bright color so in a nutshell we can say that at the lowest lightness level of the hsl color model it's a point there is no space to increase the saturation it's going to be black no matter what and at the highest point because it's a point and there is No space to go away from the center it's going to be white no matter what but this looks like half of the hsl and that is why hsl is symmetric when it comes to lightness and darkness and hsb is not at the bottom it will be black no Matter what there is no space for expansion in saturation dimension but at the very top there is an option for that so i wanted to ask you one final time is everything clear if it is let's move on if it isn't please re-watch it it's very very important not only for this Question not only for this project but many more future projects and works to come all right let's get to it so let's say this is the hsl color model now from bottom to top what goes up the lightness so in the middle let's draw a line and This stands for lightness now as we move away from the center what we have saturation and around in an angle what does that stand for hue so let's say we took this color which is a bright saturated red with the most amount of colors so if we pick that color take a Look bright red most amount of color it would be somewhere around let's say right here where the degree is zero now if we do decrease the saturation using the hsl model have a look inside of hue saturation we are using the hsl model now if we decrease the saturation what Happens it moves towards the center so as it moves towards the center it would be right over here if we decrease the saturation all the way to the left hand side so now what color is this what do you think is this so right here it's absolute black zero at the top it's Absolute white so what do you think would be in the middle it's cutting i'm sorry about it so what do you think would be in the middle 50 right and that explains it all so if you decrease the saturation to the left hand side and if you try to pick this color Have a look 50 that's why it is happening now if you do use the hsb here's what happens so this is the hsb color model okay now from bottom to top brightness from center to outwards we have saturation and around we have here in different angles so it's the same color We pick right here and if we decrease the saturation using hsb here's what happens it is at this point and this point is what absolute white and this point is absolute black in other words 0 in other words 100 so now if you go inside of Color picker and pick this red and if you do decrease the saturation have a look brightness is at 100 and it's absolute white makes sense right let's take a look at case number two in case number two we pick a color which is between the most saturated red the color Which has the most amount of color in it and black right so in hsl this is hsl and this is hsb just to make clear in hsl that color would be between this point and this point so it would be somewhere around right here now in this case if we do decrease the Saturation it will move towards the center at this point right and what do you think would be this point this is zero this would be 25 this is 50 this is 75 so that is why when we do decrease the saturation and if we do try to pick the Color have a look 25 however in hsb or hsv that color would be somewhere around right here and if you do decrease the saturation it moves towards the center and what is this point do you think this is 0 this is 50 this is 100 so this Position would be 50. so if you look at the color picker and then if you choose that color which is which was in the middle so let's choose the middle color and then if you do decrease the saturation have a look it's 50 at 50 gray it all makes sense Right now let us do a quick little recap the basic difference between hsl and hsb color model is this if you focus on the saturation component in hsl the saturation ranges from color to its equivalent gray all right so if it's a brighter color and if it's right here if you decrease The saturation all the way to the left hand side it will result in its equivalent gray right so it would be a brighter gray if you pick this color it would be 50 gray if you pick this color it would be a little darker gray if you Pick this color right but in hsb if the brightness value or brightness so if that is at 100 percent if it's at its highest and the saturation is zero it would be white it won't be its equivalent gray it would be white the second major difference is this the hsl color model Is symmetrical it spans the entire range from absolute black to the hue of your choice so let's say you chose green or blue to the hue of your choice to absolute white right so it goes from black to white okay or white to black however you Want to call it okay it goes from black to your chosen hue if the saturation is zero it would be gray and then to absolute white however hsb is not symmetrical it goes from black to it can be white if the saturation is zero or it can be any other bright color If the saturation is not zero so all in all for hsp it goes from black to the chosen hue where the saturation determines whether it's going to be white or not i hope all of this made sense if you want to learn more about it i highly recommend this website called Colorizer.org.org however you pronounce it here you can play with hsl hsp hsv cmyk and see how the colors are affected here and there so as you're playing with hsl see how hsb is being affected and if you scroll down they have all the models that we Discussed and i used this website as a research as well for this lesson so all of the differences the explanation everything is right here you can use it as your study material i hope you enjoyed this video and i hope you learned something new and by the way if You want a dedicated video about the differences between hsb and hsl or differences between brightness and lightness please let me know in the comments down below i would love to create a video about it thank you so very much for watching i would like to take this moment to thank all these nice And amazing people for supporting pixim perfect on patreon and helping keep picking perfect free for everybody forever thanks so much again for your time i'll see you in my next one till then stay tuned and make sure that you keep creating True [ad_2] #Brightness #Drops #Cut #Saturation #HSB #HSL For More Interesting Article Visit : https://mycyberbase.com/ https://mycyberbase.com/technology/why-brightness-drops-when-you-cut-saturation-hsb-vs-hsl/?feed_id=6817&_unique_id=646f496ba03c7 #Technology