メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#b26054
#5507d0
#26c765
#b7140e
#0bef34
#ddc5cf
#fdce44
#7df809
#a07658
#45c00f
#b0de06
#d0447b
#377f3b
#8afc29
#e94282
#9b0d63
#fdb9bd
#5b9f42
#27f900
#4f6c3d
#05cdb1
#7423ef
#82bab4
#c2fd75
#7dcdcd
#570c4d
#bcdaee
#3659d0
#8bfc86
#c83751
#ac2dcd
長方形型の配色ジェネレーター 1
#11b469
#e788b1
#42ec93
#5c4347
#2f2c1d
#85f102
#e9221e
#a68dda
#39e999
#a91ab4
#d0b3fa
#6bcb47
#9f115c
#5e18f2
#c07d8f
#65790e
#4c2369
#0667da
#4fc100
#bc85a9
#63d874
#de3724
#5e4926
#800aa8
#b926bc
#f78dc9
#3776dc
#7aeb35
#2e16f9
#c4d139
#9e3299
#34f5a4
#9bb3f2
#d2cffc
#f7c7b7
#8ade14
#1fe5b4
#9418c3
#d03ecd
#d35340
長方形型の配色ジェネレーター 2
#2fb379
#4a644e
#c820f0
#0dce04
#9675b8
#f069b0
#69e5e4
#dccf4a
#3f33ee
#1bd9cb
#78eb6e
#c84747
#cb0010
#cdb80e
#94f45c
#611c47
#37dbcb
#0c13da
#e01205
#bb7677
#45d1f0
#7c8714
#09c337
#65d964
#8db0ad
#7013b5
#553fec
#8e6b1e
#f47786
#604384
#029939
#a95438
#0a5620
#900a2b
#d6c941
#52231b
#12474d
#ba1b5a
#3e4736
#b1d055
類似色の配色ジェネレーター
#aa25ff
#a76bb9
#dc6f9e
#c2a8e5
#f8cff7
#7cacc6
#f8516e
#e63eaf
#b2c468
#2200f1
#9174bb
#66ce90
#5beae4
#8e2682
#7537f9
#608ec9
#c1113a
#fb2d2f
#2bad25
#d74fa9
#6b752d
#37b367
#41b042
#4503bb
#a69926
#d1e5a3
#598502
#0563e0
#d2f13d
#c24b65
#8be195
#ad3706
#10e84f
#5912a1
#4d28e5
#900c84
#9592f4
#6a43ba
#0df6bf
#a0b331
#1f607e
#49554e
#bf44b4
#16a6cb
#537868
#e43884
#d996b2
#285041
#3e74dc
#de6b93
正方形型の配色ジェネレーター
#600a99
#fe8cf0
#9b1125
#a729a2
#f4164b
#44bbf6
#d96d48
#37ac63
#91740a
#50d019
#87f60c
#10e4dc
#1b7516
#73d7e6
#b61335
#a85656
#f1eedd
#2c5516
#16b3b7
#431767
#3c7733
#7bd755
#17ea1c
#21aa89
#32e86a
#c7dde9
#434974
#48a0b1
#1a6e39
#6646ef
#1ad57b
#660dda
#f2e8c3
#26ca1f
#3e5ecf
#ac007f
#69833c
#f06849
#0f4e66
#a1aa6b
正三角形型の配色ジェネレーター
#d72ff6
#729800
#c371a4
#28fa60
#2493d2
#398b31
#048aa9
#5a4b7b
#ed0762
#627084
#e07ed0
#8cc863
#37f434
#234ed3
#173775
#656d8b
#6f391c
#39481e
#4de764
#297730
#b2a869
#aaf4ab
#8da9a4
#b8bcd5
#685f63
#aa5e5a
#cb946e
#7a455d
#8fe681
#7e2f47
隣接補色の配色ジェネレーター
#44a587
#767c10
#4efe26
#632646
#d69b53
#b82022
#d2f3e5
#3116d9
#72204a
#8c8d8c
#a49896
#10e1a9
#70e4b8
#269756
#1fafb1
#c62d9b
#4d9ce0
#9a1894
#d534cb
#777913
#a297f7
#d2e2be
#325c20
#ac9e01
#c00686
#950526
#10ff7c
#965ab5
#d34d2c
#57d2ab
#99790a
#f41cb9
#d72ad4
#d5c7f9
#9e01bf
#e76a0b
#1747cb
#fac5e9
#dcc171
#391883
#5b355b
#c538d5
#2c1ade
#7b4a55
#133bc8
#1efefb
#cc9e1b
#b721cf
#8eced9
#656d36
補色の配色ジェネレーター
#09b03f
#158de6
#275f50
#9df2ad
#0d9f41
#02b42e
#d4c1f6
#53d146
#b3c556
#72943b
#28cb15
#0c69f2
#13cf4b
#26cb9b
#b04798
#aff924
#206da8
#9020e6
#0e6b20
#559110
#a9f09a
#45ef89
#575cc0
#87e477
#4ecae3
#28f54b
#9d023e
#5e4e21
#d0f868
#699dc4
#d8c3fd
#07ae56
#1c0901
#92f726
#4c01f8
#9478e1
#3c58b3
#de3f27
#a9946c
#afe380
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff