メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#4c6b79
#7d6727
#ae84d2
#064daa
#7ea204
#e13af9
#cb0556
#2f647d
#8e7bee
#18811e
#eac067
#eac529
#64da50
#8d4e4f
#d0327b
#0ef7cd
#699eab
#37a8d1
#33f37c
#25ac05
#881c73
#c6de59
#be613c
#dc565d
#822bfd
#b65624
#871dad
#7cc9ba
#248f5e
#d80647
#aa958d
長方形型の配色ジェネレーター 1
#1df557
#114f0a
#ab9f7a
#07db71
#845632
#18bd57
#20f2e8
#7d6e79
#593515
#0d2d1e
#ca49ba
#714304
#55b8a3
#c1592c
#b09e76
#3ad734
#bd64fc
#6b3f3e
#dc2460
#3c8422
#7118f5
#fe0aab
#a78971
#66d7fd
#8a32ee
#92d80e
#5023a4
#44d490
#bb85bd
#9adc76
#210290
#fdb0d1
#3d684a
#1b100a
#8eeab0
#57737b
#41b0c2
#73251d
#9fcfb8
#50a7eb
長方形型の配色ジェネレーター 2
#6e167f
#5c920d
#cdb7e1
#6dcd9e
#a58418
#a4058f
#034a0c
#1c361c
#1d952a
#350223
#63e51f
#470c3c
#e311ca
#0dd6da
#da3f08
#577ae9
#30f3c5
#96f8b4
#3b6e3e
#b598f0
#67a00c
#352135
#8128af
#90227e
#b7c0ee
#26cbf8
#d12f75
#3c6042
#4bd40d
#4cf663
#d98ec5
#212770
#9f492f
#31a1bf
#5dcde3
#86dd12
#e03d46
#d5c95e
#90a31f
#361a55
類似色の配色ジェネレーター
#73af64
#c18387
#2c7c20
#de36d8
#a1c36a
#c51d58
#db6afb
#57d91e
#da80ab
#6e6ee0
#d90ce5
#fcfca6
#19b8d9
#9ba608
#470772
#32e04f
#84a5e3
#d19c28
#2b05bf
#8a470a
#2393ad
#28b34b
#bbeeef
#62a001
#6fd4bd
#2d758d
#87a3d4
#144ab4
#908f4f
#fb020e
#1b29bf
#507eb3
#71e25d
#f1f864
#8104b8
#99a5f3
#27b8a1
#a84c90
#ece3ad
#a073ed
#32998a
#427ad2
#dce54f
#8ff2fe
#8f26b6
#2633f0
#6fe4ac
#3864b4
#eaf66e
#870fc0
正方形型の配色ジェネレーター
#89a8c4
#dd690d
#c1621e
#685d0b
#f9c299
#aaabc9
#7ae9e8
#610322
#5c998d
#6a964a
#503cb7
#58daab
#ffde01
#af77c0
#a9066c
#0f288e
#209680
#c87c82
#dc9c1c
#093f03
#517c02
#63e8de
#a9b871
#6bf622
#709df6
#e69ab8
#d8f89c
#abee82
#038f34
#3918cf
#5dec76
#34a5bc
#15e8ff
#fbad7a
#e292c0
#7e8ded
#4f01ab
#d87628
#134490
#35d67f
正三角形型の配色ジェネレーター
#2588aa
#93300f
#bba168
#4fa5d3
#2a91fe
#c61db8
#f23f89
#4f68a8
#e5b756
#28e86d
#36fa6f
#b2d544
#b99564
#351ba9
#b0f393
#fe8db9
#975019
#db080b
#33f7e5
#482de6
#c130e5
#54be79
#933e88
#4246ec
#9c1e30
#82ab72
#1f9bd9
#b49350
#35db92
#5965b4
隣接補色の配色ジェネレーター
#3b8dba
#3bcbf8
#16f68c
#f1c2b1
#4e34b0
#0a37ba
#9b3bd2
#a6768d
#519f53
#e1942e
#0ecd5b
#2cac8f
#e7040f
#698ffb
#60b1c2
#ca603e
#8edf47
#78fbd7
#5239b9
#350e9d
#09aa50
#9458d9
#9d209d
#70da3b
#5241d4
#4fbff3
#d5195b
#62b40a
#4b5890
#0587a3
#8cc93c
#0ac633
#77bd8f
#5bca37
#064655
#567d53
#a80b41
#e24026
#fc479f
#ae5fe4
#d1c70d
#fd076c
#a790f5
#4aaab8
#8a4f58
#c129e5
#5c058d
#9da4bf
#4d7009
#1a420e
補色の配色ジェネレーター
#066f9e
#e30b8c
#9a5403
#d6bead
#8fb43f
#f41d55
#7c0c2d
#373b48
#1016c5
#a6dc4d
#9b4af2
#8e6c6f
#ad9f1d
#3872a2
#f77d5d
#ef7c37
#9feaf0
#fd5d8c
#bc592f
#f9a472
#c9e988
#f17917
#d8899b
#769983
#937ecb
#dd6dac
#689a87
#c731d1
#9a09bb
#e99b81
#40dc76
#5be343
#a38f51
#5faf69
#cff983
#a67146
#3512b3
#7ecfbb
#cc960b
#d4bb36
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff