メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#357463
#dcd611
#a53365
#510dbe
#b8e512
#e619e2
#9844d1
#e808cb
#93eab7
#97c9a8
#ca32f0
#94d18f
#51413b
#10b147
#fdf894
#b63e7b
#5ed913
#e53f1b
#403305
#c2f6f3
#685d25
#2a9e64
#646f82
#23763c
#8034dc
#aea586
#a5749f
#6c605a
#d1297e
#5cccad
#c8b046
長方形型の配色ジェネレーター 1
#9dceb4
#5fc1f4
#5278e0
#6c5927
#50438d
#a9d897
#6932ad
#d75cbb
#ab50af
#5922c1
#731ee5
#982154
#c5eed6
#6a9a28
#308318
#fdb5c4
#9a48b1
#0d3440
#3b86d0
#647e8e
#0f9587
#7e5433
#14fdad
#f60ac4
#21cce0
#862829
#e115e9
#c9b8ea
#d1bdbe
#21eaed
#b089e8
#db769b
#0da938
#e20f27
#d1aada
#856bb0
#04298e
#86e9bc
#2f8587
#ab0c36
長方形型の配色ジェネレーター 2
#7e2c11
#3bc515
#4bc1de
#8e1a73
#b25565
#3e9f44
#a4f0d8
#fad4b3
#198cfa
#d6715d
#1603ba
#9e20bd
#cae5d1
#c2fe7f
#d7e2e1
#99410d
#c9e7da
#240d51
#aac988
#d0be44
#0e9e89
#8ad6f1
#5d6f4d
#b9f160
#480669
#1ba2aa
#735f4f
#2241b5
#e8bccf
#7735df
#4d6834
#4ef3b7
#c071f7
#783405
#9e0f72
#02940a
#9bcf1f
#90029c
#83a5a8
#2fdc6f
類似色の配色ジェネレーター
#558781
#e5817b
#b140e5
#0fa677
#b7642a
#f627e8
#2abd1d
#ba5a24
#1e8819
#d41b45
#3d323d
#7b84da
#3c2b28
#a9dc5a
#405296
#aa2737
#88df9c
#aa7471
#f51b87
#980ece
#2d5f73
#43dbde
#de6dac
#007ad7
#ae1bb8
#4ce7a4
#07c0f3
#80993c
#8f997b
#08a442
#587c5e
#f55baa
#464d42
#82dff1
#c6c050
#dffa87
#fe5efe
#cd06cf
#a5edb4
#1775f5
#5bcddf
#9397bd
#8b2354
#5fc341
#130c9b
#fba0fa
#278e32
#f15763
#caa3f8
#911fb3
正方形型の配色ジェネレーター
#4d00ba
#63a579
#d0f2af
#ab0e1e
#90101b
#c53254
#e2ff00
#2c9fca
#933629
#524c8e
#2bbf83
#1ce449
#9b6982
#328aba
#3b860f
#9b0457
#3784ef
#d3279b
#8690cc
#2dce19
#4bf22c
#e36e8d
#dd72c2
#058932
#fa9b8f
#16e870
#bb4678
#3753a7
#976b45
#b11bcd
#79b277
#3dd4ec
#0ad617
#76b914
#d2f0cd
#a42486
#c95ae2
#0a360d
#4387d1
#f19615
正三角形型の配色ジェネレーター
#6fbf4d
#7469e9
#1973d7
#fff4cb
#636551
#c6ed98
#62668d
#65d48a
#c39ca9
#6c1a48
#9fba29
#9c3f31
#ef8e3f
#01ba21
#aa03ad
#d668e2
#c38f20
#161dc2
#9110e7
#fb7e3d
#0b8ba6
#fd8b00
#6cd3eb
#f24bdb
#0612be
#4e1fe6
#f9872a
#14ae81
#ef9495
#9c8f09
隣接補色の配色ジェネレーター
#ca727e
#91afe3
#96e70e
#72c89a
#bc6aa9
#292be5
#d655be
#6cf5e4
#d0aa36
#af16ad
#4eaa5b
#176301
#833bbc
#573c04
#f6f5db
#db4d07
#231adf
#e0d4d0
#7bb1b2
#af48f7
#5eb2a6
#4bd79b
#3553e0
#ac5a2d
#a2b4f5
#0cb583
#d8e7c6
#511517
#acb03a
#768501
#47e8fc
#7a956f
#bb85b0
#d3b05b
#debc90
#addd54
#9733c1
#ea55b7
#d5f86d
#95a4df
#948d58
#3fe323
#316fd3
#def824
#29b041
#a75905
#fbf723
#4c7bba
#5a99e9
#9341c2
補色の配色ジェネレーター
#4f4061
#bb0e33
#8b5b05
#6015a3
#b75532
#5cff28
#44600d
#b1ae2b
#a84a38
#f97ab3
#664d81
#eedc78
#f61312
#fe528e
#bb4c63
#856a63
#f91d68
#893c2c
#e49479
#970666
#69ccb7
#bd2d6f
#49c712
#e91698
#1857d6
#26f7ed
#f58688
#de6f28
#c9246d
#2bdcd9
#8ce3b1
#16ad43
#66cbbe
#6bd1fd
#befbea
#43bf3b
#ddb78f
#39d268
#6cb780
#572f5e
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff