投稿
* * * HSL色相環 * * *
色相(H)を30ずつに区切った、やっつけ色相環です。
彩度(S)は100%,、輝度(L)は50%です。
* * * HSLカラーチャート * * *
色相(H)を30ずつに区切り、輝度(L)ごとに表にしています。
下の表ほど輝度(L)が高いです。
表内の右に行くほど彩度(S)が低くなります。
| hsl(0, 100%, 25%) |
hsl(0, 75%, 25%) |
hsl(0, 50%, 25%) |
hsl(0, 25%, 25%) |
| hsl(30, 100%, 25%) |
hsl(30, 75%, 25%) |
hsl(30, 50%, 25%) |
hsl(30, 25%, 25%) |
| hsl(60, 100%, 25%) |
hsl(60, 75%, 25%) |
hsl(60, 50%, 25%) |
hsl(60, 25%, 25%) |
| hsl(90, 100%, 25%) |
hsl(90, 75%, 25%) |
hsl(90, 50%, 25%) |
hsl(90, 25%, 25%) |
| hsl(120, 100%, 25%) |
hsl(120, 75%, 25%) |
hsl(120, 50%, 25%) |
hsl(120, 25%, 25%) |
| hsl(150, 100%, 25%) |
hsl(150, 75%, 25%) |
hsl(150, 50%, 25%) |
hsl(150, 25%, 25%) |
| hsl(180, 100%, 25%) |
hsl(180, 75%, 25%) |
hsl(180, 50%, 25%) |
hsl(180, 25%, 25%) |
| hsl(210, 100%, 25%) |
hsl(210, 75%, 25%) |
hsl(210, 50%, 25%) |
hsl(210, 25%, 25%) |
| hsl(240, 100%, 25%) |
hsl(240, 75%, 25%) |
hsl(240, 50%, 25%) |
hsl(240, 25%, 25%) |
| hsl(270, 100%, 25%) |
hsl(270, 75%, 25%) |
hsl(270, 50%, 25%) |
hsl(270, 25%, 25%) |
| hsl(300, 100%, 25%) |
hsl(300, 75%, 25%) |
hsl(300, 50%, 25%) |
hsl(300, 25%, 25%) |
| hsl(330, 100%, 25%) |
hsl(330, 75%, 25%) |
hsl(330, 50%, 25%) |
hsl(330, 25%, 25%) |
| hsl(0, 100%, 38%) |
hsl(0, 75%, 38%) |
hsl(0, 50%, 38%) |
hsl(0, 25%, 38%) |
| hsl(30, 100%, 38%) |
hsl(30, 75%, 38%) |
hsl(30, 50%, 38%) |
hsl(30, 25%, 38%) |
| hsl(60, 100%, 38%) |
hsl(60, 75%, 38%) |
hsl(60, 50%, 38%) |
hsl(60, 25%, 38%) |
| hsl(90, 100%, 38%) |
hsl(90, 75%, 38%) |
hsl(90, 50%, 38%) |
hsl(90, 25%, 38%) |
| hsl(120, 100%, 38%) |
hsl(120, 75%, 38%) |
hsl(120, 50%, 38%) |
hsl(120, 25%, 38%) |
| hsl(150, 100%, 38%) |
hsl(150, 75%, 38%) |
hsl(150, 50%, 38%) |
hsl(150, 25%, 38%) |
| hsl(180, 100%, 38%) |
hsl(180, 75%, 38%) |
hsl(180, 50%, 38%) |
hsl(180, 25%, 38%) |
| hsl(210, 100%, 38%) |
hsl(210, 75%, 38%) |
hsl(210, 50%, 38%) |
hsl(210, 25%, 38%) |
| hsl(240, 100%, 38%) |
hsl(240, 75%, 38%) |
hsl(240, 50%, 38%) |
hsl(240, 25%, 38%) |
| hsl(270, 100%, 38%) |
hsl(270, 75%, 38%) |
hsl(270, 50%, 38%) |
hsl(270, 25%, 38%) |
| hsl(300, 100%, 38%) |
hsl(300, 75%, 38%) |
hsl(300, 50%, 38%) |
hsl(300, 25%, 38%) |
| hsl(330, 100%, 38%) |
hsl(330, 75%, 38%) |
hsl(330, 50%, 38%) |
hsl(330, 25%, 38%) |
| ↓ 純色 ↓ |
| hsl(0, 100%, 50%) |
hsl(0, 75%, 50%) |
hsl(0, 50%, 50%) |
hsl(0, 25%, 50%) |
| hsl(30, 100%, 50%) |
hsl(30, 75%, 50%) |
hsl(30, 50%, 50%) |
hsl(30, 25%, 50%) |
| hsl(60, 100%, 50%) |
hsl(60, 75%, 50%) |
hsl(60, 50%, 50%) |
hsl(60, 25%, 50%) |
| hsl(90, 100%, 50%) |
hsl(90, 75%, 50%) |
hsl(90, 50%, 50%) |
hsl(90, 25%, 50%) |
| hsl(120, 100%, 50%) |
hsl(120, 75%, 50%) |
hsl(120, 50%, 50%) |
hsl(120, 25%, 50%) |
| hsl(150, 100%, 50%) |
hsl(150, 75%, 50%) |
hsl(150, 50%, 50%) |
hsl(150, 25%, 50%) |
| hsl(180, 100%, 50%) |
hsl(180, 75%, 50%) |
hsl(180, 50%, 50%) |
hsl(180, 25%, 50%) |
| hsl(210, 100%, 50%) |
hsl(210, 75%, 50%) |
hsl(210, 50%, 50%) |
hsl(210, 25%, 50%) |
| hsl(240, 100%, 50%) |
hsl(240, 75%, 50%) |
hsl(240, 50%, 50%) |
hsl(240, 25%, 50%) |
| hsl(270, 100%, 50%) |
hsl(270, 75%, 50%) |
hsl(270, 50%, 50%) |
hsl(270, 25%, 50%) |
| hsl(300, 100%, 50%) |
hsl(300, 75%, 50%) |
hsl(300, 50%, 50%) |
hsl(300, 25%, 50%) |
| hsl(330, 100%, 50%) |
hsl(330, 75%, 50%) |
hsl(330, 50%, 50%) |
hsl(330, 25%, 50%) |
| ↑ 純色 ↑ |
| hsl(0, 100%, 63%) |
hsl(0, 75%, 63%) |
hsl(0, 50%, 63%) |
hsl(0, 25%, 63%) |
| hsl(30, 100%, 63%) |
hsl(30, 75%, 63%) |
hsl(30, 50%, 63%) |
hsl(30, 25%, 63%) |
| hsl(60, 100%, 63%) |
hsl(60, 75%, 63%) |
hsl(60, 50%, 63%) |
hsl(60, 25%, 63%) |
| hsl(90, 100%, 63%) |
hsl(90, 75%, 63%) |
hsl(90, 50%, 63%) |
hsl(90, 25%, 63%) |
| hsl(120, 100%, 63%) |
hsl(120, 75%, 63%) |
hsl(120, 50%, 63%) |
hsl(120, 25%, 63%) |
| hsl(150, 100%, 63%) |
hsl(150, 75%, 63%) |
hsl(150, 50%, 63%) |
hsl(150, 25%, 63%) |
| hsl(180, 100%, 63%) |
hsl(180, 75%, 63%) |
hsl(180, 50%, 63%) |
hsl(180, 25%, 63%) |
| hsl(210, 100%, 63%) |
hsl(210, 75%, 63%) |
hsl(210, 50%, 63%) |
hsl(210, 25%, 63%) |
| hsl(240, 100%, 63%) |
hsl(240, 75%, 63%) |
hsl(240, 50%, 63%) |
hsl(240, 25%, 63%) |
| hsl(270, 100%, 63%) |
hsl(270, 75%, 63%) |
hsl(270, 50%, 63%) |
hsl(270, 25%, 63%) |
| hsl(300, 100%, 63%) |
hsl(300, 75%, 63%) |
hsl(300, 50%, 63%) |
hsl(300, 25%, 63%) |
| hsl(330, 100%, 63%) |
hsl(330, 75%, 63%) |
hsl(330, 50%, 63%) |
hsl(330, 25%, 63%) |
| hsl(0, 100%, 75%) |
hsl(0, 75%, 75%) |
hsl(0, 50%, 75%) |
hsl(0, 25%, 75%) |
| hsl(30, 100%, 75%) |
hsl(30, 75%, 75%) |
hsl(30, 50%, 75%) |
hsl(30, 25%, 75%) |
| hsl(60, 100%, 75%) |
hsl(60, 75%, 75%) |
hsl(60, 50%, 75%) |
hsl(60, 25%, 75%) |
| hsl(90, 100%, 75%) |
hsl(90, 75%, 75%) |
hsl(90, 50%, 75%) |
hsl(90, 25%, 75%) |
| hsl(120, 100%, 75%) |
hsl(120, 75%, 75%) |
hsl(120, 50%, 75%) |
hsl(120, 25%, 75%) |
| hsl(150, 100%, 75%) |
hsl(150, 75%, 75%) |
hsl(150, 50%, 75%) |
hsl(150, 25%, 75%) |
| hsl(180, 100%, 75%) |
hsl(180, 75%, 75%) |
hsl(180, 50%, 75%) |
hsl(180, 25%, 75%) |
| hsl(210, 100%, 75%) |
hsl(210, 75%, 75%) |
hsl(210, 50%, 75%) |
hsl(210, 25%, 75%) |
| hsl(240, 100%, 75%) |
hsl(240, 75%, 75%) |
hsl(240, 50%, 75%) |
hsl(240, 25%, 75%) |
| hsl(270, 100%, 75%) |
hsl(270, 75%, 75%) |
hsl(270, 50%, 75%) |
hsl(270, 25%, 75%) |
| hsl(300, 100%, 75%) |
hsl(300, 75%, 75%) |
hsl(300, 50%, 75%) |
hsl(300, 25%, 75%) |
| hsl(330, 100%, 75%) |
hsl(330, 75%, 75%) |
hsl(330, 50%, 75%) |
hsl(330, 25%, 75%) |
| hsl(0, 100%, 88%) |
hsl(0, 75%, 88%) |
hsl(0, 50%, 88%) |
hsl(0, 25%, 88%) |
| hsl(30, 100%, 88%) |
hsl(30, 75%, 88%) |
hsl(30, 50%, 88%) |
hsl(30, 25%, 88%) |
| hsl(60, 100%, 88%) |
hsl(60, 75%, 88%) |
hsl(60, 50%, 88%) |
hsl(60, 25%, 88%) |
| hsl(90, 100%, 88%) |
hsl(90, 75%, 88%) |
hsl(90, 50%, 88%) |
hsl(90, 25%, 88%) |
| hsl(120, 100%, 88%) |
hsl(120, 75%, 88%) |
hsl(120, 50%, 88%) |
hsl(120, 25%, 88%) |
| hsl(150, 100%, 88%) |
hsl(150, 75%, 88%) |
hsl(150, 50%, 88%) |
hsl(150, 25%, 88%) |
| hsl(180, 100%, 88%) |
hsl(180, 75%, 88%) |
hsl(180, 50%, 88%) |
hsl(180, 25%, 88%) |
| hsl(210, 100%, 88%) |
hsl(210, 75%, 88%) |
hsl(210, 50%, 88%) |
hsl(210, 25%, 88%) |
| hsl(240, 100%, 88%) |
hsl(240, 75%, 88%) |
hsl(240, 50%, 88%) |
hsl(240, 25%, 88%) |
| hsl(270, 100%, 88%) |
hsl(270, 75%, 88%) |
hsl(270, 50%, 88%) |
hsl(270, 25%, 88%) |
| hsl(300, 100%, 88%) |
hsl(300, 75%, 88%) |
hsl(300, 50%, 88%) |
hsl(300, 25%, 88%) |
| hsl(330, 100%, 88%) |
hsl(330, 75%, 88%) |
hsl(330, 50%, 88%) |
hsl(330, 25%, 88%) |
| hsl(0, 0%, 0%) |
| hsl(0, 0%, 13%) |
| hsl(0, 0%, 25%) |
| hsl(0, 0%, 38%) |
| hsl(0, 0%, 50%) |
| hsl(0, 0%, 63%) |
| hsl(0, 0%, 75%) |
| hsl(0, 0%, 88%) |
| hsl(0, 0%, 100%) |
続きを読む →
