メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#d648d7
#e227e1
#77de88
#cb03d9
#a066f0
#8f2f2b
#8be78a
#42e78b
#5a30fd
#cf2e3a
#3e8237
#713a6e
#d85c68
#f57fd5
#575fd4
#96e134
#b59401
#37c152
#40ca1b
#672105
#b1398b
#2b3876
#2c1dad
#92ccff
#b1c8ac
#5eb58e
#99184f
#746f98
#4d8bc9
#ab18bf
#a02f8b
長方形型の配色ジェネレーター 1
#1d989a
#de48a7
#a18dd2
#e23bc9
#4cde92
#6893ea
#c601ff
#440ef8
#83acdc
#92d7bd
#aa8b82
#124d47
#68e5a9
#ac0b3b
#2db2f0
#f451a8
#63f1ab
#4bdd72
#fe0a9d
#4b4f03
#494d45
#6ef00a
#898093
#887a59
#983d68
#76eaeb
#da9bda
#691944
#17547b
#18f378
#d19e1d
#551389
#2511f5
#caa726
#1f8ee3
#bb5db6
#496d92
#7f6296
#6dc5f4
#d27df5
長方形型の配色ジェネレーター 2
#16c93e
#b29b7a
#f1de96
#a9cb93
#32d31f
#91a4d5
#1c55bb
#bd1ceb
#149361
#2c9a76
#23b159
#f79ea0
#2a77aa
#94a9bf
#772f6e
#2eca70
#5be859
#b2bb01
#f6df81
#fb22f7
#4411eb
#fde00e
#83f190
#84bd31
#c94f41
#7221d2
#af31c5
#64f79f
#6c478e
#b79003
#1d5865
#604a44
#8d9d26
#1c133b
#8d49c4
#2219fa
#17388d
#39b319
#2bda42
#b42cbe
類似色の配色ジェネレーター
#310d64
#140737
#376696
#7b03fe
#96ed1b
#6ba303
#93d0e6
#9b3d0f
#8fd597
#9ab9da
#497774
#d1673f
#9d6819
#b439f7
#77c1e8
#a8c23d
#8e171f
#db7200
#c22e6c
#454ec9
#64601e
#f73e52
#ed9834
#7dc6e0
#5b502e
#6df856
#470522
#19b1ce
#72e116
#803380
#8de097
#b21bf6
#3fae66
#f4f8b4
#c565ab
#e7c11c
#ff5862
#03ea42
#545b5b
#8af389
#17e50e
#fdc7bb
#cb696b
#8f7969
#7acd96
#f36a36
#2174f6
#8c3d1c
#d668d3
#2bc6d7
正方形型の配色ジェネレーター
#0ee00d
#5b4470
#e849c0
#540eb8
#cc77c2
#ad2df2
#9b3311
#06e07a
#fd9088
#fbb2d7
#41af3f
#31f113
#1e88cd
#db9f1d
#356ebc
#79d6bb
#dde630
#d798ee
#51842e
#8af9fb
#3ec1b5
#852b64
#2cb0ce
#2a5e39
#fb7bde
#ac1836
#17715c
#42345e
#0ff993
#1036f2
#c19e43
#5a3f51
#973725
#9f5fbf
#0377d3
#443b81
#c10ef9
#8a4adc
#b021b1
#edf7a6
正三角形型の配色ジェネレーター
#d6e591
#b82d4e
#121ef1
#86de72
#58c4ff
#546e70
#df9262
#8a95f5
#bc8e02
#23595b
#1a1d11
#f752c3
#56855c
#41685a
#976f08
#79ca40
#41e80e
#cff7db
#6a3cc5
#bb9098
#999998
#6d1196
#418dfe
#286440
#10ab72
#b1d7d9
#2c809c
#64b20a
#a0ad44
#0f2432
隣接補色の配色ジェネレーター
#3ce514
#a0ba2e
#f4a99f
#696be3
#e1c779
#d16fcf
#dbab47
#af2fe0
#c64af5
#57b1d9
#10e344
#276540
#af7382
#891541
#3a483e
#6a9e5a
#86d415
#00660c
#150bfb
#618c00
#26d592
#4885a2
#59cbe5
#70f193
#e9ad32
#dfa245
#2d2df9
#559dd4
#a45f43
#542cc4
#b4eb92
#75a5bb
#f59561
#45aebb
#295fd5
#663db7
#62dd8a
#e2f4f2
#00c7c8
#9a6111
#0859b7
#6a26b5
#67be59
#153e6b
#e53ddb
#9f9c31
#725ece
#3f5b84
#7cf46f
#e2d331
補色の配色ジェネレーター
#5f1c6c
#bdd1c2
#679fe5
#cf02cc
#00065b
#3b2828
#f731b3
#53c3d8
#451b00
#3866b9
#9eb5d6
#234d36
#d2be58
#364a75
#c9fbe7
#c42049
#2e9b1c
#414063
#2ab539
#a4f335
#036ea7
#4a415e
#afb18e
#386bab
#35bbed
#d20fa1
#c95a5b
#641663
#706200
#8ef231
#d626b5
#d03495
#a4d6ec
#9e19b1
#80c046
#d5b9fc
#ef8fe3
#f49d48
#1233fa
#aa6b46
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff