Webサイトでもブログでも、プレゼン資料でもチラシでも名刺でも、色付きの何かをオシャレに作ろうとしたら「同系色にまとめよ」という鉄則がある。「色は使いすぎるな」というやつだ。
同系色グラデーションフェチなぼくが今まで調べまくってきた経験からすると、同系色の見つけ方で一番早いのは、日本の伝統色 和色大辞典で良い感じの色を見つけ、0to255で”PICK A COLOR”にコピペしてグラデーションを取得すること。でもこの作業を何度もやるくらいなら、一気にまとめてしまった方が後々まで便利だと気付いた。
そこで本記事ではクリエイティブな作業の助けとして、よく使う同系色グラデーションのカラーコードをコピペできる形でひたすら羅列していく。基本的に和色から選んでいるので、日本人が眺めて落ち着く色も多くなっている。それではいきます。
青系色
青
#04062c
#070a4b
#0a0d6b
#0c118a
#1117b9
#222aeb
#6066f1
#9fa2f6
#bec0f9
#dddefc
#ecedfd
#fcfcff
空色
#04141b
#082a39
#0c4057
#115675
#1776a1
#1d97ce
#3bafe3
#76c7ec
#a3d9f2
#c1e6f6
#def2fa
#edf8fc
青碧（せいへき）
#0c1516
#172b2c
#234142
#2f5758
#3b6d6e
#4d8e8f
#6fb0b1
#9bc8c9
#c7e0e1
#ddeced
#e8f2f3
#f3f9f9
藍鼠（あいねず）
#0c0f10
#14181a
#222a2d
#2a3336
#38454a
#47575d
#5d727a
#7e949d
#a5b4ba
#cbd4d7
#e8ecee
#f2f4f5
紺桔梗（こんききょう）
#0a0b16
#0f1121
#191d39
#232951
#333c74
#4854a3
#6f7ac0
#9ea6d4
#c2c6e4
#d9dcee
#e5e7f4
#f1f2f9
紫系色
すみれ色
#0d0b14
#1d172a
#2c2240
#3b2e56
#4a3a6c
#685298
#8c78b6
#b1a4ce
#cec5e0
#e0dbec
#eae6f2
#f3f1f8
ぶどう色
#0e0810
#180e1c
#2b1932
#3f2449
#522f60
#6f4082
#9558ad
#b286c4
#cfb4da
#e5d6eb
#f3edf6
#fbf8fc
緑系色
緑
#07160a
#0c2310
#143c1b
#1d5627
#256f33
#3aaf50
#6fcf81
#a2e0ad
#c8edcf
#d5f1da
#e2f5e5
#eef9f0
翡翠色（ひすいいろ）
#040c09
#081913
#103227
#143f31
#20664f
#2c8d6d
#38b48b
#62ceaa
#96dec6
#bdeadb
#d6f2e9
#f0faf7
苔色（こけいろ）
#0e1204
#192007
#303c0c
#475812
#69821b
#8bac24
#acd42f
#c2df67
#d3e892
#e4f1bc
#eff7d8
#f5fae6
黃系色
黃（たんぽぽ色）
#110f00
#221d00
#443a00
#665700
#998200
#ccae00
#ffd900
#ffe344
#ffed88
#fff5bb
#fffadd
#fffcee
杏色（あんずいろ）
#190e01
#291602
#391f03
#593005
#894b08
#c96e0c
#f18717
#f4a047
#f8c187
#fbdab7
#fef3e7
#fffbf7
茶系色
黄櫨染（こうろぜん）
#0a0502
#180b05
#261208
#35180b
#512610
#89401c
#c25a27
#d97443
#e1946d
#edbda6
#f6ddd0
#fbf1ed
紅鳶（べにとび）
#090404
#150a09
#2e1613
#3a1b18
#46211c
#6a322b
#9a493f
#b95e53
#cc8b83
#e0b9b4
#efdad8
#f9f1f0
赤系色
血赤色
#2b0503
#3a0705
#4a0906
#6a0d09
#99120c
#d81a12
#ef453e
#f4827d
#f9bebb
#fcdcdb
#fdebea
#fffafa
薔薇色（ばらいろ）
#190307
#28050b
#37070f
#550b16
#821122
#bf1932
#e32744
#e9546b
#f1909f
#f8ccd3
#fceaed
#fefafa
ピンク系色
ピンク
#fb03f2
#fd23f4
#fd45f6
#fd67f8
#fe77f8
#fe88f9
#fe99fa
#feaafb
#febbfc
#fecbfd
#ffdcfd
#ffedfe
暗紅色
#090407
#150911
#2d1324
#451e36
#682d53
#8c3c6f
#b65693
#cb85b1
#dfb5d0
#eed8e6
#f3e4ee
#f9f0f5
グレースケール
#000
#111
#222
#333
#444
#555
#666
#777
#888
#999
#aaa
#bbb
#ccc
#ddd
#eee
#fff
多すぎても迷い、少なすぎても使いづらいということで、絶妙な232色を選んだつもりだ。デザイン活動の補助として、ぜひ作業効率アップに活用していただきたい。
それぞれの色のより細かいグラデーションが欲しい場合は、その色のコードを0to255のPICK A COLORにコピペすればグラデーションが取得できる。
