メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#c520d1
#00df38
#005543
#d53897
#7b8eeb
#6ed4ed
#23356e
#991384
#852a54
#e99825
#e24396
#057efb
#938325
#87c099
#25c331
#d0be1b
#5319df
#53078e
#018329
#c4eb7e
#3ed0f6
#949db9
#958850
#8b96b1
#b1ffbf
#3cfd57
#e48b99
#315d99
#cbd74e
#f15f7d
#3080bf
長方形型の配色ジェネレーター 1
#11aa71
#d8bf1a
#15e7e4
#ef715b
#222537
#3a5876
#730ab4
#af4389
#44f1b5
#ba353c
#7ae419
#b4c2ab
#3ec18d
#f73f39
#607198
#ecb3e3
#ac53e2
#27932a
#131975
#fc2747
#407286
#c16b66
#34eca9
#2ad20a
#3a16d9
#22e388
#7dd42f
#464cf4
#505eb3
#f31f9f
#e9a29e
#ead5fb
#d99bfc
#7cf6d2
#070f71
#3ceadd
#2a4fde
#84ea74
#c2315c
#a9fdf4
長方形型の配色ジェネレーター 2
#aa8cb7
#472fe3
#da6198
#cce5bd
#ea481b
#2024d4
#a1ca06
#d7bac3
#b1d8a7
#76eac7
#b87c8c
#9fdeda
#317172
#805fcd
#be1218
#8523ee
#b32749
#5577e6
#c7b421
#49b7cc
#9d2a1b
#345b96
#1d5b95
#a0dda0
#d79f38
#fce578
#f43c8f
#c5d51b
#612f42
#8861f2
#ae0641
#0dda71
#c124fe
#2f114d
#7912f2
#cf29aa
#342861
#051ddb
#ed1bf1
#86a2f3
類似色の配色ジェネレーター
#ab737a
#49bce2
#96c1e5
#3554ed
#a4152b
#774a83
#0279e4
#0a0d1a
#46afc7
#f79dca
#317420
#905df9
#566000
#e5d3a1
#f11930
#818d69
#095ac5
#83a460
#0c0730
#9bd55b
#ad96fa
#354112
#fa4843
#6c8bf9
#d1c225
#60f2d3
#9a103c
#1167c3
#cd0d81
#7887c3
#9ae769
#9f6749
#d1530b
#8f3e78
#ef04d5
#122b80
#f8e879
#1899f3
#99fa6d
#900ee2
#e6703e
#009574
#24f9e2
#0d32c9
#df56f5
#0d50c1
#782142
#3d5fc6
#bbade8
#0ac2b0
正方形型の配色ジェネレーター
#b1aa8d
#992cd7
#6df983
#5b890a
#2fc9c5
#79acb9
#3d94e8
#3bca20
#84b94d
#e61fd1
#74ba01
#ed8d98
#9e2c83
#441c4e
#3a4fb1
#9e3759
#765cf6
#438588
#7d960d
#a4289e
#1d669a
#e7c6ca
#48e2bd
#97387c
#81ebe1
#b654fc
#ef1df2
#2ff68b
#d042a3
#cabdda
#67d288
#0dbf64
#83f720
#c1c2bc
#c5aa3d
#dbd424
#e082b0
#326811
#1d5928
#772335
正三角形型の配色ジェネレーター
#b7e7c2
#54c20e
#ed89cb
#f281f8
#78bd58
#c5da3e
#458d67
#bafc2c
#fd5024
#4590eb
#8eaa77
#d2d717
#931fd4
#42188e
#251d77
#9d33cb
#01635c
#e3d8c6
#687e53
#171d27
#cea72b
#a7697b
#c97f32
#82834c
#c544aa
#f12e2c
#b31f6d
#6d6fbe
#5ca26e
#222494
隣接補色の配色ジェネレーター
#39b7ea
#f0da66
#9e20fb
#bef928
#d8f42b
#e03917
#c09004
#14a70b
#7d1dc9
#22686a
#b84481
#481085
#c25630
#572606
#8ca80a
#f3581b
#07b4c3
#5f41a1
#5a9e55
#db91d0
#5afdd7
#0a2b52
#7da5bb
#16e735
#ae0915
#96db0b
#a4642c
#55c03c
#6f343c
#79764a
#58a1f0
#442e0b
#dca957
#dfd65d
#42c81c
#f2f442
#fd0dd3
#3e62bb
#b610a9
#6c605b
#71a21a
#19d860
#a8f272
#7fe626
#9c2f90
#b2d028
#7533ad
#137393
#409d1d
#ea6390
補色の配色ジェネレーター
#a8b191
#09dd38
#ace0a1
#fd705e
#eb9436
#dde848
#fc8606
#b2f118
#e691ee
#388df6
#956ab6
#8ae94e
#0455a9
#025f72
#fbd6bc
#ebc215
#88500f
#2ab0f3
#730ada
#5ce43f
#6b736b
#bea585
#0eed41
#84232f
#a8d6a0
#059c91
#49f4d8
#e1644c
#913bb3
#7b1d4d
#6a0d22
#861c7d
#913a9d
#676b8d
#ee2b3a
#35fe2f
#ca9981
#fab4a5
#76ee7d
#40c7be
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff