CSS/Properties/color/HSL - W3C Wiki

Trang chủ » Hsl Colour » CSS/Properties/color/HSL - W3C Wiki

Có thể bạn quan tâm

HSL(Hue-Saturation-Lightness)

The HSL color model is used in numerical color specifications. The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).

The format of the HSL Value

  • hsl(H,S,L)The format of an HSL color value in the functional notation is ‘hsl(’ followed by the hue in degrees, saturation and lightness as a percentage, followed by ‘)’.
    • HueHue is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is so typically measured in degrees that the unit is implicit in CSS; syntactically, only a <number> is given. By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120.[Example A]
    • SaturationSaturation is represented as percentages. 100% is full saturation, and 0% is a shade of gray.[Example B]
    • LightnessLightness is represented as percentages. 0% lightness is black, 100% lightness is white, and 50% lightness is “normal”.[Example B]

Example

Example A

Change only the value of Hue. Sets the Saturation=100% and Lightness=50%.

Huehsl(H,S,L)ColorColor Name
0hsl(0, 100%, 50%) red
60hsl(60, 100%, 50%)  
120hsl(120, 100%, 50%) green
180hsl(180, 100%, 50%)  
240hsl(240, 100%, 50%) blue
300hsl(300, 100%, 50%)  
360hsl(360, 100%, 50%) red

Example B

Change the values of the Saturation and the Lightness. Sets the Hue=0(red).

    Saturation
    100% 75% 50% 25% 0%
Lightness 100%          
88%          
75%          
63%          
50%          
38%          
25%          
13%          
0%          

CSS Reference

CSS Color defines the HSL color values in 4.2.4. HSL color values.

Từ khóa » Hsl Colour