ぱたぱたアニメ館HSLカラー値（HSL color values）
HSLは、RGBカラーを補完するものとして追加されました。Hue（色相）、Saturation（彩度）、Lightness（輝度）をカンマで区切って指定します。" hsl(Hue,Saturation,Lightness) "
Hue（色相）は、カラーサークル（虹の円形）の角度で表します。単位の無い number (0 以上 360 未満) のみを記述します。 定義により、red=0=360 となり、 他の色（green=120、blue=240など）が円の周りに広がります。
Saturation（彩度）とLightness（輝度）は、パーセンテージ（0%～100%）として表されます。 100% の彩度は完全彩度であり、0% の彩度は灰色となります。100% の輝度は白、0% の輝度は黒、50% の輝度は " normal（標準） " となります。
example
* { color: hsl(0, 100%, 50%); } /* red */
* { color: hsl(120, 100%, 50%); } /* lime */
* { color: hsl(120, 100%, 25%); } /* dark green */
* { color: hsl(120, 100%, 75%); } /* light green */
* { color: hsl(120, 75%, 75%); } /* pastel green */
HSL の例
| 0° Red | |||||||||
|---|---|---|---|---|---|---|---|---|---|
 | |||||||||
 |
|||||||||
| 30° Orange | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
|||||||||
| 60° Yellow | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
|||||||||
| 90° Yellow Green | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
|||||||||
| 120° Green | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
|||||||||
| 150° Green Cyan | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
|||||||||
| 180° Cyan | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
|||||||||
| 210° Cyan Blue | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
|||||||||
| 240° Blue | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
|||||||||
| 270° Blue Magenta | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
|||||||||
| 300° Magenta | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
|||||||||
| 330° Magenta Red | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
|||||||||
