メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#babc5d
#d06c25
#fb407a
#5d68e5
#51c93b
#d0d1b1
#7ce12e
#d185c1
#d7b62e
#3bed7b
#12c97d
#a9f5d9
#4518c1
#8847eb
#fcd7d0
#5d947d
#425de4
#afe5f8
#df34fd
#3a6777
#02ab7a
#474f06
#0feec9
#336c84
#646349
#ab0f01
#b96616
#5962b9
#59f7d6
#7ddbb0
#51c58f
長方形型の配色ジェネレーター 1
#deb881
#bfb906
#7e707a
#69ccbd
#ce2d0a
#07479e
#03a439
#1986ac
#4b3e4f
#14bbe6
#d370c8
#c742ae
#296b20
#6d7d1c
#36dc5c
#cf98d4
#65e2d1
#628c6d
#0d30e8
#cbab27
#fcb264
#38dfa2
#a4ee18
#206fc6
#39196a
#d794c1
#7ca693
#e5df6c
#eeaee9
#26894e
#f9c1a3
#82a6ff
#90a0fa
#cd74de
#1b2671
#f7b22a
#53dff7
#455033
#326663
#61d03a
長方形型の配色ジェネレーター 2
#0ab06e
#58cf1d
#835061
#be139c
#322d23
#0644bf
#182efb
#429fc8
#5ef4e4
#caaf0b
#2c8fc9
#58a085
#5bd5f6
#5c1f80
#d99268
#6060ae
#8e0357
#be8490
#81a1fe
#452600
#9c7e26
#fa382d
#2e642b
#96da97
#9e1fe3
#f4ed64
#46d4b8
#6ae414
#c95860
#7ce008
#d5358a
#e7139b
#847c93
#48c6d6
#e8ee94
#c09923
#e3b19f
#e6398d
#5ff1d8
#8897cc
類似色の配色ジェネレーター
#dc51c4
#8141e5
#b9f3ab
#afa024
#635f14
#63e76d
#3607d5
#44309e
#177212
#a0f3a2
#d53837
#95aba9
#2cd0a1
#c32ce0
#6ab218
#c83614
#e63bde
#971bea
#607343
#ade7c0
#acc9de
#525940
#86308d
#c1e3c7
#af0a57
#e59c6b
#23c377
#398c99
#1203b5
#2f98fd
#a90501
#ca5bb6
#0f8823
#e359fa
#fed7e5
#f72c03
#a33888
#2e85d5
#8084bf
#a140e9
#8c8587
#c0023c
#95aef2
#d743b4
#be5ceb
#8f1067
#5c513b
#c213e4
#c7342e
#536f9a
正方形型の配色ジェネレーター
#ab9d4a
#63de67
#2406ec
#b99d10
#5489d1
#1cbaea
#c8ea78
#102588
#078ee2
#804dc2
#d045ea
#156e19
#d8c88d
#9ce00e
#38d057
#259f1b
#68b40f
#fd4716
#c86d01
#d7b537
#303c0e
#370f15
#9917c3
#fc69f4
#070cab
#fcece2
#f391fe
#5ae658
#6b706d
#65bd2b
#fba2bc
#bb476e
#578347
#498f37
#49c2ec
#2725c1
#08993c
#5ba465
#f838d5
#71ce2c
正三角形型の配色ジェネレーター
#4f8a70
#912cda
#643429
#55eb81
#136e93
#b41d12
#10ae59
#da45ee
#306e07
#eeff44
#bee911
#643628
#d9ef2a
#155edc
#199efb
#61b7b3
#f6ca9f
#4b9b68
#ca9934
#d7e6db
#679987
#0bd3c0
#b09e13
#4a6c35
#e6dcf9
#e37153
#43d422
#5620b3
#d8ee3c
#60e6cc
隣接補色の配色ジェネレーター
#42fe75
#4a52ad
#529b83
#b2b490
#22a5bf
#e9c567
#414d31
#52f8b2
#aa93c9
#fc09eb
#a2cbed
#9cf769
#dc3d2f
#42694f
#4d8001
#5f642c
#f00f85
#d685b8
#e086d1
#e602ee
#9e584e
#a558ae
#058369
#c2bc2e
#54db64
#248a93
#78db65
#f8b5ce
#a275b6
#238856
#1061c0
#6eade7
#60937f
#a279b3
#b8853e
#87f406
#b50f5d
#688b93
#a53087
#f83095
#5081e8
#fe2760
#89e628
#ccf156
#935fb5
#1fe968
#e48306
#ebed28
#f1bddc
#71b596
補色の配色ジェネレーター
#53b608
#056091
#d0736e
#7f6b21
#ade3f4
#0a07b4
#a0d083
#17ad00
#731ad1
#5b51b4
#8889b6
#fe3e31
#25283b
#25b4b1
#e40142
#63ce3b
#b01a8a
#0fc8d2
#480519
#a2035f
#03acba
#c84413
#d7ab9c
#61556f
#379960
#1857cd
#316ee2
#942543
#81d12d
#428c26
#6e409f
#f4aa33
#1a55cc
#5f44e1
#9c4f1c
#e3101a
#1d4211
#8ade45
#57d5e7
#63b5c6
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff