メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#5d5f31
#45ec03
#5dd197
#4103dc
#d7f6cb
#d88536
#36b401
#68d8d1
#10f5ff
#a31fdb
#0d9b2b
#98e156
#f36696
#c9439b
#1e93bc
#3529fb
#652dc1
#7aa8aa
#f698cc
#92bdcb
#4e2da3
#617daf
#676e5e
#0eb3c1
#690843
#5b29d7
#744f95
#243833
#203464
#f5b224
#f7a55d
長方形型の配色ジェネレーター 1
#a1bacd
#dc0a2c
#f8d542
#44117c
#64cffb
#6a76a0
#896148
#476542
#b3def9
#1c6249
#db7b52
#2bda3f
#42a3d8
#f8c8a3
#95c8d5
#3e56c3
#ad1f2a
#ef431c
#e7e705
#16ef17
#220332
#4ca3bd
#5a9ccb
#ee6f9d
#9c48c1
#3968cd
#bbf812
#6fcb4d
#59941d
#ac940e
#754f61
#a20d4e
#c2b49f
#c30556
#912d23
#26238c
#330fe2
#ad21a7
#bbb9fc
#8ec392
長方形型の配色ジェネレーター 2
#8d73b2
#8f8d11
#5d9015
#1f0a0e
#56d815
#894ef8
#5f393f
#8188b9
#c44d17
#271d8c
#373650
#c47d98
#4ee63e
#8a068d
#2d8e26
#0429c7
#a12fc8
#6c78ad
#92c728
#08ed43
#1bd815
#8d121f
#5d1634
#cf3068
#74f9e3
#3fce2e
#d1ba54
#7a7b18
#ad1a45
#7574ef
#b22cad
#d6a4b5
#78b771
#3bcd5d
#b94072
#f10778
#6b73ca
#f04378
#f3c6e5
#e354bf
類似色の配色ジェネレーター
#6cbad0
#4fb938
#d7079c
#f94f58
#eb73d6
#82526c
#959d9d
#758bf9
#b1309e
#d678d2
#8d4e0a
#5ea74e
#4b8449
#445703
#36756a
#a16467
#961138
#0fde06
#7bf4c9
#1c1d65
#b7a2bd
#0c5298
#11583a
#b01ba3
#ba91d0
#8e9c84
#40847f
#8d0bcf
#0b021a
#04639a
#c8d1d9
#9515aa
#767709
#42ab1f
#135640
#ec6659
#8e16c4
#d855c6
#038191
#b07786
#71eb2c
#45097e
#9c526f
#114cbb
#5dcf4e
#b48bbd
#2992d8
#ec83ba
#c2b9e2
#6f2408
正方形型の配色ジェネレーター
#75f7b9
#deabae
#1efbc5
#4a1bda
#32ef08
#fe2288
#20138a
#155032
#399c14
#0af6da
#3f258a
#ed3a68
#de3a2e
#744004
#003a17
#f11b12
#9c19d4
#bc458e
#2a59b7
#ac4b1a
#d8ecea
#4ce9f4
#bdb982
#656447
#165ad2
#f45c4b
#8ba81a
#ef33e0
#591d53
#fa5783
#340dca
#cb7f2e
#d173a0
#ef6d21
#e458bf
#c7cafe
#69c8fd
#1d44c5
#9dd881
#65d469
正三角形型の配色ジェネレーター
#1240cc
#6798d5
#841a03
#9d7a82
#b2b1ff
#bd4c0a
#e107f4
#e9bdb7
#2cb835
#267adf
#32a941
#4772fd
#d52110
#7326fd
#df91d4
#4f9618
#1b6070
#6d4a33
#a9b80b
#fa0795
#8f1eb8
#cc019a
#d5a37b
#bd3847
#33a03d
#8358de
#540fef
#a50d61
#b6f587
#2848ee
隣接補色の配色ジェネレーター
#4869bb
#ec657c
#13d809
#29fc6c
#a536d2
#82581a
#c90f66
#7b9fad
#8ad23e
#63ce86
#d47786
#cc2926
#c315d9
#9cae16
#327ff1
#9ee28f
#67e878
#36b930
#b9814c
#ff4a1b
#2964de
#08cd9a
#bacde3
#586689
#14b026
#c47bf7
#1e2e93
#521ffc
#64dc7d
#635d77
#6fcd95
#d9dacb
#259f5f
#1e4a14
#18a4ee
#75b0c4
#0270aa
#e7e2f8
#3e9e86
#367891
#e61a37
#4f09cd
#5ff02a
#839234
#5515d9
#1e1721
#f51e00
#3f6acd
#1a91e9
#be2f1f
補色の配色ジェネレーター
#52b22d
#841920
#c2d2b8
#ac353f
#bf60b9
#479791
#e8299e
#4bd4b6
#993ae9
#5e3784
#e02077
#561cc4
#55059a
#8b3557
#5702bc
#918d2d
#c1fa64
#0a1372
#bedba0
#926076
#f27384
#5ad611
#a692c5
#e8a6ae
#637ecd
#36a0cd
#7c4780
#679cee
#ea5431
#b4d20d
#75a4c6
#73dace
#c3709b
#91c7d3
#47e620
#75b06a
#13de20
#ab3ca4
#91e85c
#6fa4ce
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff