メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#298366
#330b60
#a83c31
#b403d1
#e92eea
#8694d0
#75702f
#58c665
#1f6e6c
#8ede46
#06c5f1
#21af3e
#e32df6
#6444ab
#6e965e
#32c22a
#fa18f7
#9b6975
#c0accf
#613575
#b9fbd3
#20b887
#0a6185
#99bf5a
#17c6d1
#f26a4f
#4787e4
#f9df70
#66e2f5
#732912
#546518
長方形型の配色ジェネレーター 1
#fc4ca1
#6d7ea3
#dc6cb9
#5efb28
#60169a
#b68121
#9f109d
#9e3fa2
#2193d7
#fd3138
#e6db18
#8b9457
#d223a9
#528ca5
#a2e6e0
#a54bd7
#5a5de2
#261314
#555a69
#f76aac
#1fc006
#b4a0cf
#f0d9dd
#957176
#2d8224
#e5225d
#65e464
#940b6e
#4e3bc4
#3dabc1
#6e15c9
#5f3ffb
#8ba37d
#21130f
#1b51b4
#e87d49
#c13a2b
#c6d78a
#b56e0a
#b2bd24
長方形型の配色ジェネレーター 2
#705cdb
#8a1b83
#464634
#496478
#ce46d0
#02089c
#a27944
#f3913f
#b93f5a
#6b5b46
#d0b14e
#3091be
#67c53c
#e94b81
#fa7271
#a67b51
#e543f6
#08d640
#e45454
#088636
#d9fd25
#4dcbf3
#a07115
#2b3708
#6192cb
#ca3e28
#6100ff
#07b5e7
#6b4538
#502f34
#22ca75
#113e78
#02c1e4
#800450
#3b81ec
#a69334
#0e8e70
#2d6bbe
#97ade4
#f911b7
類似色の配色ジェネレーター
#4bed9d
#856db4
#ca5f34
#d2ad11
#3dd1fe
#547842
#af4e22
#beee36
#2f4c95
#5fa366
#b9f111
#406a13
#8023c4
#2a6bfa
#9a29c6
#9f1ff9
#062129
#bef943
#5d728e
#242a47
#156b5a
#3bea3f
#e244bc
#1f5699
#982a8c
#74e4f9
#570653
#2ad9dd
#c005aa
#dbf381
#9e64d2
#cba814
#2cf760
#065f5d
#1cdf72
#c13ea4
#aad116
#59757e
#76a351
#412b75
#cbbbed
#ffaa14
#b60050
#988a52
#f86632
#0634d5
#c9e5ae
#93553d
#008dde
#13b387
正方形型の配色ジェネレーター
#254198
#ddfba2
#9e7f0c
#42e9e3
#e40f44
#d47fb0
#b82790
#5e932a
#5d9341
#ca983a
#cecf03
#a5aaf1
#9cfe21
#6d48e0
#0594f8
#d7d812
#46a9a0
#07496b
#54cd33
#18fdb4
#e8a4e3
#f9b094
#ef6c0e
#1ea3e0
#4d888d
#e0e5b4
#fe3369
#832a1a
#d8d3a3
#961ff8
#b472d0
#4ecbef
#389e99
#6ef126
#5a33b0
#1ea869
#5181f4
#e1c51f
#51d4d2
#7b7ae2
正三角形型の配色ジェネレーター
#7b6254
#9f1e87
#d9a666
#2dc4ad
#38abeb
#7eec58
#774a5f
#c10c79
#11a39b
#8edb4d
#a0b2e7
#1cd179
#3b1443
#854150
#7fd329
#9d1db3
#ff0305
#bb706e
#28b4c3
#7783f2
#577d81
#2d2201
#77e68b
#610b4a
#eb4150
#5881f6
#275f8a
#4f532e
#422c37
#f66d7a
隣接補色の配色ジェネレーター
#b43b55
#205877
#f858ea
#8bf770
#0e6320
#d1f4e8
#5ac44d
#b0786d
#fe8933
#71b80a
#db9386
#659727
#dd12a9
#d85174
#5ed35e
#141194
#e7e597
#b6b1cc
#770dbb
#27de28
#ebd001
#278919
#3b9a27
#13bfe3
#629e40
#631e3c
#ad5ac0
#dedf25
#cf3dc2
#f6e4a6
#61e6ff
#a1a488
#5fb344
#eaf291
#ed3a2a
#51321a
#6f79e2
#0ecb67
#c71367
#6daac4
#ce52b6
#921713
#ff91c4
#0e3ec7
#f5e2d3
#7e1861
#4e76a7
#09ef84
#05f7d2
#5741be
補色の配色ジェネレーター
#f61d75
#bc6bff
#422945
#7468e0
#aedf77
#f68add
#560fc2
#980f3d
#b58730
#d0fdbf
#2db066
#493e55
#07e6be
#512547
#3045eb
#d9d42d
#79d8fa
#8aac1a
#027ec2
#190d87
#432d5e
#4802b5
#24d9ce
#57e0b6
#e07b01
#5f3cf2
#3141a4
#aa9511
#0dd712
#fb6d75
#b2a079
#95306f
#772fbe
#0baa84
#802517
#80152c
#aed458
#2baae2
#be938a
#34c097
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff