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

2019-06-10Color

配色パターン

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)

 

 

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

 

 

関連記事

Color

Posted by 綾糸