hueのバーを作るのに、一見すると次のようなbackgroundでできそうな気がする。
background:linear-gradient(to right,hsl(0,100%,50%),hsl(360,100%,50%));
ところが、hslで示した色は、RGBとして、linear-gradientが計算されるため、これではhueバーは作れない。
結論として、以下のように、hueの値を細かく列記していく必要がある。
background:linear-gradient(to right, hsl(0,100%,50%) 0%, hsl(1,100%,50%) 0.27777777777778%, hsl(2,100%,50%) 0.55555555555556%, hsl(3,100%,50%) 0.83333333333333%, hsl(4,100%,50%) 1.1111111111111%, ................................ ................................ ................................
saturationが0%というのは、RGBで表現した場合、R=G=BでありGrayの状態である。Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
hueと違い、saturationバーは列記せずとも、以下のCSSで作れる
background:linear-gradient(to right, hsl(0,0%,50%) 0%, hsl(0,100%,50%) 100% );
lightnessが0%は黒、lightnessが100%は白。50%が通常の状態。Lightness is also a percentage; 0% is black, 100% is white.
hueと違い、lightnessバーは列記せずとも、以下のCSSで作れる
background:linear-gradient(to right, hsl(0,100%,0%) 0%, hsl(0,100%,50%) 50%, hsl(0,100%,100%) 100% );