メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#5d0496
#85fe9b
#ded5b5
#4dd2d2
#360e23
#4c44ad
#abf6b1
#dc4e5a
#726f20
#46ee50
#bbd734
#0c67c0
#1498b7
#f0c70c
#edaa43
#b3c274
#6ced77
#f528f6
#619757
#2f8e60
#7c42e5
#c62293
#a6f4d4
#967561
#760466
#1b18f0
#29563b
#b784ad
#04a81e
#b20cf1
#fca2d9
長方形型の配色ジェネレーター 1
#e63acd
#151b94
#7a9721
#aa80d5
#db4910
#31d72b
#991d77
#e7abdd
#a12191
#69a4cd
#16faef
#8d8de2
#795941
#821757
#4188dd
#fee394
#667791
#bf7596
#9a7657
#549d9d
#f343a6
#e4b4f1
#3fda26
#9dcabe
#773930
#934d13
#0e3012
#e1664e
#65cd56
#d56f1b
#aa3a85
#dea9d5
#bdce4e
#22c041
#98cdc8
#27379f
#e5ae96
#7160e5
#8f1a62
#b95f98
長方形型の配色ジェネレーター 2
#c336d9
#100679
#fb6058
#c71ecc
#a727fd
#db7fbf
#344d5e
#9b8d55
#5a08ed
#776048
#d0e429
#4b7599
#bcf212
#300935
#f3eb77
#fa0b12
#b1e287
#111296
#28c78f
#57661f
#69498c
#1779ff
#24892f
#aecd7b
#7830c1
#a0301b
#f12941
#662d66
#d21a18
#c2e860
#da98c9
#71a7a6
#a56ea7
#fbab27
#c9c0dd
#a526d1
#4789b1
#bcdbd2
#79069c
#5d92a6
類似色の配色ジェネレーター
#983d96
#7469b7
#44a37c
#0aea54
#326688
#82fc07
#f76265
#3f64ef
#29f92b
#3855de
#4e5658
#0d0785
#2e397f
#4e3136
#7c27bc
#5e2384
#7aa8c5
#97a477
#72e17d
#3d276f
#c8ff2f
#c80fbc
#69f78e
#8856ff
#4c7094
#becc31
#f9d491
#a59f43
#e0c980
#ada906
#46d4a6
#750e5d
#e8e43e
#8ce6e1
#5f6fa7
#f4bdd0
#9dcbd5
#891bd3
#f4b551
#f279a7
#b4dd08
#ab772d
#856224
#655dcd
#9593c3
#bc7dc3
#8afc01
#ef4662
#c9b59e
#f1cc7c
正方形型の配色ジェネレーター
#11d1b4
#da86f3
#ba7056
#11f831
#c0a912
#2727cf
#250d5e
#6b7f42
#d79b4c
#d327ea
#5849ee
#e63267
#3f5793
#1e3502
#42753b
#0ebf97
#cf0042
#b23300
#866ca7
#cb631b
#675720
#2206c0
#3ca82e
#4c7019
#1a316e
#56a7b8
#24074f
#34a339
#0574d3
#3abf36
#e63135
#294724
#cd6a62
#265320
#ab60ef
#525c08
#3b453f
#516577
#a3a0e4
#7c705c
正三角形型の配色ジェネレーター
#b68eac
#7d50ff
#e606e6
#c9ea94
#63017a
#543ed3
#33b487
#45687f
#2c7b2b
#eb97cc
#d27590
#5bd270
#08493d
#cd0ff4
#fc10ce
#c80d8d
#027d73
#c9197b
#d9fd7e
#dd19c1
#275c0f
#306fd8
#e37215
#431d41
#18a346
#704319
#cbe73e
#21a89e
#c49b80
#28968b
隣接補色の配色ジェネレーター
#3c742d
#a29bd2
#a5d410
#dde531
#f117b5
#96c5c0
#966879
#4151c0
#c653bf
#84dd11
#44e682
#8ccf0e
#f1b707
#560a7c
#ebad95
#a60932
#534b41
#4629c7
#022437
#22a6be
#349c10
#6a6819
#31a891
#15fcd2
#366d6f
#8c3b74
#22ed62
#eac7f1
#d67e6b
#da1867
#7bc4c4
#ce26d2
#351f60
#f8084d
#256e9c
#2b33a4
#55310c
#c993b0
#3898b0
#eb6b70
#5a9427
#39999b
#829aae
#16da97
#916767
#b4e5fb
#cf589b
#b3009b
#b5ec01
#bee65a
補色の配色ジェネレーター
#10da7e
#7fcc9e
#d7c729
#4dfd91
#39503e
#423765
#bdd916
#9bec35
#8224ff
#7316b4
#384884
#07cce7
#cb3580
#62114a
#ceebcc
#1780ca
#5c7139
#9759ed
#912701
#b759c1
#4a6644
#9e4b3b
#fbe8a4
#7d953f
#f7b457
#7e652b
#58e4ed
#fd13bb
#1a6343
#4ac885
#31c9ad
#74e62c
#80ddd4
#195bab
#612350
#5a0c0f
#c719fc
#d58784
#834d83
#1b51d1
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff