色見本 (2) - HSL, 白地, 中間色

HSL で調整。
#RGB は 3桁の近い色。大雑把な目安。

彩度と明度をそろえたサンプル

色だけ変える場合、彩度と明度を揃えるとギラギラ感のばらつきがなくなる。

彩度 100%, 明度 80%

h30 #fc9

h210 #9cf

h270 #c9f

h0 #f99

h50 #fe9

h100 #bf9

h150 #9fc

彩度 100%, 明度 60%

h45 #fc3

h270 #93f

h5 #f43

h40 #fb3

h55 #fe3

h75 #cf3

h95 #8f3

h150 #3f9

h200 #3bf

h230 #35f

彩度 73%, 明度 50%

h27 #d72

h38 #d92

h49 #db2

h60 #dd2

h81 #9d2

h147 #2d7

h180 #2dd

h201 #29d

彩度 50%, 明度 60%

h210 #69c

h240 #66c

h270 #96c

h20 #c86

h40 #ca6

h60 #cc6

h90 #9c6

h120 #6c6

h150 #6c9

h180 #6cc

彩度 38%, 明度 56%

h84 #9b6

h36 #b96

h288 #a6b

彩度 33%, 明度 70%

h120 #9c9

h180 #9cc

h240 #99c

h0 #c99

彩度 20%, 明度 50%

h120 #696

h180 #699

h240 #669

h20 #976

(参考) Web セーフカラーの中間色

・Web セーフカラー 216色の内訳
  152色   彩度100％  輝度違いでたくさん
   18色   彩度60％   輝度 50％
   24色   彩度50％   輝度 60％, 40％
   12色   彩度33％   輝度 70％
    6色   彩度20％   輝度 50％
    6色   彩度0％    白・黒・灰色

彩度 60％、輝度 50％ (18色)

#c33 hsl(0, 60%, 50%)	#c63 hsl(20, 60%, 50%)	#c93 hsl(40, 60%, 50%)	#cc3 hsl(60, 60%, 50%)	#9c3 hsl(80, 60%, 50%)	#6c3 hsl(100, 60%, 50%)
#3c3 hsl(120, 60%, 50%)	#3c6 hsl(140, 60%, 50%)	#3c9 hsl(160, 60%, 50%)	#3cc hsl(180, 60%, 50%)	#39c hsl(200, 60%, 50%)	#36c hsl(220, 60%, 50%)
#33c hsl(240, 60%, 50%)	#63c hsl(260, 60%, 50%)	#93c hsl(280, 60%, 50%)	#c3c hsl(300, 60%, 50%)	#c39 hsl(320, 60%, 50%)	#c36 hsl(340, 60%, 50%)

彩度 50％、輝度 60％ (12色) と 40％ (12色)

#c66 hsl(0, 50%, 60%)	#c96 hsl(30, 50%, 60%)	#cc6 hsl(60, 50%, 60%)	#9c6 hsl(90, 50%, 60%)	#6c6 hsl(120, 50%, 60%)	#6c9 hsl(150, 50%, 60%)
#6cc hsl(180, 50%, 60%)	#69c hsl(210, 50%, 60%)	#66c hsl(240, 50%, 60%)	#96c hsl(270, 50%, 60%)	#c6c hsl(300, 50%, 60%)	#c69 hsl(330, 50%, 60%)
#933 hsl(0, 50%, 40%)	#963 hsl(30, 50%, 40%)	#993 hsl(60, 50%, 40%)	#693 hsl(90, 50%, 40%)	#393 hsl(120, 50%, 40%)	#396 hsl(150, 50%, 40%)
#399 hsl(180, 50%, 40%)	#369 hsl(210, 50%, 40%)	#339 hsl(240, 50%, 40%)	#639 hsl(270, 50%, 40%)	#939 hsl(300, 50%, 40%)	#936 hsl(330, 50%, 40%)

彩度 33％、輝度 70％ (6色)と 30％ (6色)

#c99 hsl(0, 33%, 70%)	#cc9 hsl(60, 33%, 70%)	#9c9 hsl(120, 33%, 70%)	#9cc hsl(180, 33%, 70%)	#99c hsl(240, 33%, 70%)	#c9c hsl(300, 33%, 70%)
#633 hsl(0, 33%, 30%)	#663 hsl(60, 33%, 30%)	#363 hsl(120, 33%, 30%)	#366 hsl(180, 33%, 30%)	#336 hsl(240, 33%, 30%)	#636 hsl(300, 33%, 30%)

彩度 20％、輝度 50％ (6色)

#966
hsl(0, 20%, 50%)

#996
hsl(60, 20%, 50%)

#696
hsl(120, 20%, 50%)

#699
hsl(180, 20%, 50%)

#669
hsl(240, 20%, 50%)

#969
hsl(300, 20%, 50%)

(2015/12-2022/04)