R.I.B.H.U. Academy^®

HSL Color Values

    HSL (Hue Saturation Lightness) Color Values are very helpful, when you want to create some evenly divided gradients, with HSL color values. An example of this gradient created with HSL values is shown below.

    Hue means different colors from 0° to 360° (clockwise or counter-clockwise). 0 is    RED   , 30 is    ORANGE   , 60 is    YELLOW   , 90 is    LIME   , 120 is    GREEN   , 150 is    LIGHTGREEN   , 180 is    CYAN   , 210 is    LIGHTBLUE   , 240 is    BLUE   , 270 is    VIOLET   , 300 is    MAGENTA   , 330 is    CRIMSON   , and 360 is    RED    (disclaimer: these color-names in uppercase are only for illustration, and not equivalent color-names, therefore, difference in color values may happen).

    Saturation means deepness of colors, and its value starts from 0% (no color) to 100% (full color).

    Lightness is self explainatory, and you are correct, if you think that 0% is BLACK (no light), and 100% is WHITE (full bright light). These above colors are at 50% lightness. Following colors have different lightness values:

Lightness: 25%

Colors at   10% Saturation                                                                                    
Colors at   25% Saturation                                                                                    
Colors at   50% Saturation                                                                                    
Colors at    75% Saturation                                                                                    
Colors at 100% Saturation                                                                                    

Lightness: 50%

Colors at   10% Saturation                                                                                    
Colors at   25% Saturation                                                                                    
Colors at   50% Saturation                                                                                    
Colors at    75% Saturation                                                                                    
Colors at 100% Saturation                                                                                    

Lightness: 75%

Colors at   10% Saturation                                                                                    
Colors at   25% Saturation                                                                                    
Colors at   50% Saturation                                                                                    
Colors at    75% Saturation                                                                                    
Colors at 100% Saturation                                                                                    

    HSL values are written with hsl(), and values inside parenthesis are separated either by , (comma) or a blank space. First value is hue in degree, but you don't have to write ° or other symbol. Only integer value from 0 to 360 are valid. Second and third values are written in percentage, for example, 0% or 100% (both included). Therefore, there are 3,672,360 (360*101*101) possible HSL color values. But 0% and 100% of third value will always display black and white colors respectively. Also, colors below 5% of Saturation will display neutral GRAY colors. Examples to write HSL values are:

<p style="color:hsl(30, 10%, 50%)"> R.I.B.H.U. Academy </p>

<p style="color:hsl(40 10% 50%)"> R.I.B.H.U. Academy </p>