メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#abeeea
#2fb6ac
#d2da72
#f51b97
#1b0050
#77eef3
#c1b1fd
#c7fd9b
#a6d74e
#d37b66
#eefd0d
#333b10
#7d407c
#99b63c
#94cf99
#15dd97
#fe40db
#4ec33c
#95510a
#98ae48
#bc075e
#e26599
#9be6b1
#705331
#017fdb
#b25212
#bc3202
#bf68b8
#f237e7
#5a243a
#9f1739
長方形型の配色ジェネレーター 1
#c8bf96
#783b78
#280a4b
#d0186d
#e94e4b
#789860
#54aaee
#019c3c
#00ef20
#ba94fa
#82fcce
#947687
#66f236
#b19794
#39ffef
#797cef
#461d31
#e38169
#eac516
#ba580c
#292864
#fe1952
#192fbe
#e45d8f
#2763ae
#334f68
#99a35e
#f44ec1
#6f2b66
#16e43c
#c19510
#af9a19
#7377f5
#bd9374
#6106cc
#f675d3
#395906
#1f8ae2
#5f81cb
#2514cb
長方形型の配色ジェネレーター 2
#c3d775
#eaf466
#ac79c1
#2095fd
#66c758
#c8ea33
#a15b11
#f16273
#7dc5cb
#2c924b
#072222
#87b482
#2a3464
#c2973d
#3a7a61
#633e97
#fbbe72
#7c018b
#bc47c4
#b396fd
#d11262
#8bd637
#3165ba
#377162
#843c05
#e8145e
#0792de
#ac05f6
#adb27e
#6df4e4
#c730e4
#3f916c
#acf711
#7bec94
#6df48f
#e0d84d
#53d032
#0b223d
#ee19b0
#d54b47
類似色の配色ジェネレーター
#cbfe71
#430faa
#446b6f
#0f1179
#3cff31
#761d76
#35b160
#d718e7
#224b43
#0a7732
#1e1637
#849c8f
#58bddb
#385646
#cb2509
#de92cf
#7db266
#c3d789
#d74674
#0b6e1a
#022e4a
#055888
#ac7719
#7bc518
#2a558c
#1d96dd
#37854c
#5416cb
#53b7e6
#1b9d2a
#75bbdc
#843241
#2df5d7
#f72e83
#b0bc53
#ef10f1
#d71393
#7c1a6b
#3fab1d
#ef6dd3
#f1ca0e
#d6f0a0
#95f46d
#c352c2
#1e8464
#332d6a
#df18d0
#4e78d0
#b1ba5d
#6b6c1d
正方形型の配色ジェネレーター
#405cc5
#77ef79
#ea3ee6
#e6b704
#7526cf
#a649fc
#4223a2
#6fe8ee
#fd8bd1
#75d13d
#1b40fa
#be8602
#a841aa
#592bea
#ff8451
#00b6a9
#4e2c67
#fdd5dc
#db1c3b
#856899
#0e3a7e
#d5dadf
#05b4e1
#89476c
#f088e0
#4ed859
#0e74f5
#927f37
#480fe4
#f68c88
#1e8dd2
#fb5115
#6ea64c
#fe7142
#5e37b5
#a3aaa2
#1037ee
#554b78
#321d36
#eb6ec7
正三角形型の配色ジェネレーター
#6be1ba
#7677de
#e1c758
#532f67
#047d33
#5e507e
#64cdda
#84fcc0
#ba4189
#008e23
#baa5b9
#3be897
#44c0ec
#9443c7
#7a21ef
#042880
#53eccf
#e84188
#c058ea
#30a3d7
#183420
#4d8fcd
#84e34f
#8a6f41
#b17ac9
#038a96
#b18ef9
#2480c0
#aad9e0
#2d301f
隣接補色の配色ジェネレーター
#67eb4c
#af04bd
#9a0c67
#60b55c
#3dc24c
#836d89
#9d6493
#bca5ef
#2ce410
#21dc41
#7661da
#effca1
#a0e086
#c31b0a
#91c056
#d7fc78
#c0a590
#154e1a
#645e3b
#be61f6
#78b602
#e60207
#16dc64
#10072b
#371007
#e79344
#c4ab3f
#be8c8a
#f21fdc
#8353d0
#568596
#c243ba
#52860d
#b29177
#c06efd
#2bb8da
#6a4688
#a7f032
#b063ec
#6909e3
#ad6836
#fdb17b
#5145c0
#4a0326
#2662fa
#8dbab0
#fd6d2d
#91f314
#8e343d
#cab9cc
補色の配色ジェネレーター
#a9f1ec
#a696c1
#d2d060
#b7e916
#8f5e93
#fba3e2
#2129cc
#9be795
#7a73f6
#018c29
#106c6a
#7c2558
#200f83
#976145
#8c96c7
#debff3
#6e7c63
#ba7fef
#758823
#619cba
#ccaf62
#8e1bb1
#172d30
#5c538e
#7169e2
#f02c75
#0deb56
#085658
#e94067
#f3d9f2
#620497
#ecee7d
#b7456b
#82907a
#93ac8d
#7c6aeb
#f0e192
#87ade4
#8a2916
#b26e80
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff