メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#f4d303
#2369d0
#6fc217
#07e3bd
#e7d367
#6766a5
#578c77
#d9e3a3
#019134
#4f01a1
#a29914
#3679be
#f1e512
#2717ce
#5a8e77
#cb7700
#f59112
#0cacc1
#4dbf97
#3390d2
#304237
#e49080
#c0e657
#25ce90
#1e3368
#d38196
#17b1b9
#c9f2f1
#402248
#10f26a
#145c8b
長方形型の配色ジェネレーター 1
#b209ff
#463bdd
#bb8502
#d09873
#40aa88
#42b00b
#9dc0da
#d6649e
#f30426
#5ff83d
#37ba6c
#35267e
#fbc14b
#5acece
#8f9c8c
#39ce45
#5a56e9
#899a0d
#2b7fcf
#a73819
#87d1a4
#93e6e0
#9afc7f
#39963d
#78caab
#81bc71
#52a7e5
#a3bf89
#022ca6
#6d5361
#8775e9
#830103
#36134c
#a75066
#b00456
#64c879
#85969a
#5f4b62
#566531
#846955
長方形型の配色ジェネレーター 2
#f5fcba
#0d6945
#ba5201
#6d9c25
#81dc13
#af6052
#3209f9
#f56c81
#736911
#00a39b
#4bb94c
#b65050
#aac19b
#d3ebbf
#fa683c
#585e8d
#03c24e
#992050
#ec548d
#cb4b15
#790fe8
#770660
#dd807f
#483025
#e7c18b
#994e1c
#ec6e7a
#7c857c
#0ebea8
#e2e278
#c8b105
#e1305f
#48add4
#e6fb4f
#e76ab2
#a796e6
#ad7fd3
#42a381
#a95222
#36544e
類似色の配色ジェネレーター
#837486
#6169e6
#b48a4c
#3ed348
#d52d9e
#ac0d2d
#62df96
#8fee66
#6d3d3e
#b45ff4
#7efe83
#ef0637
#8ddce8
#57a3b4
#1940f8
#23ffab
#4f5b5b
#0d6e54
#bafb62
#ac94c1
#57964a
#c61771
#ee0335
#138cb4
#72bf0d
#45e7b5
#f1bc91
#001014
#b7f7ae
#d315d2
#979518
#bba081
#3547fa
#2941ec
#eaae23
#218300
#644077
#ded996
#49d8ee
#d3e71a
#cd9b67
#fcdb9f
#8c2b7b
#d1043c
#948a37
#49145c
#3f9d29
#680a04
#146000
#536035
正方形型の配色ジェネレーター
#ea8646
#625781
#232ffd
#710b81
#d4ce25
#743880
#e40123
#834422
#604779
#a0a776
#b9a629
#50024f
#8972f1
#d085a2
#e25bc3
#cd137e
#36dc6a
#06a26c
#7244d5
#8c4b79
#75c729
#22062f
#d1f6d9
#5b8ce7
#5b21f1
#4683e3
#04c6cf
#949bee
#b003e7
#bbd854
#daa963
#ccc2b9
#d57fa0
#44d4ea
#c97f22
#ec78f4
#e4a9be
#b57f24
#93cff5
#e0bc98
正三角形型の配色ジェネレーター
#418504
#77ed48
#9d872d
#53db98
#ea5dc4
#ff3bef
#fc73da
#3f5342
#4d3afe
#157f73
#f8674a
#dd636b
#6aabb2
#e84f5f
#f805c5
#0440b7
#5c9b22
#96b962
#51fc0a
#57b293
#d13f0f
#5e4c72
#588e0f
#e59eb2
#c9df2f
#e2c41e
#4d99fd
#a7cd27
#93656b
#27e734
隣接補色の配色ジェネレーター
#f97489
#564d6a
#df9a94
#deac36
#fdb207
#d395df
#89ebaf
#80e958
#f041df
#fafcb0
#95d002
#38fcf2
#f9784d
#84c213
#87a877
#c83699
#62fc84
#25d14d
#4f7511
#069861
#ec4fa9
#bddf07
#8f457d
#640ae9
#260335
#d1e0c1
#5215f8
#2d9633
#bcfbb7
#54428b
#0b1a1b
#9bdc78
#dd8709
#c4fd41
#758b4c
#aa3365
#68db6a
#8300ec
#3228d2
#ea8b84
#010713
#138c16
#95f3d9
#711cb7
#35ae38
#94422d
#5591e8
#36c9fe
#c96f90
#3f603c
補色の配色ジェネレーター
#a66484
#119dfd
#eaa5ce
#2f909b
#2a0d16
#72e4f8
#c4bea8
#8fd35e
#df0041
#418032
#57c65b
#54faa7
#413c43
#6059eb
#8450c1
#0e971a
#656a15
#2ba06a
#90d76b
#6e2219
#cee952
#96e1cb
#9d365c
#c9f896
#fac32f
#b18987
#e7674a
#279289
#8680fc
#79dbe4
#fc3588
#9a906a
#aea706
#cf9ac6
#dda301
#f5f934
#d55cc0
#7a4292
#6158e1
#af98d6
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff