メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#332f05
#483cc6
#f975b7
#98602c
#a7a329
#6623ef
#7d32af
#18cf95
#5fcf5a
#ca9f81
#f17191
#f95fdd
#3a7191
#800f96
#9106b6
#c14384
#6a362f
#9c1bd1
#2e7fe4
#6f1a85
#1b0988
#286949
#e9aed0
#27efcb
#940ad1
#8ccc99
#49074c
#74329c
#48d0fe
#651f37
#2705f3
長方形型の配色ジェネレーター 1
#1ad494
#6ea766
#79cb3c
#65eb3d
#f21b0f
#ee713b
#d99131
#a06229
#ad3d39
#7f4039
#793fa1
#8368f6
#a3d612
#799c0c
#eb4c70
#4845a6
#4ec41e
#7d3d51
#a1bc43
#fbb731
#23868f
#5bd83f
#30c474
#2d2fa9
#1dc226
#40c050
#64585c
#04f2b6
#94961a
#afef76
#e69af4
#0db72e
#810bb1
#7c90b5
#2d3a14
#9d21ae
#927179
#18d740
#6848d4
#515972
長方形型の配色ジェネレーター 2
#ef1d2d
#cbe858
#0282cb
#a057d7
#4a1dc3
#302f8e
#b13a39
#baa645
#ab1937
#71da45
#25cf65
#be4573
#6b27ff
#c3b06d
#bbaf9e
#52b42c
#2a3a49
#654de6
#50beb9
#a3bb1d
#eab164
#f22114
#2af605
#610652
#c69a00
#e9c872
#012ffd
#f3ec5c
#699a20
#f1b245
#0ec835
#be4e4e
#5e6fe8
#027eb9
#6e2b50
#9c7b12
#6d0cac
#ead5fc
#b5eaff
#73b3b5
類似色の配色ジェネレーター
#8129dc
#826937
#2aa649
#a695b5
#7eebba
#dbee6a
#7656a4
#638b77
#d5fffa
#595480
#2f96a3
#e6b259
#b9e4ac
#eb6e46
#097f3c
#aba91a
#79e621
#0327f0
#0304ea
#d3b08b
#3b289b
#e7446c
#9b8e31
#8cb3b6
#2cfd02
#abdcb5
#f61144
#5d6bfb
#720def
#f1accb
#f49ed2
#e528ca
#49e4c0
#afdf24
#001c44
#d209f8
#4c1c8c
#84c0a1
#334fe8
#b9f6de
#ab9324
#9dd462
#9185d0
#c08bb8
#ca4684
#07600d
#683c69
#d9d9f6
#d88f57
#c3fe57
正方形型の配色ジェネレーター
#d4b412
#4e6f76
#a24f67
#274eec
#022d2e
#63e3d5
#04b537
#a0b7f9
#385480
#a56a58
#2da412
#0d9f07
#6315c7
#dcda0d
#bce23a
#42c3dc
#ca08f0
#f5852e
#0d2522
#4bc193
#262e50
#8a53e5
#5a2dd6
#c36721
#dcf2ba
#0725fa
#97a5e5
#10d9fd
#97bc64
#fdc209
#ac8f8a
#898aa3
#b3cdf0
#7fd049
#5f21e4
#d02c0d
#9f5d14
#14ca0b
#a7146a
#f25c85
正三角形型の配色ジェネレーター
#6a8ea0
#cba663
#d6eaff
#02bf4e
#e5e1f7
#379fbd
#3a0642
#512c06
#27b229
#14f540
#6b5210
#1791d3
#501346
#494648
#f1a643
#f579a7
#b1b6a0
#d25553
#298c29
#f6f440
#ffe907
#90e329
#625d47
#0b75a1
#e16a44
#3b2a28
#6cd657
#b6e92e
#ee0d4d
#de8cee
隣接補色の配色ジェネレーター
#e5839f
#b866ae
#0e0504
#618acd
#e41a02
#3fa1d4
#d5b97e
#513fc9
#ac2277
#c9b31b
#7c3e11
#c7dd09
#a993cb
#a87209
#9d40b7
#6ee1f4
#b750c2
#aa8634
#0dcf83
#07ad6c
#143f0f
#06d593
#9dd933
#b281e2
#d80dbd
#194bf7
#eb1a11
#868e27
#6107e9
#4260c1
#2d76ca
#503844
#72bb00
#437d1b
#a4dad1
#4506b6
#5005cd
#41b65f
#95c87e
#b157d7
#64981c
#837567
#58250d
#8ade59
#5840af
#6ddcf2
#33ab15
#16d50b
#13e1cf
#f94e59
補色の配色ジェネレーター
#b3122b
#934b63
#22c2bd
#1a8d45
#d2a2c8
#e30f74
#6576c1
#9cf81b
#54d99f
#62d151
#93f8a7
#db544b
#782dfe
#47670a
#0d23d8
#350aca
#e842ee
#9fd7b6
#c8a276
#2ea24a
#bb031a
#754740
#6ffa15
#d30a0e
#83a3c7
#9e43f3
#11d6fa
#31215d
#728b56
#fd91e4
#1a5007
#1314fe
#4ddc21
#cd9fc7
#29dbb8
#3ced3d
#032cae
#bc93d0
#9d50ca
#623c59
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff