メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#4b8494
#03ccdc
#9ae419
#2f1c1b
#fa8157
#3e5686
#a2e195
#833886
#824cf9
#52d803
#65f11e
#4d604a
#a30094
#9e3e0c
#1c872a
#6eb387
#d735a7
#60e6e6
#5cb3a3
#8cf9d7
#9077a7
#bff846
#0bcc5b
#1b3fc6
#4256e9
#323169
#55eb45
#ea703c
#cecd81
#e26064
#3b751c
長方形型の配色ジェネレーター 1
#f21271
#089be6
#5e8df0
#c6f479
#48bb64
#444c6b
#326335
#41e078
#f34bdf
#e3e9ea
#718160
#34a57c
#280284
#8d672f
#63baf3
#c8b9a4
#60fb76
#4579f9
#659b35
#59ee09
#872d86
#01859f
#13a81f
#f1c8dd
#258f17
#c85eb9
#328fa9
#cbc3e8
#e20afe
#1c7259
#b2396e
#4f0e20
#019023
#ef70a6
#21c1e5
#892643
#f40cb3
#a143f0
#eef4c6
#bf8fab
長方形型の配色ジェネレーター 2
#66d009
#b71a99
#a13046
#3541d5
#25dcba
#ccdb53
#adf34a
#85864c
#c96663
#58c09f
#98f4b4
#b0ffe4
#524d1b
#d7518e
#5ac276
#15d189
#1922af
#dabb20
#dbcb03
#688a08
#dd640e
#d4eed9
#069c4d
#73dd8d
#085387
#ad2054
#274f6b
#f08cc9
#ee86bf
#c084f6
#1fc893
#6864f0
#bf0578
#a0d60b
#4ce708
#7e430a
#fd04a8
#1a46e1
#b8391c
#84b844
類似色の配色ジェネレーター
#9c1b5e
#fba5c2
#888475
#5c943f
#c4857c
#0f77cb
#41b329
#af757d
#afe255
#494d0b
#beba6a
#bfcf7d
#251b9b
#908b6c
#5e17d0
#ead91e
#ae033d
#cec443
#57ce75
#40cd51
#68fd1e
#14919f
#e29d7d
#201340
#2ef3c7
#323598
#b1bdba
#d7826c
#e82570
#0a0751
#750c7d
#fe4a62
#3b4917
#ff5e60
#af65cd
#644d1a
#086172
#1e66c3
#3a509a
#67360d
#458df4
#2d54be
#bf4394
#b68795
#268838
#971114
#e5f1ca
#767b43
#e97e88
#afeb9b
正方形型の配色ジェネレーター
#d07a39
#862915
#0be24f
#ef6b1f
#1a45e7
#ec34c8
#01cbb2
#6c2eed
#111433
#057fc1
#310198
#d147ae
#716d7f
#a6512f
#e7c7e5
#9cb249
#fcb056
#874d6a
#358bad
#45f8f6
#b76daf
#dfb0bd
#fa9f9b
#cfabcd
#370cfb
#34d110
#a2b8dd
#afa365
#d5f912
#1f2d1f
#ddff50
#2e1558
#ea2335
#f68742
#4489b2
#b3abc1
#b2b9b9
#1bf4e8
#3a491a
#a84e0a
正三角形型の配色ジェネレーター
#e3c410
#81ab46
#23f50a
#c05a96
#c92e3b
#5fe4e7
#2abbc3
#f9f624
#7ae9ec
#f3c315
#7290c0
#410ef7
#996bd2
#1bc949
#f02d7d
#33ff25
#592fde
#84c022
#8676e6
#e59a89
#1d5783
#74b088
#f13c22
#a12a47
#a12126
#9f7efa
#5b698a
#9aa0e3
#56285f
#8cba33
隣接補色の配色ジェネレーター
#8b1504
#666f44
#8e52b1
#1fafa8
#ec7712
#f2143d
#ac44d0
#ad0b7c
#b8364d
#360569
#9878b1
#8b70f7
#1fa120
#c4296f
#4bccef
#41d39e
#1ccbf1
#c90903
#56ea3f
#de2875
#eb4812
#c25d3c
#e063fb
#cc8a0a
#9a8a2d
#98f70e
#de4510
#e16152
#d35d01
#8f64f7
#130ac9
#8bd072
#282799
#7f7942
#16233b
#1fbc0a
#da9c62
#b02469
#f51d5c
#5ba294
#4ad8c6
#783c67
#91150a
#3538e0
#8a5329
#530319
#13c57a
#3bbdde
#3a6f72
#bdcaf9
補色の配色ジェネレーター
#c550e4
#9f6724
#c17084
#7c3ad0
#47745d
#fd6ae5
#6aff46
#dfa623
#20cb3b
#374354
#91e623
#9ef982
#73356b
#d512a1
#f12a26
#3d1702
#57a895
#2dce03
#919910
#0c7076
#4fec06
#ef4986
#f87615
#85723e
#783ba1
#bba593
#aa6519
#eb2ac4
#0fce68
#b43a60
#4d4ea0
#7bc7ef
#c40157
#b32cc1
#a2f4c5
#9a4529
#1eaf90
#179b0b
#ce93e5
#4139d2
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff