メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#84fb42
#59fd0c
#66bdd5
#1e9e0c
#ee843d
#14e5be
#8269bb
#2e07ff
#5efdff
#918c79
#f82a3f
#61db09
#1a1734
#52ec44
#d06be7
#c63619
#97c7e9
#3006b5
#3ea7ad
#2afc99
#f45324
#a989d2
#591d73
#e143e5
#d7e9cb
#9ff226
#27623c
#7dbcb4
#f89f81
#445017
#a7f6d3
長方形型の配色ジェネレーター 1
#204110
#7b574c
#eac3ae
#ef32e1
#0815c6
#bc5711
#ad3264
#c61b93
#ebf873
#fb8e38
#32eeb3
#a57c59
#830186
#2c8d20
#1f4171
#b40b65
#69f3f2
#b3f014
#894133
#a4cae0
#7e0a5b
#34d9fd
#e36441
#407309
#6cebf0
#164804
#14fde4
#c8c0bb
#877159
#0ac8ca
#73a007
#b246fc
#6c844d
#6ab705
#426672
#d01997
#58eac8
#72c097
#61c12b
#9791f9
長方形型の配色ジェネレーター 2
#6a78f7
#a38070
#afa7b9
#a8ceaf
#ef333e
#5482d4
#06774e
#0da152
#8d9c0a
#a270d2
#dc5a20
#5ba5c7
#38ff42
#de990d
#ce366e
#02790a
#254782
#8ad913
#3407fd
#ebb4f8
#58078b
#494bfa
#916f0d
#42b9cd
#ba247c
#6057ec
#e86c06
#c5a54a
#4533c6
#02fddd
#c5ef6e
#a262b3
#cb6a01
#3febab
#3459d9
#49be20
#0725ee
#b10232
#7f7fe8
#3218cf
類似色の配色ジェネレーター
#d9f56f
#f6064e
#0c8290
#93036e
#90a835
#f94cab
#260c38
#3dde93
#6cde63
#919de7
#f78763
#dcf0ca
#cabf7a
#7a917d
#7febf6
#c56503
#cd683b
#d97353
#c30c5e
#d09b3f
#446459
#b1b106
#2f1c0f
#3960b8
#52732a
#360940
#0fbd29
#9143fe
#8024b9
#cc88b3
#087b4e
#8c8cb1
#35ced3
#b80584
#3a75d7
#97a5d6
#de2ffe
#938343
#bc5c00
#1244f7
#18107c
#5ff6c2
#fd01cb
#4a877e
#af8fba
#a48256
#1ffc97
#37e30c
#89ced1
#b1b864
正方形型の配色ジェネレーター
#3d22b2
#ca5caf
#158efc
#32fb47
#07b96f
#e14635
#2b652f
#eaeede
#e4d181
#950011
#ee9224
#626160
#0a0997
#143182
#36a08c
#e95646
#4aeb8d
#7dcff2
#37e14c
#193757
#b398ab
#a969bc
#8ff7de
#eadd3a
#a7bdb1
#f5b7d5
#fa2742
#dc6218
#ad0fc5
#edbd0c
#cf3224
#d6c619
#4d1f7c
#c5f0c9
#0ca711
#db96ea
#135f78
#785e89
#099bf2
#ac4883
正三角形型の配色ジェネレーター
#de107c
#2f8292
#b96a18
#d8fed9
#cb9cda
#ff3f7f
#8a2e93
#086d39
#8e0992
#d8cfaa
#92e8b1
#ff6978
#ebc3a4
#9d509c
#0e4aba
#721e3a
#847452
#11b604
#99ef6d
#0ba8ec
#69ef5d
#d1d4da
#8fe8c0
#40a541
#dcfa7b
#be0ead
#28c2dc
#66f14c
#23dd95
#7b3048
隣接補色の配色ジェネレーター
#206076
#7e1286
#619f7c
#a59631
#f6c3e2
#f15550
#f8cb35
#32dc99
#d92a88
#1c45d7
#07d606
#ff87d8
#ee16a4
#44ba50
#1ffed8
#bb6d85
#723d69
#309401
#6e03b1
#cf75b3
#7b0dfc
#29dd90
#1e923b
#a4cf01
#9fe7d6
#af4280
#1324b4
#102772
#735d86
#d244e0
#bf4cb5
#e6273c
#f44ae6
#4d538d
#c681a4
#b88a0f
#b15435
#2b348d
#37a0c8
#f00675
#a2d5ac
#c45c6d
#d9a94d
#5dfa4e
#05a17f
#47049a
#351eba
#a4ce9a
#2e6465
#b16020
補色の配色ジェネレーター
#f32094
#9673ff
#306711
#6b6f54
#e6ee44
#b87cc0
#bce539
#ace84e
#fc7a6d
#447020
#28991a
#ccb32d
#37214d
#343e60
#85a48e
#07d695
#8ac9dd
#a57bc4
#16ef26
#5ea1ea
#4ff1b8
#3d7c6b
#91a2e5
#cda81d
#4ca012
#53d1cd
#0fe781
#6df727
#393c3e
#cb4631
#cf964d
#4a257e
#7d0886
#6a8178
#c69f34
#e5901e
#d2ca5e
#a8460a
#4f7962
#55b8f5
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff