メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#69f341
#ee436b
#ce6978
#652c75
#a64b59
#3b6976
#582a43
#3539ea
#ee4908
#7e2a19
#3a48fc
#0cc784
#aa17f9
#10b95e
#56772a
#785535
#20fd3c
#3be1d8
#e8c2c5
#cd3766
#c658d4
#a5aa8d
#e450af
#280473
#ce48a8
#b0790b
#f6eaed
#7ffe13
#2c9d5b
#a4d6b5
#d3974a
長方形型の配色ジェネレーター 1
#4f9f50
#42c6f3
#4cec95
#e6826c
#99ddf8
#c56854
#f03924
#d8d683
#c338a5
#559de9
#0437dc
#c0d3fe
#ab98c9
#0df50d
#13ea93
#a4f60f
#34a256
#ccd70f
#40b0dd
#2f53df
#4d80f0
#5f03d5
#c2da04
#5c0aad
#43dcc6
#31e589
#2c2251
#518c55
#679f80
#d847cc
#1a14ad
#df70da
#96d3d5
#319254
#fe55e0
#bf210b
#7e70c2
#455003
#a76ef2
#3c9b52
長方形型の配色ジェネレーター 2
#de8b71
#0fc8c9
#0a0069
#73f33c
#ea7949
#5205e9
#38a078
#953f64
#921db6
#8cfd75
#8c4253
#5bb0ae
#a7359f
#4e1b0c
#48253a
#00c916
#122ca0
#d82940
#d72df2
#d15779
#b4267a
#900024
#7575ba
#3a4114
#d9a94c
#cd92e2
#4c05fd
#ae78a6
#d8fb87
#413f71
#d6683e
#690e74
#5b12c3
#cfe0ab
#be2612
#754395
#fc1ec1
#ff5470
#17cd19
#f63e49
類似色の配色ジェネレーター
#2b8e63
#fe2c99
#43c74a
#b7a43e
#21225a
#455ad2
#53980b
#2b3b07
#277bc9
#6714bc
#2e12df
#1cfe33
#92d332
#042ecf
#3b28ac
#4a1db1
#4e6653
#1e01f2
#de34dd
#4f4e82
#b2f1e2
#27d8c2
#b483e6
#eb02e1
#2e7634
#c51ee9
#7160ea
#a7be5c
#67d454
#0a5e19
#519088
#ad0d94
#d9c30f
#33b977
#c9fb19
#a9f08e
#2671eb
#fd5193
#18a8db
#b501d3
#8a2a2a
#5e083f
#5056d0
#3c93cf
#259c39
#24bccf
#ee1354
#06a123
#4a8a31
#888eab
正方形型の配色ジェネレーター
#e1bdb8
#1503da
#5d664d
#d73d2b
#8e344f
#8132c5
#368682
#1e992f
#c8b0c9
#fb0356
#93fc87
#986dee
#708ad8
#2ae1cd
#243410
#388be1
#459558
#60d892
#df6f01
#8bf9ce
#1bca8f
#81db00
#d551d4
#fbfd5f
#23403d
#4b570f
#b23089
#f0edb9
#6ba48b
#bd548b
#1feecc
#84d807
#0f110a
#ac9fdc
#be4c2a
#ce26f5
#091160
#43e981
#d89f8c
#f3fb7c
正三角形型の配色ジェネレーター
#f08f4d
#23a2bf
#b99343
#79f68f
#de2e24
#1ff332
#aaa55f
#95187c
#48bbe5
#89aa31
#53462e
#105418
#9efe90
#e5ca48
#74a8f8
#cac107
#b58867
#d67c25
#79f97c
#3c39b6
#98a62a
#5319c1
#32eab0
#94e6d8
#122692
#aad9a8
#66b9bd
#f20380
#d8ea84
#e9ada9
隣接補色の配色ジェネレーター
#fa0a58
#134226
#5121d5
#406746
#c0afd5
#d9ec2e
#681086
#eb67b3
#07c89c
#5a5ac2
#1974e0
#954848
#92c7e9
#330118
#bf66cc
#68439a
#7963ef
#4f2d76
#640d4e
#68f6bc
#bb1cd3
#e82782
#df0f11
#82954f
#c9730e
#02a7bf
#d36f52
#072255
#f22a2f
#6a0d3c
#65d8ad
#a8eb04
#d15f10
#3373d5
#436b85
#eca00c
#8606f0
#a21e93
#d63e21
#483cf7
#acdf08
#31cf00
#1b18b0
#09b4a5
#6c2a8c
#fbdb8a
#c3d7b5
#645516
#881733
#5e643c
補色の配色ジェネレーター
#3f83b9
#c443f0
#5a7eb0
#13266e
#fcd521
#979876
#133db9
#e26534
#21c793
#e3aeec
#2ebf8b
#0f65b0
#e3504d
#369c90
#10e700
#0c5b86
#477f46
#3f6aaa
#096ca9
#149318
#128b1a
#b73256
#365b89
#f26c58
#d8c3fd
#609a0d
#27cc56
#7c923f
#1c6a42
#05d115
#5f9963
#980842
#332933
#463452
#b6c39b
#bc685f
#a3bf43
#278b28
#eae32a
#da4184
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff