メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#6ea8a7
#197fa6
#930d33
#d6727a
#0d014a
#5a9949
#1878e9
#ad57fa
#9f40db
#706323
#066ad2
#23c76d
#189264
#d40d1b
#3b12d6
#524fa5
#3fd054
#d53ba7
#1c834d
#e061eb
#efe60f
#e88dac
#87cb7a
#959f7b
#75d2dc
#049e97
#2ce5c0
#4e22ec
#8efebf
#c7abae
#57ae4b
長方形型の配色ジェネレーター 1
#b1ee28
#ac871c
#ecefd7
#a82e22
#570bdc
#643239
#e0396e
#80d1d3
#a57d84
#eb15df
#a471cc
#66e22f
#c9fd71
#39eecb
#6f06a7
#5c08c6
#c32e75
#04eba9
#3aa173
#6e1122
#824914
#0987c3
#97995a
#a7b2e3
#bef05d
#ba3ea0
#5c5085
#f14043
#6bd6d8
#f2a342
#c375bc
#bdd7a7
#417e1c
#e3fac0
#7e2faa
#006e3c
#0be205
#ac235a
#44c734
#6ef4cd
長方形型の配色ジェネレーター 2
#e98a9f
#338e62
#45bac1
#a03748
#748e30
#c4a47a
#417c63
#d62aa6
#82bf04
#e45113
#34b930
#01642d
#4fd6e2
#f1eb2d
#bc2846
#a6b037
#252c46
#f97eba
#2fc44c
#2c6e02
#fc9bd1
#7fdb2d
#283a61
#c5b92b
#e21281
#490111
#5485cd
#bcc0d2
#8ecbaa
#a8d1bc
#575ff6
#7f379a
#9d1fc0
#a08167
#b8a050
#36c6fc
#e1ef68
#427d53
#b6205b
#472396
類似色の配色ジェネレーター
#b38860
#c77cb9
#1673ee
#1b0777
#d3983c
#b38ca6
#be064f
#c43293
#1c9afe
#fe5419
#2130e1
#17e0d7
#297207
#97ceec
#3be869
#d42894
#c1b1f8
#df9364
#35ea34
#a2ab29
#9cfc63
#d19f7f
#892295
#552d32
#e5a481
#35e848
#639a8f
#d04a9d
#052c3a
#08b6cf
#1ed2a1
#c2ce6c
#96193b
#6e839a
#504d04
#7c7d02
#9c77ec
#bfba9a
#fa69d6
#209b4a
#4b5c6e
#ccdeff
#55dbf8
#ae6c0f
#f0100e
#3b277f
#2325a9
#3f8050
#0d9bc4
#6a20e0
正方形型の配色ジェネレーター
#4cf817
#b04e7c
#1b46ae
#6d6ddb
#404175
#264fc1
#b0a99d
#5798b0
#e16956
#7f21f3
#90672b
#fd5bf7
#97f348
#491fb0
#f9a9eb
#f10d87
#f6bc0a
#0ec7c1
#d680a1
#452f88
#ff85c0
#4667e2
#cc4aa7
#88d902
#98cc0d
#5e0e69
#51e4dd
#d9e87c
#3d20f6
#140983
#cf69ce
#1d0880
#2fdff0
#7d71f9
#635dea
#c3b719
#1c147d
#e1aaa8
#534af6
#b1fea1
正三角形型の配色ジェネレーター
#344640
#7a9d37
#e85c26
#119f6b
#fcb46b
#790fa0
#a5be6a
#444f26
#69a6de
#99f59b
#6c9eed
#dbac05
#f91b78
#905c15
#6adbda
#00cf0e
#be7a5d
#66bc1b
#2c19cf
#184a0c
#d0642d
#556604
#0332a2
#971313
#48597e
#e98cc0
#5a185c
#e2a896
#aa2b19
#74847b
隣接補色の配色ジェネレーター
#829192
#07d66e
#7a16af
#c44719
#00e278
#f1355e
#6c6c24
#00842c
#3cc855
#4603ef
#9cd3a0
#09a96d
#336347
#0490b8
#ce0cec
#ecabd1
#780460
#5e5b5f
#c984eb
#6628cd
#3894a4
#0892ea
#88a62a
#3cfa5e
#66ab6e
#9eed3d
#1c95c6
#96cfe8
#ceb12c
#7a3cc6
#0c5e38
#ac0902
#24d599
#64e6c0
#a19dc6
#3a2eba
#a26ed1
#66ad95
#e0e696
#493afb
#17c8f0
#cc6830
#815ab7
#bea505
#9cc409
#00785d
#6eee8c
#7d2539
#b818b3
#7b5f89
補色の配色ジェネレーター
#50607e
#90919c
#b7f980
#59f26a
#459cd2
#f557d0
#814a09
#25a176
#f9310e
#b2307a
#a30a68
#4c552d
#0fe24f
#33f338
#7c2057
#35ba94
#a0ae6e
#9631b3
#989549
#f4cd6d
#55b7e6
#e2b365
#9af320
#3b330b
#1018cb
#6d5328
#74df72
#79d1c5
#d59950
#945aa3
#e9af72
#5c3e72
#a40a9e
#168718
#44acea
#fc5a6e
#bacf0b
#52a64d
#6566e9
#0e1208
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff