メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#b8a259
#c13dd3
#18a693
#1579bc
#25e1c6
#bb6118
#12a83e
#35a02c
#193df0
#0a3149
#c74d9b
#931336
#08b0c0
#3633ae
#d06071
#e6260a
#aff185
#c2581e
#a34af8
#d1f452
#a3b683
#03dedc
#3e1253
#8e0faa
#5097e1
#3ebab7
#3f24c5
#192909
#c84482
#209653
#48305a
長方形型の配色ジェネレーター 1
#b4deba
#e1aead
#818ff8
#0e4df9
#b23dc8
#74df84
#992f60
#be1810
#461011
#6e7db3
#3c4d45
#d0034f
#11fe44
#3b04d6
#e5dcbe
#33c328
#ce1f95
#937079
#2d029d
#efeb04
#6c06e6
#0df6c6
#4ee76d
#409863
#b2f7a7
#5a9c24
#ce74b7
#a4015e
#a2eac0
#b62a75
#17f6a4
#91863c
#73ae29
#a3abaf
#0ea73d
#369c09
#3cf01c
#3e30f5
#6eb8c8
#1fd170
長方形型の配色ジェネレーター 2
#d5b107
#9fac75
#c3c90d
#3a8e3f
#43a58e
#af35b4
#21ff7d
#e1414f
#c7c45f
#be7502
#e3b48d
#5eb7c5
#bad19f
#5c6c3f
#f6a0bd
#7193dd
#ad742c
#a8a03d
#167612
#3588b5
#a97f05
#ce074f
#07af0c
#8863c8
#b7db89
#8656e0
#188a54
#8c4416
#86276c
#159325
#ffdaae
#89ea24
#eae383
#e06139
#85c6ef
#dd0b4a
#353ed1
#f6cd3d
#220df8
#244606
類似色の配色ジェネレーター
#705b76
#de3b47
#121efe
#fdfc47
#afa164
#d95347
#0796a8
#b633e1
#e48cfe
#81251b
#e9b5b9
#6eeca1
#d4a606
#e8c37d
#b26e57
#2f5eb7
#5a2d7b
#c16992
#edf12e
#8e8b64
#e1d751
#222838
#1273f0
#35b523
#edcf1e
#205559
#c97f01
#8ef3c2
#88952e
#4ec8e7
#64a840
#9e6c23
#e3338b
#569847
#617d47
#38fa89
#a020ff
#15ba4a
#e3bf92
#b499bf
#712209
#440b00
#fe3964
#6cc06f
#00d658
#5ec7ff
#199a5a
#5a917b
#92a342
#2b12ec
正方形型の配色ジェネレーター
#a23703
#d5532f
#2b9246
#3a9163
#c176f3
#ce6c9a
#6ec496
#8f1e81
#6a711b
#74676f
#fe8b2a
#64f3bf
#92ee6b
#bd682e
#2a44f6
#c2f3d3
#7f0700
#82757f
#df1b1f
#401bc7
#7e0e60
#5d02fe
#40cd5d
#50cb82
#0fc78c
#9ec2e0
#6e3ef1
#d7d86b
#d921eb
#740535
#d596c7
#eb71eb
#144c4f
#7222a2
#13cbad
#1608ef
#c0fb9e
#98dbe8
#c59fca
#84e8b0
正三角形型の配色ジェネレーター
#0b96d8
#b6768a
#6a9cb0
#d24061
#74d290
#6df265
#a7d3b0
#7c4291
#c36206
#0c3b10
#de3c56
#cff853
#c7047b
#4ff358
#51c52b
#91b38c
#43996f
#26a829
#98c92f
#0fece9
#d44ee4
#bd1bbd
#e9de96
#750f5d
#56a8d1
#9e30e0
#3619ca
#127c3c
#13515c
#b809a1
隣接補色の配色ジェネレーター
#0a29c1
#50303d
#cb959a
#286bc3
#8f610d
#ca2303
#766acd
#8bb0b8
#f91157
#a3fff9
#7b147c
#0bae19
#58d51b
#067095
#ca43d1
#a15ebb
#87bdcc
#2c1d5d
#4d0d10
#63e3f2
#391acf
#110c37
#b39824
#8cf99d
#b7efdd
#4257e7
#f83d8b
#356eff
#7877c6
#0fa5ba
#af111f
#0ee18f
#e57aa2
#687bce
#f9f084
#5a163b
#640cf2
#7eeb69
#3e4342
#8e20ce
#d1bf2d
#342859
#4ff6c6
#0b5068
#079bc8
#c3df49
#fd20d5
#78d34a
#99cbba
#d5aa86
補色の配色ジェネレーター
#d35735
#2c7358
#ee97f6
#6225a5
#b3738f
#0bf016
#520073
#d815fe
#ae66c6
#7e9208
#3387ac
#df26f0
#962f59
#3edead
#bc5bbc
#861660
#4d3a7f
#97138b
#42f474
#bb1ef0
#d4b014
#f281ff
#50d018
#9432d3
#53a58d
#c94cc2
#5d6e9c
#32733f
#3e347b
#0ea35a
#994594
#4e7dee
#983569
#32a6ec
#12652b
#aaeb19
#44280b
#ebe71a
#b528ce
#8cebef
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff