メニュー
おすすめカラーパレット
Webセーフカラーパレット
色の名前の一覧表
HSLカラーピッカー
ホイールカラーピッカー
HSVカラーピッカー
RGBカラーピッカー
配色ジェネレーター
近似色ジェネレーター
ランダムカラージェネレーター
上
下
色相、彩度、輝度による配色ジェネレーター
#355271
#169dd7
#578edf
#f0c181
#35e542
#4e4447
#dca8a7
#1763e1
#634369
#a94b35
#0c074b
#06adbd
#e17671
#569f09
#801d31
#be7e65
#479f47
#aae8ba
#cce733
#221fa3
#6ed7d1
#1b93ac
#e18713
#4a1334
#c6b5d5
#904fcc
#7eb1b3
#c0dc2d
#321fd5
#4536de
#4225c0
長方形型の配色ジェネレーター 1
#8aecfa
#9119ba
#44a84d
#4976c2
#2148c7
#603845
#c75ef0
#b2c3c6
#35f18f
#c9c7c1
#2f78a2
#b7b01c
#0f2a25
#48a36c
#805f9a
#e967d6
#0525d9
#868071
#1601ca
#4ae0fc
#9b35b0
#784899
#61c2de
#f425af
#541d3a
#404ded
#cf597d
#4d82a9
#af377d
#00e1ed
#df90f1
#3f38d0
#43b692
#4f7031
#7ef463
#5107cf
#26ced4
#39e57a
#a2f939
#3fd2f3
長方形型の配色ジェネレーター 2
#4b48ce
#fb2998
#0d925b
#1600a9
#530348
#5103af
#856e5a
#184869
#ffa10c
#7b25ae
#e4becb
#93a9fa
#953462
#e99517
#a9874e
#b58437
#c27447
#85745b
#855709
#7370dd
#0c25db
#db916c
#1f3799
#38ee08
#ff269b
#a95357
#6dc8ca
#9c3559
#242a5d
#dbe9f0
#e13080
#fd2bf4
#940a13
#c43ff2
#e8faae
#5855d1
#39aee3
#79611c
#217d56
#276a0d
類似色の配色ジェネレーター
#09770c
#540b29
#cb10ce
#38cd39
#63a8a0
#6239a4
#cbacdb
#8211c7
#426023
#45ea0e
#d57f61
#16ee26
#e9a775
#5856bf
#db19a6
#511b25
#6443b6
#27bc7e
#781d76
#7d84a5
#df8efa
#92a7c7
#a423a3
#eb61c0
#ce9cf8
#4e0426
#e929b1
#5168e6
#df3819
#8bf92c
#776ca0
#27a797
#1c368b
#9645de
#1a7327
#c8ccb8
#de7d34
#6884ac
#1669e6
#172fb2
#5300b7
#eacf48
#e6183c
#9fcdd1
#ae72e0
#2cdae6
#48dcea
#1b1a96
#994d27
#921acd
正方形型の配色ジェネレーター
#e98d9c
#0016ec
#c6cf28
#fa0037
#830507
#1cee84
#019238
#a14be3
#e9df3c
#c099b0
#9ec16f
#63d6e8
#f49c4b
#95f58f
#4017df
#9e7d9f
#485d71
#79ab6b
#fabccd
#c030ae
#88f154
#1c5b7e
#683014
#7cdd9f
#032815
#690ea0
#44f712
#fe2177
#58b03b
#60357d
#20dcd4
#a1cd41
#f949b9
#48b35c
#3c9e48
#2e6d89
#ce2c93
#dddd9f
#1b05b5
#8f8328
正三角形型の配色ジェネレーター
#ae54ea
#0a3868
#0606cd
#672cf0
#453e71
#0e4c33
#f59f02
#26e711
#95b589
#e07739
#ec53fd
#15fe3f
#400490
#8958e5
#26646b
#2fa1fe
#022829
#1fa4c5
#f35d69
#25629a
#621d75
#610db1
#f0094c
#fa9ca8
#32098b
#43d118
#aed29e
#931d1a
#4429b2
#f875a5
隣接補色の配色ジェネレーター
#e90075
#806649
#95701d
#dccfbd
#b1df83
#36af76
#d9a92f
#bb9173
#183d91
#523dae
#57418f
#35d2ff
#50d33b
#804e06
#938587
#695bd6
#379215
#11b6a3
#66b67c
#4e43eb
#5c8ba2
#e9e50d
#a1db77
#1407bf
#3d87bc
#e835a6
#bafe17
#20a134
#f5a753
#ad095e
#b7d556
#96e260
#eadaa0
#a4bbef
#4ef3f8
#436ed3
#93c041
#11ee42
#7ca8a5
#0482f6
#b9f4d0
#bbbdc3
#5f19ea
#a7808b
#e330e1
#54babf
#6508ac
#7b3271
#390d8c
#61fd21
補色の配色ジェネレーター
#c847d2
#96292e
#2a25e2
#afd821
#08a023
#e0b4e5
#89cdfb
#60a2b3
#01c3a3
#1918b9
#7bfe72
#9313d9
#2763f1
#41decb
#7b9d83
#0e0f16
#11b364
#a4f33f
#203d1d
#70aeae
#7ad0f8
#f5a014
#77f7a4
#0c1e72
#071b42
#36eaa2
#388b2f
#d2b33a
#1f66f3
#2e6f0f
#426d6f
#09d85e
#f8d9b6
#14e51f
#df90b0
#9c2db9
#daf260
#583d16
#60347f
#cbc619
リセット
配色をリセットする
生成カラーをリセットする
カラーコードの入力
上の配色ジェネレーターでカラーコーディネートしたいカラーコードをお持ちの場合は、下の欄に入力してください。
配色ジェネレーターについて
お好みの色の配色パターンを生成します。色の組み合わせやカラーコーディネートを知りたい方におすすめです。
選択カラー
#ff0000
配色1にする
配色2にする
配色3にする
配色4にする
生成カラーにする
生成カラー
#0080ff
配色1にする
配色2にする
配色3にする
配色4にする
配色1
#003366
配色2
#006699
配色3
#ff9900
配色4
#ffffff