配色パターンのサンプル集・3~5色で計23パターン

Webサイトのカラーなどに使える配色パターンのサンプル集です。

その他のカラーコードは以下も参考にして下さい。

マカロンビビッドパステル和色セーフ色名

 

3色✖8パターン

#63223c #a5494d #e5a267
#63223c/ rgb(99, 34, 60)
#a5494d/ rgb(165, 73, 77)
#e5a267/ rgb(229, 162, 103)

 

#b41b47 #fe8ca0 #e7cdc6
#b41b47/ rgb(180, 27, 71)
#fe8ca0/ rgb(254, 140, 160)
#e7cdc6/ rgb(231, 205, 198)

 

#cee3c2 #b2ca7e #66903c
#cee3c2/ rgb(206, 227, 194)
#b2ca7e/ rgb(178, 202, 126)
#66903c/ rgb(102, 144, 60)

 

#c4be99 #8fb0a9 #558b73
#c4be99/ rgb(196, 190, 153)
#8fb0a9/ rgb(143, 176, 169)
#558b73/ rgb(85, 139, 115)

 

#81a0cc #a2c8e0 #d3eafd
#81a0cc/ rgb(129, 160, 204)
#a2c8e0/ rgb(162, 200, 224)
#d3eafd/ rgb(211, 234, 253)

 

#c3a2a9 #6a6792 #2d3b6f
#c3a2a9/ rgb(195, 162, 169)
#6a6792/ rgb(106, 103, 146)
#2d3b6f/ rgb(45, 59, 111)

 

#006cb7 #f03b62 #f0ddbc
#006cb7/ rgb(0, 108, 183)
#f03b62/ rgb(240, 59, 98)
#f0ddbc/ rgb(240, 221, 188)

 

#4c3018 #764c22 #f8f5b0
#4c3018/ rgb(76,48,24)
#764c22/ rgb(118,76,34)
#f8f5b0/ rgb(248,245,176)

 

4色✖10パターン

 

#fbd266 #8fb0a9
#d76735 #f2d8b3
#fbd266/ rgb(251, 210, 102)
#8fb0a9/ rgb(143, 176, 169)
#d76735/ rgb(215, 103, 53)
#f2d8b3/ rgb(242, 216, 179)

 

#ff935e #7f6355
#ffc6aa #7f4a2f
#ff935e/ rgb(255, 147, 94)
#7f6355/ rgb(127, 99, 85)
#ffc6aa/ rgb(255, 198, 170)
#7f4a2f/ rgb(127, 74, 47)

 

#ce3120 #f56720
#e6880d #742d14
#ce3120/ rgb(206, 49, 32)
#f56720/ rgb(245, 103, 32)
#e6880d/ rgb(230, 136, 13)
#742d14/ rgb(116, 45, 20)

 

#36362b #5d917d
#e5d3a8 #825534
#36362b/ rgb(54, 54, 43)
#5d917d/ rgb(93, 145, 125)
#e5d3a8/ rgb(229, 211, 168)
#825534/ rgb(130, 85, 52)

 

#f2cab3 #d98b8b
#bf4b75 #644073
#f2cab3/ rgb(242, 202, 179)
#d98b8b/ rgb(217, 139, 139)
#bf4b75/ rgb(191, 75, 117)
#644073/ rgb(100, 64, 115)

 

#7e899c #5f6187
#908b9f #eae0df
#7e899c/ rgb(126, 137, 156)
#5f6187/ rgb(95, 97, 135)
#908b9f/ rgb(144, 139, 159)
#eae0df/ rgb(234, 224, 223)

 

#d9a6b7 #dacedc
#a2c0da #baeefc
#d9a6b7/ rgb(217, 166, 183)
#dacedc/ rgb(218, 206, 220)
#a2c0da/ rgb(162, 192, 218)
#baeefc/ rgb(186, 238, 252)

 

#5d5855 #89817f
#b99d9a #eec0c0
#5d5855/ rgb(93, 88, 85)
#89817f/ rgb(137, 129, 127)
#b99d9a/ rgb(185, 157, 154)
#eec0c0/ rgb(238, 192, 192)

 

#231e18 #552630
#a2526b #e4a39f
#231e18/ rgb(35, 30, 24)
#552630/ rgb(85, 38, 48)
#a2526b/ rgb(162, 82, 107)
#e4a39f/ rgb(228, 163, 159)

 

#585f33 #87b390
#a1a781 #e4a39f
#585f33/ rgb(88, 95, 51)
#87b390/ rgb(135, 179, 144)
#a1a781/ rgb(161, 167, 129)
#e4a39f/ rgb(228, 163, 159)

 

5色✖5パターン

 

#22110a #753921 #ab7948
#c69665 #f6dbbd
#22110a/ rgb(34, 17, 10)
#753921/ rgb(117, 57, 33)
#ab7948/ rgb(171, 121, 72)
#c69665/ rgb(198, 150, 101)
#f6dbbd/ rgb(246, 219, 189)

 

#7da5aa #7177a7 #7d5a94
#c26c99 #df8890
#7da5aa/ rgb(125, 165, 170)
#7177a7/ rgb(113, 119, 167)
#7d5a94/ rgb(125, 90, 148)
#c26c99/ rgb(194, 108, 153)
#df8890/ rgb(223, 136, 144)

 

#fff7c6 #c4be99 #666e82
#414d6b #2c364c
#fff7c6/ rgb(255, 247, 198)
#c4be99/ rgb(196, 190, 153)
#666e82/ rgb(102, 110, 130)
#414d6b/ rgb(65, 77, 107)
#2c364c/ rgb(44, 54, 76)

 

#3a2b18 #3b3c37 #bfb697
#d6cdac #7a1331
#3a2b18/ rgb(58, 43, 24)
#3b3c37/ rgb(59,60,55)
#bfb697/ rgb(191,182,151)
#d6cdac/ rgb(214,205,172)
#7a1331/ rgb(122,19,49)

 

#fdfcfa #85a6b9 #e8989b
#8b9d61 #4b4643
#fdfcfa/ rgb(253,252,250)
#85a6b9/ rgb(133,166,185)
#e8989b/ rgb(232,152,155)
#8b9d61/ rgb(139,157,97)
#4b4643/ rgb(75,70,67)

 

 

以下も参考にして下さい。

Web配色に迷ったら!配色パターンが簡単に探せて使いやすいサイト6選
配色パターンを提案したり作成できるツールなどのあるサイトは多数ありますが、 今回は 簡単で使いやすい にこだわった厳選サイト6選の紹介です。 当サイトでもいくつか配色パターンサンプルがありますので以下も参考にして下さい。 国内サイト Nip...
綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています