メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#22abd3
#30fa2f
#6511ec
#5a0a71
#05283d
#848cc3
#12f575
#0df9fe
#2ed08e
#b7fd26
#0258ea
#bf16d7
#ff274e
#02bcc0
#ec4fb1
#1dcd4c
#e7566e
#a54985
#2c87a4
#19c427
#9210d1
#c933dc
#a3e385
#20aa25
#21153d
#07a0b1
#bfe936
#17ff5b
#830337
#d06ec9
#273864
長方形型の配色ジェネレーター 1
#f20335
#0627a4
#b9128c
#0d5597
#0555de
#90f048
#01abd4
#7460dc
#fe6654
#dc126e
#050d7c
#190e83
#37b467
#ce6251
#75a6b8
#8fab9e
#048068
#a41e1f
#29ba7e
#4f5f35
#66f85c
#e448a0
#3d5176
#56746a
#518cd3
#abdcdd
#ac174a
#7688f5
#e115d3
#796557
#711c43
#a53ebc
#851275
#2916a4
#32808a
#4cc66d
#42d413
#133686
#839e86
#228451
長方形型の配色ジェネレーター 2
#c2103b
#6995cd
#9d9e1c
#906fd8
#9b62b1
#c6749c
#dcb2e0
#02e179
#15fb43
#f48de5
#63e366
#2789fb
#a74936
#f68027
#92584f
#468939
#c83088
#3896d3
#c815be
#bb49f0
#1d7358
#3458de
#acea54
#432b3c
#36bc26
#067651
#5f8ada
#6357be
#df5bc4
#06f803
#c48234
#c8b59a
#df9828
#2631ae
#811158
#ebd9c8
#3b9775
#082812
#ed9344
#d29c66
類似色の配色ジェネレーター
#37c4eb
#c921e7
#a1b551
#d89302
#58439c
#4a33bc
#db1443
#829111
#fbdd0c
#79040e
#58d2fe
#869e01
#49181b
#6c0638
#d4c7c8
#14d3a1
#b806e9
#694000
#c1296d
#b58ed2
#4b208a
#1a96e3
#a075c0
#9987ae
#5f65b4
#bcdf6b
#30df43
#5005a5
#1e5dd3
#ffba2a
#c527f6
#81b737
#ed6c12
#68ef24
#ceab93
#82fc49
#7bd258
#47b1cc
#9fbbb6
#79ed44
#35b248
#d844d0
#5e94c2
#125874
#34baad
#f81668
#985a74
#9f925a
#393201
#5ae2d8
正方形型の配色ジェネレーター
#bcf77b
#608ce1
#9df4e0
#4bf45b
#68ab8b
#d974ba
#92099d
#b874af
#e2c7b5
#ce5337
#88d850
#2a35ee
#cad109
#ff2677
#c9290e
#f29d6d
#fa3dc5
#eec8c4
#310019
#94b4d6
#19818c
#861b58
#b38a4c
#6112af
#ff6182
#8b780b
#34ca08
#9f8d01
#61d12e
#9eb089
#46d757
#d6bdd4
#a42580
#9b191a
#e48c28
#198ab4
#277b7f
#06881d
#af9fc2
#6c5d7c
正三角形型の配色ジェネレーター
#b4044c
#1d12b7
#f2c2d7
#8fcdfe
#a4c098
#58e263
#d57fd8
#e26167
#ff51c4
#43065a
#d5b971
#bffd6e
#9f2730
#50df07
#e3db4c
#48fa97
#eab27f
#70f0f8
#f96f86
#dda22c
#02b5d0
#44d005
#e00d76
#c299c3
#1b6b3b
#63aa9d
#36bca6
#48874e
#557507
#1d086b
隣接補色の配色ジェネレーター
#d0312a
#c25625
#5d7a66
#3cced4
#e2f4b5
#73368c
#bd4cbd
#2bd0ec
#77e210
#1cf68d
#ccadb3
#4a57e8
#318ed7
#c1ec3d
#c28e90
#976c40
#3a999e
#a096c4
#7e25b9
#1f76e6
#8f90e8
#1b9ca7
#31bf39
#7a555b
#45898f
#ac2349
#63f9ae
#fb7281
#16c183
#bfe499
#7f7112
#79216e
#bd15fc
#6d2553
#e8ed29
#8a96b2
#34e29b
#b5ff60
#d9419c
#50afb6
#4c50f7
#ff992a
#ce69f5
#c47f3c
#2976a5
#d21bff
#9f4c1c
#ca9124
#1f19bd
#a8c8ca
補色の配色ジェネレーター
#2b2ff7
#0a46f1
#0ad250
#dfabc2
#59a34d
#98d1c9
#01c176
#cb64de
#056d22
#ae65cf
#997cca
#f8841c
#5da415
#d58e21
#1b5787
#005603
#e72f7d
#bf47e6
#47209f
#71edd4
#3f3357
#45fe1c
#79ff73
#f50060
#f86335
#44e71b
#7c8f1a
#11fb82
#da38cc
#0be009
#72f248
#4cf38f
#9dcec4
#20f1aa
#589846
#70c163
#38e8f2
#236d42
#aa0da2
#ca40cc
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff