読者です 読者をやめる 読者になる 読者になる

F Lab.

LIFE IS A PARTY

【コピペ用】和風デザインに。和色同系色グラデーションのカラーコード19種232色まとめ

colores | Flickr

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にコピペすればグラデーションが取得できる。

 

関連記事: