メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#71c5d0
#de22b0
#675644
#6278ea
#d9625e
#ce5967
#fcd1de
#db0a82
#dd14f5
#78aa65
#8d2956
#f05b6f
#e5a03d
#2194b4
#1dfd33
#35aea3
#4d5046
#75ddea
#ff3a6c
#d04b87
#63fc16
#e4380a
#36d4e6
#d8eb77
#2aa890
#9763a2
#8355a3
#02232a
#e97d5a
#eaf518
#95716f
長方形型の配色ジェネレーター 1
#03f0aa
#e4b17a
#01d073
#a2f3f0
#93fcc5
#b91ed2
#6cdf2c
#b99656
#61a915
#dc88ce
#36b7c0
#ae1810
#82f20c
#8193c9
#d62702
#4e6350
#7dbe9c
#a93011
#6a0787
#b3ee3f
#06ad69
#84148e
#a4d399
#81251c
#3509a2
#cc1269
#2a2281
#38b8c2
#398fef
#5fcc43
#0c0a27
#2b7037
#2d4e07
#f0f0d2
#0e6a56
#17d347
#c56de7
#d6c1f8
#5ab713
#21ef5d
長方形型の配色ジェネレーター 2
#3a67b9
#41aea5
#242be5
#4fd706
#7b23e4
#e2571d
#2aa9ff
#fc8fdd
#7948d4
#2bb870
#1e1f95
#6e29c6
#818670
#56b53e
#2d76e6
#d7f5bd
#d36b55
#31ff19
#deefb9
#ee819f
#166e41
#25c513
#04ae4d
#e361a8
#8f9856
#0bc159
#d3770a
#2a279a
#b2e305
#0b88df
#f33e77
#0972b6
#8f26e3
#5d9d80
#b5a926
#620317
#c1a6b5
#0ef41c
#5e0fb8
#a56dfa
類似色の配色ジェネレーター
#d91459
#cfa58b
#bd5724
#05b80e
#fda383
#cb9a7c
#022dd0
#01f5e6
#1e9855
#206f8c
#f8423f
#996211
#fbfe51
#e9d037
#7f1056
#515b7e
#f71636
#1a5c61
#7f2e83
#82b62e
#5bcfb7
#8415a7
#53d437
#eaf35b
#ab8e2c
#fd8eb6
#81e796
#959596
#93c59f
#79e83c
#b6783f
#dc187d
#8befdd
#064c61
#b0698b
#6f5b16
#5c2f6c
#d952b5
#bc6eb8
#46c6ea
#f2f08e
#34c407
#5b9fc7
#8f6d65
#4236b0
#99d6af
#241617
#9af828
#4f46eb
#607111
正方形型の配色ジェネレーター
#c46bf6
#a2e03e
#07467a
#dc8988
#aeeab7
#732b78
#c36e52
#ee97f3
#73e70d
#a82e48
#0de32a
#c67e8a
#6483a7
#bfc3ee
#2f53b6
#3894c3
#240e62
#6755d2
#3b74da
#d3d868
#46ac83
#f8264f
#c18e10
#cbf620
#b44ecd
#39e25d
#64c658
#331c11
#f72e66
#3bc0c8
#80045e
#339e66
#e19fe0
#45acf8
#913aaf
#519ecb
#9019e0
#a8666c
#922334
#e66539
正三角形型の配色ジェネレーター
#fe2129
#1c5d69
#1efb3e
#4329a2
#77a40a
#aea88a
#7903de
#4cf356
#b06b86
#28f629
#18a05f
#182c29
#48e89c
#d817cf
#cc270c
#8dd2c0
#d7088e
#73f52b
#db16a3
#871885
#03231d
#469736
#83a51a
#f3ed2e
#08c1ff
#0dd37c
#80c29a
#86c2cd
#91311d
#2f2acc
隣接補色の配色ジェネレーター
#52f5d9
#50f2db
#cebb48
#deeda8
#652528
#98ddba
#636f85
#b5ec44
#19b1f2
#b26394
#a1871a
#b31ef7
#7a8272
#8ceea1
#4644f1
#dc0f58
#f9efdb
#1d3426
#e6ab0d
#16997a
#194d52
#7552c9
#d7eb1b
#a41ffc
#361e50
#c94a0d
#a84358
#00c4e1
#675964
#613002
#00495d
#2be45f
#927e68
#834782
#84b890
#592e26
#73159b
#2f6a96
#95f238
#3e8cc0
#989f36
#7061cb
#60b981
#19d20d
#a5516d
#77fa8c
#eb95f2
#cd1b0d
#c57cf7
#6d3be5
補色の配色ジェネレーター
#b9eb11
#314c66
#3a4e87
#1a3a2d
#597c44
#ce2c5b
#5d25d3
#a5ff7b
#150031
#4eb630
#092118
#7807ee
#f6d715
#418e23
#590630
#d32e2a
#e62be9
#703c7c
#fea0ac
#c6d593
#9f0048
#774957
#a83e8f
#bbe51a
#7f1f67
#64ba2d
#576b8f
#28feb8
#0ef497
#450d44
#c3a4ff
#3b8ce3
#020622
#6fde80
#d2beca
#730097
#5f9d7e
#882445
#69541c
#0e2fc2
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff