メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#9b7535
#76ea7f
#ba7996
#55bc3b
#4e533e
#435afd
#80a28b
#d7cf8d
#72a7a6
#792e61
#c986a3
#f19704
#4f2476
#6c0f94
#fbb4c6
#26146e
#4f9b1d
#92ce0b
#cc8e4c
#db5c17
#ec5e00
#f0e3ac
#ae6178
#fee23a
#1f4364
#3e76e2
#9b57ad
#3cc46e
#e8fa4d
#88fff3
#3d6c17
長方形型の配色ジェネレーター 1
#2a379d
#8b5722
#d3a4c8
#f5b6bd
#0aa974
#614725
#85ceba
#89a32d
#86ae6f
#307722
#dcb223
#b26938
#a1c3df
#94aad5
#c1b7b9
#95916e
#fa7f96
#ae87eb
#4833f0
#63b659
#4e3d18
#9870ab
#18d8f2
#484e99
#dff274
#a937a0
#6d13e7
#395b68
#afd532
#2f36c9
#284e9a
#839a2b
#f919e9
#d3ea3d
#951ab3
#8e8f0f
#a29f75
#19d73f
#50dc17
#dea9df
長方形型の配色ジェネレーター 2
#d100e2
#91861d
#c5dc2f
#e22589
#929776
#37e67c
#02080d
#5a5606
#52a87d
#85dacc
#cc37c4
#ee1f9b
#e690be
#b7210e
#22fd76
#8e8da5
#4879b6
#b39c32
#22dec7
#332e5f
#7d4303
#6262ac
#06c3d6
#243c67
#690ca6
#672c07
#2892ee
#93f5dd
#0d74f2
#da0098
#b9a072
#ea0c64
#90675c
#3bab9b
#3f0ed7
#8b1875
#988786
#20a14e
#9db29d
#75adae
類似色の配色ジェネレーター
#c71631
#fd0feb
#d7ca9b
#1e551e
#04e3f0
#70eb7f
#3d1d17
#0e8db9
#c2bfc5
#073209
#280e73
#f0426c
#640e12
#c1a662
#f04e77
#922888
#9e1675
#0715d2
#3a056d
#b9706c
#5e5d84
#b72554
#773aa9
#1d5db4
#a04974
#b0e0f3
#54c22e
#00fb4e
#bc9f30
#0218c2
#ec977b
#89733c
#0e5764
#123c44
#4167c9
#23d8e1
#0e2178
#551e6b
#8a6e35
#36b028
#2ae48d
#a61967
#c7e8a3
#996adc
#f7ecf0
#2baaee
#8f944f
#31b8fc
#bb769a
#3416c5
正方形型の配色ジェネレーター
#da0d67
#eb1ff7
#d02ba6
#9626a8
#35dd21
#7c17fb
#a437e8
#d2fbd4
#47b60c
#042ddc
#c700f9
#2057e2
#1116ba
#239b38
#6da46c
#1b07a9
#8386e7
#55add8
#045405
#b07451
#5f23b8
#df7278
#d1c21e
#b20be2
#f373d0
#caa66e
#d04e97
#ee73e3
#c9c434
#1d36e7
#c0c6fb
#e08ddd
#84db58
#aecbac
#1292ba
#5c7edd
#dadfc1
#c3469a
#a74e9a
#cc683d
正三角形型の配色ジェネレーター
#c0240f
#7a0058
#3268cc
#ca914e
#ec6274
#711de0
#228143
#4aa6bf
#640dd2
#e9e1ea
#a86829
#38adc5
#acff08
#b19863
#b8cea9
#f79665
#a52938
#f1e958
#605c61
#8c396a
#6b6802
#664420
#a01e27
#6943e8
#8a26ff
#d1eaab
#606904
#b65b53
#39d1f4
#ae3025
隣接補色の配色ジェネレーター
#14968d
#dde282
#81f195
#11fd72
#08adf6
#0a7938
#a3d0c6
#ade124
#455f87
#bcd500
#3cc2ad
#3a17f4
#a4ee5b
#8d2b70
#20e213
#e955d7
#66fe87
#9e532e
#05a6de
#dae742
#f7fc0f
#f54241
#a63698
#544532
#0d314c
#52e58a
#56215f
#e4ae0b
#dee9ac
#f1b67a
#ba8cac
#d80064
#8867ec
#91314c
#21e1c5
#58344b
#284528
#089f68
#372dd0
#d1a2ab
#a54079
#85ceb9
#64bddb
#1511c4
#41dcf5
#0c880e
#71614c
#f678f7
#d6a632
#7e23d0
補色の配色ジェネレーター
#d16188
#e7dd49
#6dd1c3
#b6bdb8
#dfe5d8
#1fcb5c
#85763e
#4c7d3b
#1b66bf
#020ad5
#c5f6c0
#6e71d9
#70445b
#ba7252
#facc03
#d0df97
#3bc784
#b4827b
#72c277
#a5c938
#a80db7
#f9e1cd
#1c5701
#474b0c
#3adc08
#9d3a1f
#215236
#7f326d
#5e55a7
#799419
#fc5c49
#996b31
#7f56c1
#775bfd
#f24205
#9e9db5
#51fca8
#aafe91
#114576
#f6ed45
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff