メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#180516
#bdf0b6
#c68d9f
#eeb5dd
#eb25d4
#bd5641
#871e4f
#3dcc37
#9557d7
#9bb6a1
#c3ee79
#8f3354
#ba5587
#4f8d9d
#5fbc63
#5658e2
#8f1eb4
#22a98b
#63aec7
#789b0d
#9dba23
#309130
#90cf46
#4175f0
#7c9879
#1165d9
#2458a5
#07ad02
#5c491b
#4b68ab
#2f0d6e
長方形型の配色ジェネレーター 1
#c3990c
#7026ce
#f2366f
#61e309
#1e299e
#7aab36
#223d5d
#769865
#2fb311
#b9757e
#6d24b1
#d08eb1
#1b9096
#3101c1
#791600
#bcaddf
#7433e1
#e1d40d
#f5549e
#ed85d7
#40b255
#c9b30a
#0a8f95
#be789a
#2379e1
#18bba1
#c91eed
#2cc8c2
#6fd5ed
#a4d832
#032551
#c32b14
#838eef
#2bbb35
#f89b48
#53311e
#f175a6
#35264b
#3fd99a
#e2ce09
長方形型の配色ジェネレーター 2
#8b54fb
#924423
#2a8c8d
#ba9625
#23d414
#4c6cc3
#555213
#c66cc9
#95841f
#eb10f9
#23e122
#355b9c
#c1ebc2
#f70327
#34b8b8
#618959
#7c1c59
#86209e
#aa395c
#e5f59d
#bc7b65
#f6c030
#dbf40c
#780264
#c12cc4
#3b7fca
#3625f2
#a62b2f
#7630aa
#a7541f
#df0853
#3ed501
#64126b
#dc5acc
#0e1083
#8921b4
#92338b
#b72070
#c0b3e2
#096444
類似色の配色ジェネレーター
#0490aa
#0111a3
#cf0027
#9a7b22
#6a943b
#a8e6d3
#009878
#c030a0
#ff6520
#d44860
#1cac17
#3c110d
#b25d9a
#83e982
#7d83ac
#d12918
#42392a
#c02ddf
#2e8e61
#6b1681
#bd4e42
#7156d6
#4aa86a
#650044
#af12fa
#9072d0
#33e8a9
#c4aab0
#657a1c
#471a3e
#5edb7f
#e82f25
#09a834
#b0ab07
#14ed04
#592668
#8d568a
#296c7a
#952536
#618fc2
#93341f
#ac1329
#eb7cd6
#3cae5f
#caf320
#7dbd28
#4e3a02
#a3b99f
#abb365
#f8f49e
正方形型の配色ジェネレーター
#aa2fca
#4ad44f
#df60eb
#62cfa5
#a2ac40
#2189ff
#09a765
#6721db
#cc94d7
#c250e1
#3b8a4c
#c3253a
#7de8fd
#1181f4
#5bc313
#3e44f7
#97df51
#352062
#f9fd5e
#e00e9b
#2a51d7
#96e445
#722366
#35fa8f
#677211
#c88c54
#636aee
#e4feb8
#cf05e7
#dabd1d
#5ef55e
#f6f301
#bcfaaa
#e7ebc7
#49dc06
#abf8d5
#202bbf
#5a3d91
#58ab8e
#c193ef
正三角形型の配色ジェネレーター
#500ea8
#5c2480
#44e006
#5d3400
#0ace77
#3314ef
#8a2541
#2bd418
#257ceb
#3136f7
#1f3549
#fd4dcb
#759fc6
#e1b1e3
#676929
#a54b7d
#cac509
#f25f21
#94ae5f
#4ea65a
#483134
#b89569
#8fd5a0
#95b1d7
#2e66c0
#8c9409
#d555d7
#a3bfc6
#ca7652
#53218f
隣接補色の配色ジェネレーター
#c0e878
#77455f
#31fb7e
#96703c
#211297
#61bac6
#16a207
#698e06
#df005c
#43d3e4
#ff4bf5
#d3cd04
#354ec2
#fb4ab1
#c7b0f0
#b6ec8a
#a3b9be
#e86031
#5dd3be
#8a9a6e
#346333
#1dbacc
#4732c9
#15670e
#13c95c
#389dc4
#c2650e
#a5be2c
#24c987
#a2dee8
#1d24e8
#9021c0
#78764e
#08bcd4
#96de7c
#b20339
#2456b0
#9c0950
#6cefd0
#ed6ae0
#3b15a5
#a940a8
#4424d3
#786457
#f20023
#736009
#5ad9c8
#1f225d
#ab29a0
#fdda3e
補色の配色ジェネレーター
#dcd2f7
#583b58
#7eed8e
#b22b5e
#6d8087
#1a834b
#6a0666
#cd8140
#e351dd
#8b1f39
#cdd921
#73f7c2
#1f2bf6
#d3b922
#f11e5c
#b7454b
#8a4a8b
#2b7b0c
#860067
#efa4fb
#bb0bf7
#7cead5
#6a5804
#6c9186
#faa42e
#2e27b5
#4527ab
#c8bca3
#52b342
#b3a5b2
#dc0f6e
#6edc8a
#9e803f
#7e926f
#ea71f7
#0ca9f6
#106157
#fad213
#7ca535
#93fe95
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff