>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→

PR

配色パターンのサンプル集・３～５色で計２３パターン

Color

2019.06.10

この記事は約8分で読めます。

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

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

マカロンビビッドパステル和色セーフ色名赤桃青紫黄橙緑茶黒

３色✖８パターン

#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)`

４色✖１０パターン

#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)`

５色✖５パターン

#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配色に迷ったら！配色パターンが簡単に探せて使いやすいサイト６選

配色パターンを提案したり作成できるツールなどのあるサイトは多数ありますが、今回は　簡単で使いやすい　にこだわった厳選サイト６選の紹介です。当サイトでもいくつか配色パターンサンプルがありますので以下も参考にして下さい。国内サイト Nip...

コメント

タイトルとURLをコピーしました