メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#31ecb5
#476d6a
#41c577
#54e404
#8a773e
#cecd2e
#cca335
#5fd08b
#a0d533
#c5c2ce
#0ef2d5
#caf41c
#71bb7d
#147292
#33311e
#bcd8e7
#104c6d
#985b51
#b7ab48
#934196
#945947
#bb3c4e
#6e7976
#e3d6c6
#244530
#3e7758
#184ceb
#75d06c
#7d3a0c
#551613
#7a46b3
長方形型の配色ジェネレーター 1
#f4c3d3
#7e5522
#f385c7
#5122b5
#642509
#7f7a94
#838d2e
#c84e5f
#0a94e8
#2fdc0e
#913402
#914161
#820323
#7c302c
#328c5a
#81e22e
#583dea
#865d7a
#ccca08
#d7272c
#98ff22
#113522
#dd1497
#26c0de
#41213b
#48068b
#c74490
#6ea85d
#e8a41b
#6c9697
#98851c
#ff30ed
#78ccba
#7b9a3c
#a3df44
#9af29d
#fb3055
#197d9c
#e3444e
#b2cf17
長方形型の配色ジェネレーター 2
#102656
#443de8
#dd0102
#2ab129
#652a65
#1cada2
#3bdbd0
#58baac
#386a2c
#2ee01a
#5bbc30
#ab9bc5
#1c50d3
#9ff233
#55d99f
#8109b1
#6e9c37
#8c33bc
#ea5523
#91fa8b
#60a657
#3d1609
#5a083c
#0aaed1
#b44f93
#177985
#768093
#efe882
#089c9d
#b23d65
#ffcfec
#143b23
#74e54b
#3791c4
#bc4c1c
#475f0c
#5f9f9f
#6abdc2
#75d304
#f925bb
類似色の配色ジェネレーター
#b8a4bb
#9d1078
#5ee2d9
#99541f
#ac8390
#d0ccd3
#001742
#18830c
#514f81
#dd4db2
#28a002
#13754f
#e39750
#cda0ce
#ea4e3f
#155619
#be12fd
#efac4f
#2821a5
#a549a9
#fe5d79
#36dc10
#ed0ee6
#5be57a
#9ef95e
#1f90fc
#a44d66
#54c45d
#f12df4
#295e05
#6d1204
#fabe30
#b23c49
#1ac390
#6d795a
#619239
#3d4223
#7ad36e
#0bc3e4
#494e42
#801b05
#4134af
#e62ae5
#25abf5
#abed9a
#7c9fe9
#d8bcfa
#694134
#0c163c
#4061c1
正方形型の配色ジェネレーター
#3a1db2
#28f74b
#d60567
#43fad2
#13f3a1
#6b0849
#1cb34d
#51d13b
#9e84b8
#0d00e1
#b8b7e9
#8c5974
#d8b8e7
#c13893
#ed292c
#296134
#22b74b
#cd1907
#bf573b
#128083
#39d26a
#b9a8d9
#6698d0
#bd6249
#8cbc44
#4e5d3f
#57d82c
#f7d6ec
#4f4342
#e67946
#50b339
#97b8d8
#f96536
#627896
#5e07c6
#56d3f7
#769604
#bc6eef
#43eefa
#4c7e83
正三角形型の配色ジェネレーター
#7bebad
#2f24d4
#67b966
#b2a2af
#8eb9c4
#2f4d22
#89af5e
#07de09
#c54289
#63b670
#426f6a
#5554a7
#48c43d
#c0168b
#80ff17
#e2236b
#ef8d60
#c53d5f
#c14061
#013e03
#bf2af4
#446026
#90c07f
#ce3a62
#e66ff0
#6104ad
#4ffada
#9354dc
#65457a
#a92000
隣接補色の配色ジェネレーター
#2a7568
#841527
#8927a7
#247ae5
#9ec9bb
#55ade8
#092ab9
#16a1cd
#e3007c
#bdb589
#8fa137
#b0cd51
#1fdb27
#ca7081
#123b4b
#268b46
#310230
#7ad253
#6ffc39
#ffc000
#fecbfa
#a8dbe9
#5eeaec
#501a5f
#f2b33f
#c45303
#fe2ee2
#d68ca3
#afd9ce
#9f37f2
#249af5
#4a0746
#775ec2
#961bd0
#43bbc9
#12d235
#331d98
#2dcae7
#fc97e6
#e4b43b
#6addca
#2ae401
#19abb9
#94df78
#ae50cc
#982ecd
#d98c06
#ca952d
#abb695
#e31094
補色の配色ジェネレーター
#633d96
#e9e23e
#0ddf18
#7b9fef
#f8f90f
#a7f930
#c6c14c
#64cd33
#63fe55
#dfc584
#f446ad
#121ec0
#048ae7
#769fbc
#8d7454
#60dd7b
#903afc
#dbc85d
#5d0913
#8b7f06
#7f5570
#0cc3c4
#fe3a2d
#9ce093
#62feb8
#2417aa
#feae98
#2ebe5b
#4b4f65
#9a8696
#8072e8
#810114
#390f02
#4bf4aa
#a59e46
#273bfa
#8b9c43
#73e48c
#48031f
#6c4b3c
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff