メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#2017c1
#9cc5e9
#925eb7
#0b9d7c
#0c5a23
#740fe3
#8a2645
#8bbdf8
#d8bbce
#4ce465
#c114f1
#582809
#9d536a
#8a8679
#6e3f42
#4a82a1
#850108
#a0bfb2
#364630
#50b929
#a56fab
#b18616
#8b119e
#b268fd
#ceb83a
#0b1e33
#e25e8e
#db4ad4
#755658
#60e06c
#6355ce
長方形型の配色ジェネレーター 1
#2ac0b8
#fb150b
#65b4cb
#2d7703
#901777
#dfa237
#b6c8c9
#9f6f5d
#6a94ab
#54d547
#6b36e0
#7a324b
#1a58c6
#76a696
#ca8fe6
#871dff
#6daeba
#f09a72
#8cb26f
#9e5ca2
#03d92b
#333bc4
#095cc5
#d84e74
#650749
#e16fb3
#19aa31
#18d84e
#dd19b9
#c02ce0
#59749c
#713536
#ae8236
#f8b603
#6e9fce
#73a0fa
#6a0eb9
#bf20fd
#00e3cf
#1f1d04
長方形型の配色ジェネレーター 2
#ba1b6f
#99f0bf
#e20025
#8fefe2
#b9b4be
#5d198a
#549a03
#e6932c
#a4e512
#002c71
#73a39d
#91cac9
#d50052
#75e013
#054b33
#44dbb4
#3c791b
#8ffa02
#d7548a
#bf87ca
#ffea2c
#56fd50
#77a7e1
#3dd748
#0fc0a4
#76382a
#4f0da3
#f10fed
#5d99f7
#ec1384
#f5be53
#84c4fe
#2c32b9
#e12539
#ede286
#19ea92
#26f1af
#bfb629
#af96dc
#b189e9
類似色の配色ジェネレーター
#28ecb7
#96732c
#48c44c
#105bb1
#88fb85
#c518f1
#715d3c
#3f687d
#2b463b
#865816
#4e942f
#f31edc
#aefc5b
#503014
#ada90b
#0551be
#a2c2a4
#40d4d2
#fd363b
#768921
#722cc9
#fb1bed
#fab733
#f33a43
#948223
#dfac0f
#ed9616
#f11bb1
#a75aba
#78f9ea
#69a683
#231d0c
#70945b
#0cc3a2
#3ccfd3
#36d159
#08f58e
#7f74ca
#2f0944
#b79621
#95ce95
#49ea31
#2ceed7
#31b0d1
#4a46db
#01ae2c
#ec5deb
#953f07
#db0779
#843b22
正方形型の配色ジェネレーター
#f3f4ce
#ad6dd2
#f6d9ad
#f05b6d
#8a40d4
#bf36ff
#aeda68
#4a9aec
#941aad
#fb2303
#5f5264
#942fd7
#fb690b
#02811d
#a15454
#b405a4
#447dca
#e96eb5
#fb391c
#60ee1d
#70c22f
#a72226
#752c36
#1fa9e9
#e5aafd
#0c7c68
#5578a2
#d0bb2e
#7f355a
#112847
#28690c
#7e0a17
#39b9d8
#78c52b
#cf9402
#708c50
#77f31d
#970693
#be976a
#bf9dd2
正三角形型の配色ジェネレーター
#1be9e9
#e290c4
#45d498
#c7ca90
#bc508f
#55ee5a
#f8f09c
#5aadd8
#bff40f
#8b81ac
#e4f2c1
#2e857f
#268969
#781046
#931553
#976429
#1581de
#86b5d7
#4ffb0e
#f6cf43
#b8f931
#33ef55
#0d3de8
#764a7f
#c87d18
#a3464f
#8b720d
#871bf3
#a59d79
#c72f93
隣接補色の配色ジェネレーター
#87022f
#92b114
#fb2928
#bc2fa3
#00f8a3
#24be47
#67f329
#d28ab3
#b01ad1
#57b7b6
#c338c2
#43ed1b
#54f2f4
#36db97
#1b80dd
#c7d470
#5ebe41
#3bf32f
#a7517e
#a150c6
#b5f3dc
#bb7126
#71a050
#8e38bc
#ed7b3e
#7ce8ff
#d6af90
#5a6254
#c3eef6
#8144c7
#a958da
#1c1dc7
#1cb2df
#00db5b
#98db91
#194ec2
#2b7336
#7adac4
#b45cfc
#8953cf
#d61435
#9a9f8c
#7fa44a
#4eb2d0
#97700f
#27cb21
#447cfe
#077cc5
#dabb7d
#e8788e
補色の配色ジェネレーター
#39cea1
#93ca52
#aa4731
#a3102b
#d52098
#41d5ba
#16d6e2
#6c300c
#812d89
#f64e43
#452ccb
#5e2853
#e499b2
#e0cc2a
#0ff2c6
#47e7a4
#83140a
#070bb7
#831866
#f22561
#79622d
#510906
#a54fae
#405c7c
#4e534f
#db7d90
#72c851
#b902ed
#bf96c3
#78db9b
#23e3a5
#42972c
#4636d3
#31f30b
#c99994
#12de34
#0340f2
#ba2e45
#81e94b
#b041f3
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff