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

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

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

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

 

 

コピー方法

以下のようなコードの上にカーソルを載せると「copy」ボタンが出ます。

4286_16

 

3色✖7パターン

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

4色✖10パターン

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

5色✖3パターン

 

 #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)
#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/ rgb(125, 165, 170)
 #7177a7/ rgb(113, 119, 167)
 #7d5a94/ rgb(125, 90, 148)
 #c26c99/ rgb(194, 108, 153)
 #df8890/ rgb(223, 136, 144)
#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/ rgb(255, 247, 198)
 #c4be99/ rgb(196, 190, 153)
 #666e82/ rgb(102, 110, 130)
 #414d6b/ rgb(65, 77, 107)
 #2c364c/ rgb(44, 54, 76)
#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)

 

 

 

  • WordPressランキング
  • にほんブログ村 IT技術ブログ Webサイト構築へ

Color

Posted by 綾糸