メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#8ff155
#3a9bd6
#bf89bf
#3a45c9
#a36d9d
#b1b586
#c3042e
#2dae10
#3af450
#7ae9a5
#907515
#b76bab
#f34b47
#1d32ac
#a2abad
#81c27c
#09c4c3
#be189f
#a4fe9c
#d219db
#6d70f7
#38c6f5
#27b677
#fd5a17
#2af0fa
#3c9eaa
#c64bef
#6045d4
#859b9f
#bd6b93
#0fae81
長方形型の配色ジェネレーター 1
#4bf80d
#329a1d
#cc5028
#02df85
#9e157f
#6eab86
#37eb53
#3678d7
#6bcab6
#9a9b76
#b86fff
#377599
#1c9e13
#ce6979
#999e71
#7606ac
#10af78
#5ce40b
#b50bac
#4da3e8
#db7579
#9a5346
#93236c
#a3263e
#c2a235
#bdfc81
#e51568
#f7c638
#7ed844
#59098e
#75a6fa
#1d9d8b
#c37a4d
#62f353
#a6ee5b
#5901b5
#4a663d
#1d38e2
#978d02
#44f8cf
長方形型の配色ジェネレーター 2
#a2172e
#3b295b
#df52e4
#576919
#c6b777
#901832
#418ca5
#26b6da
#435e74
#9bb8a7
#c6dae9
#4d8ba9
#be4bfc
#4ad68a
#f99161
#e5bd30
#13ad9b
#276f9d
#d28040
#6ff8fe
#8c9802
#8f9223
#98f337
#ae3dfe
#05a13f
#c39a77
#2bdd1f
#8283a1
#902eb6
#2bb2be
#fbd7ed
#8479db
#fd53ec
#e71503
#5214a4
#684c73
#ef4d93
#eec157
#3fcf56
#e00759
類似色の配色ジェネレーター
#49767c
#065ec0
#e89768
#b0e0ea
#c44a4a
#aa171e
#77fcb2
#d08a6b
#d5e40f
#bcab3f
#6d3625
#83f61a
#35a53d
#1efdcc
#755f18
#5c0596
#d59383
#9728dc
#8b3467
#348a8f
#f3c284
#9a1b3c
#c20af4
#e22ef1
#bc0888
#14f7c7
#054d53
#5378fb
#148b89
#3c425d
#366694
#9372fd
#80a644
#838b54
#bcdc7f
#50c5ab
#4b7b2f
#1a036c
#9fbbc1
#758f40
#50857c
#dc6fa7
#309ccd
#9a30d7
#0ad688
#6c958a
#c7b070
#02eec1
#05b05b
#aeadaa
正方形型の配色ジェネレーター
#e9af6a
#acd7b9
#311423
#07f393
#cc787c
#2d323f
#f4e5c1
#6b4752
#b1dcca
#beee77
#83b3df
#2b464f
#21d274
#6e8e4f
#e54620
#218633
#1a41c5
#7ddce1
#5f0958
#89f5f5
#c32174
#a0e937
#4f8bf1
#d5166d
#cddab2
#dc47f8
#b0badb
#1cfcf1
#173616
#84e2a2
#54b1b2
#1d27dd
#679ea3
#12d24c
#88f6f3
#e5560b
#c6986d
#3e2f25
#362777
#a90fa5
正三角形型の配色ジェネレーター
#081ca5
#c59d22
#4ca27f
#499fce
#4d650f
#8df18d
#7bfa0b
#9c2404
#b2cd19
#b7d472
#d90159
#224f4c
#620f34
#3efc09
#5f8da1
#6fcc7b
#8f8913
#95cfb0
#b79b92
#d90c2b
#6299e5
#0b2311
#83ce12
#300042
#88d9d2
#259169
#d7613a
#391003
#da1a31
#3c0c36
隣接補色の配色ジェネレーター
#7df6af
#73ad14
#641245
#9cafaa
#1e4eb5
#afa30b
#d89481
#6d22a9
#3453a4
#67c03f
#5c649c
#f1ef3a
#8d13a7
#c5101a
#4786f0
#1f9ba3
#a29ee3
#a0cc0e
#7e65f1
#c01ba9
#9c7e6c
#87a9f5
#9db2bb
#44b49a
#25daab
#2c837f
#7db1fa
#b6e628
#f2ae1f
#7bbbed
#54f6b9
#7d953b
#0bcb92
#898649
#82a0cc
#a5d532
#8c4d33
#647fcd
#4d4ceb
#937f46
#c4742b
#c13733
#7a40b3
#e48f09
#fc569e
#e37319
#d83d19
#96362a
#be3433
#dc96bb
補色の配色ジェネレーター
#c70614
#3b08fe
#73278c
#7ca59e
#80567b
#21c87a
#a76d52
#525c0a
#cce363
#736590
#d3dfaf
#07db4e
#c08278
#882530
#8acf6e
#d9c63f
#b7bb25
#6e8b51
#3d520f
#f79b6f
#c74273
#fe26be
#fdae87
#42e000
#075e08
#ebbea2
#12087b
#28871b
#122aa5
#76fdf2
#62042e
#922f66
#e08705
#32c841
#b91b7b
#1c910d
#262c0d
#8c26a6
#0ffe7e
#a30c2f
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff