メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#07cad9
#7d20ea
#80072d
#f1f54c
#e25188
#3c5f88
#931fe6
#94d6ef
#955910
#cd8555
#bca904
#e15515
#1b3978
#9997d7
#9fe679
#e828cb
#bb2156
#053906
#d130ae
#896618
#1bbbb0
#a161c5
#1861ff
#fd1edf
#865211
#42f016
#084023
#0657c6
#3491df
#a13dc7
#6b0a24
長方形型の配色ジェネレーター 1
#14f4d2
#500823
#9e0b7e
#4bb9d0
#df4ce8
#91d756
#9d5768
#1311c1
#ef7070
#d75ef2
#c975f7
#257f69
#6420c9
#2dc4cd
#ea365d
#2d6aba
#af3b3e
#b6cc7b
#ac43c0
#2b0358
#7433b8
#cd6947
#238f63
#093572
#2e6860
#2c3b77
#b79f1e
#c56eb0
#e9d8d7
#c3f1f7
#f65ef7
#bf7dc9
#de60d3
#e7958f
#68cbbc
#fe5dba
#ff3f36
#795345
#0fb7d7
#b867ad
長方形型の配色ジェネレーター 2
#bbaff0
#97afa0
#b54ad6
#377509
#02f045
#b964d2
#84ef51
#e62d3a
#b36a44
#39ca11
#166a2f
#795127
#9b3d90
#a0c29c
#35116b
#68906d
#1528b7
#c41738
#88c7e2
#5492cb
#a937cf
#950524
#f6c6d1
#3da260
#51d202
#9ff9cb
#1b94f7
#2609a0
#950945
#1622b0
#e11699
#9f021f
#54ac73
#8ced68
#9aa0cf
#ed3fa2
#6ecd6c
#5f0b94
#a0add6
#acf507
類似色の配色ジェネレーター
#397208
#f14b29
#75775f
#cae702
#d83ff6
#bbd38e
#9696fc
#12fab5
#ff60d3
#525c45
#451c3c
#aaeca2
#1cdd1a
#33fa36
#708b0f
#63be88
#1e81b1
#a96ccb
#392c73
#94311a
#374d35
#a7a478
#0646a6
#0488b0
#919f50
#8fd060
#447135
#962a54
#c435b4
#c6d922
#8a8cc1
#a290d3
#fca786
#c80b17
#182d4f
#52efb3
#0bc956
#5a127d
#89c168
#56d436
#1470f6
#7e9056
#dcaf79
#b272ca
#5cb1bb
#2bb6ff
#c34620
#cf5185
#521f0a
#b8c9c7
正方形型の配色ジェネレーター
#1cf36c
#61e6a6
#ec2c3e
#824b01
#a6022a
#0ecc1e
#499e36
#cd5860
#8a5bcf
#6097a7
#507429
#836d93
#1bc09a
#9678f4
#aff290
#6cc176
#14cef3
#01b5e9
#73d432
#07f251
#5a4e35
#173700
#3b52b6
#b5f9e3
#52c058
#78d439
#8ff945
#61aa55
#a48128
#1a3540
#0c4907
#0e8138
#5bf10d
#3d1da2
#5a60a9
#53ae32
#409486
#6b2848
#3c5524
#f9ff03
正三角形型の配色ジェネレーター
#08f0d9
#4d8383
#0bfb6a
#063afe
#6c819f
#707164
#83c7cb
#f99423
#00aa32
#a66636
#57611b
#0f7472
#c4411d
#07d944
#a5d2fe
#8f522d
#1c830f
#077a4d
#b22be1
#c29e14
#611dfe
#f0c044
#770877
#de8ae0
#72dc79
#7eec55
#8f57d3
#d79d77
#f4844e
#46e635
隣接補色の配色ジェネレーター
#dfc06e
#05e9ab
#c6faff
#0d0535
#49bfaa
#24d781
#43f5c0
#132bc0
#3122b1
#3c893e
#34a1e9
#19d111
#8710bb
#95bace
#b70e0f
#81ef5b
#80cc0d
#ef7734
#aceb46
#648ac3
#ccd04d
#c0891b
#1bc12d
#e0e7c2
#8449fe
#9957c1
#4126c6
#8acde7
#da4c30
#7e31bf
#603d4a
#209e0c
#92e6bd
#d21b7b
#47c966
#43d170
#1b90ae
#af4f3c
#c51aa4
#37e94c
#097f8f
#20f92e
#1eb7e6
#f22cd4
#32bdcd
#e999d8
#f5c32c
#720dbf
#495f74
#6f1dbf
補色の配色ジェネレーター
#ad761a
#3ce9c0
#2655d9
#21614c
#883bf4
#62618d
#f05814
#95c422
#d104fd
#f6e463
#3c5f44
#82df7f
#a0ba75
#f2991c
#b5930d
#66a75c
#8a79a3
#b9bc49
#eb73d3
#977654
#d8afa3
#c31ced
#8bd587
#ba009b
#2096ee
#3fd7be
#941722
#832a84
#1432ca
#df0b0f
#47301a
#818359
#63f41b
#b73bcb
#e5ee6b
#9eed8d
#a3f646
#97c61e
#095503
#9c098e
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff