メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#5b7729
#44e7fc
#bd0d9c
#ead5c4
#9d7ecb
#1d749b
#7f39cf
#51bb53
#83a1f1
#57d94e
#3d59bd
#0c30e3
#4fff05
#3325de
#b92fab
#1a5825
#d839d6
#b6fca0
#472653
#858344
#2d3d29
#45f859
#e3cb57
#88625b
#769da4
#9c8e56
#bc1d79
#a82ce1
#e44ea9
#d693bc
#88e346
長方形型の配色ジェネレーター 1
#feefa0
#bb4f01
#e27954
#9f5626
#3e8e25
#c5fc4d
#10c156
#ddb905
#a390cc
#6419b8
#d466ff
#103115
#04c6c6
#3a875f
#f627e1
#34aa47
#eb55c5
#0c6d4f
#5d1b53
#3af883
#8c472c
#a07630
#93045e
#cc01ca
#233cec
#19e2eb
#868f0a
#06ccb6
#7bf66c
#d001e0
#f97202
#70120d
#fff023
#342987
#0079cd
#efa75a
#d4eecd
#97ff81
#001333
#4203ca
長方形型の配色ジェネレーター 2
#1af156
#d0d27e
#653e7a
#ca7fa9
#2212e4
#8a5e81
#c92d94
#f80252
#2598a3
#30b85c
#416b77
#28d968
#3efd39
#57966e
#e78b21
#16afa9
#848605
#69fa08
#764119
#b048b1
#b10c84
#c99dfe
#8eb25d
#f70a7c
#f86897
#bec43c
#6bf018
#01b48b
#638e71
#284575
#9c478d
#e72fe2
#f33d66
#8e6346
#ac8210
#bb6258
#f64afa
#720e4e
#70a904
#57a2ed
類似色の配色ジェネレーター
#3b67ce
#a35725
#ec9e1c
#b8140e
#b3f252
#5dda3a
#7d1881
#d20410
#88456b
#7e63ea
#3b9b75
#ecc341
#b42f59
#8b0b70
#26039d
#696250
#d61f9d
#83d872
#109426
#2dc2fe
#a360a9
#9ef04c
#183d43
#6f9045
#499c95
#9d856a
#2e69d6
#b35274
#283a2b
#4f943d
#783a40
#7e26ed
#9d11f7
#f91ea9
#e4ee99
#6cea74
#e5d141
#855000
#62a2df
#4d2052
#3c5b0a
#0800d3
#09a3d3
#11cfb3
#a6d57f
#cdb336
#0dcb94
#6433f7
#661478
#ca9550
正方形型の配色ジェネレーター
#1ec12f
#64b3ec
#54f7f3
#53a13b
#7be6ba
#6f5f1f
#e35fa1
#bece96
#8375a4
#4f6fc5
#fdc2fc
#71bb58
#16015f
#e242dc
#298f76
#7e76b9
#349486
#531f8e
#4c64b5
#bd7242
#b81d20
#a141f5
#0360f2
#374a59
#9920af
#482cc8
#8e2ded
#1a58e6
#aef918
#9a8895
#31a111
#ac19d3
#1267af
#910e83
#8dc7ae
#fe928c
#e85bd8
#9467d1
#cd6269
#5b6ac9
正三角形型の配色ジェネレーター
#8b9f15
#b1ca84
#4f6155
#92763f
#1ef078
#f9aef7
#982444
#bd53fa
#1135c1
#b58143
#fe5940
#bec191
#1b08af
#17ecb3
#d08d54
#478d67
#8c4b46
#ea8eb5
#2b21fe
#8df4a9
#39d605
#16c201
#949bf4
#0beec9
#1aff65
#4509e5
#ce661e
#7eb19c
#4cec0b
#eab0ef
隣接補色の配色ジェネレーター
#546df4
#52d659
#228b8b
#26ad61
#64ac86
#863924
#8c1da9
#a9112f
#5b01ff
#8831e6
#24586a
#627270
#dbff59
#8b5e97
#c4077a
#ee147b
#fc9489
#2f243b
#93819b
#116922
#fb5773
#138d3a
#23d93a
#7904c6
#8c7a4f
#5580d6
#647953
#359728
#61ce6e
#b4b8de
#0d3042
#be2640
#d69a69
#2d97ee
#d4be29
#36e77d
#39d93f
#a053cf
#111512
#f0e728
#7ae9e9
#0a0ccb
#f4d4e8
#fd74e3
#430d5a
#44a40f
#d56df1
#f4476d
#338b0b
#f4b068
補色の配色ジェネレーター
#d2f874
#cbb92c
#e3326d
#9311ed
#f67899
#b2a223
#c071f9
#7e9a72
#c131c2
#026b55
#85a2a9
#f349d9
#181cf0
#9942c2
#edb117
#34fa85
#15c9d8
#a71671
#ae3b96
#4c4b9a
#432ad8
#57703d
#ebcee8
#5b5bc8
#f147e3
#ddb361
#cb6182
#d5c0ca
#5ad50c
#8bd7e2
#fbc779
#2954d4
#096d5c
#84cf64
#00d777
#9534a4
#eefb08
#be820b
#429b68
#cedde7
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff