保存必須！代表的なSNS＆Webサービスのブランドカラーコード29選
- 2017年8月3日
- 3,137
ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します！
>> 著者詳細はこちら
デザインに関する業務をしていると、よくWebサービスやSNSなどのブランドカラーを調べることがあります。そこまで頻度は高くないとはいえ、毎回調べるのは面倒だと感じた経験がある方も多いのではないでしょうか。
また、同じサービスでも検索すると過去のデザインが含まれるなど複数のカラーコードが出てくることがあり、混乱してしまいがちです。
そこで今回は、主要なSNS＆Webサービスのブランドカラーコードをまとめてご紹介します。
今後カラーコードを使用する機会がある方は、ぜひ参考にしてみてください。
※カラーコードは2017年7月29日時点でのものです。今後変更の可能性がございます
注意：
公式でカラーコードを記載しているものもありましたが、明記がないものなど、中には画像からスポイトで色を抽出しているものがございます。微妙に色が異なる恐れもありますので、ご了承ください。
主要SNS＆Webサービスのブランドカラーコード
1. Instagram
https://en.instagram-brand.com/assets
カラーコード：#4C64D3 RGB：76,100,21
カラーコード：#CF2E92 RGB：207,46,146
カラーコード：#F26939 RGB：242,105,57
カラーコード：#FFDD83 RGB：255,221,131
※画像左から
参考URLにあるグラデーションのアイコン画像から、スポイトツールで4色を抽出し確認しました。
2. Facebook
カラーコード：#3C5A99
RGB：60,90,153
Facebookのアイコンに使用されている紺色のカラーコードです。参考URLで配布しているアイコンで確認しました。
3. Twitter
https://brand.twitter.com/ja.html
カラーコード：#1DA1F2
RGB：29,161,242
Twitterのアイコンに使用されている水色のカラーコードです。参考URLで配布しているアイコンで確認しました。
4. LINE
カラーコード：#00B900
RGB：0,185,0
LINEのロゴやアイコンに使用されている緑色のカラーコードです。参考URLで配布しているアイコンで確認しました。
5. tumblr
カラーコード：#39475D
RGB：57,71,93
tumblrのロゴに使用されている、落ち着いたネイビー色のカラーコードです。参考URLで配布しているアイコンのPNG画像から、スポイトツールで色を抽出しています。
6. Youtube
https://www.youtube.com/intl/ja/yt/about/brand-resources/#logos-icons-colors
赤……カラーコード：#DA1725 RGB：218,23,37
黒……カラーコード：#050000 RGB：5,0,0
Youtubeのロゴに使用されている、赤色、黒のカラーコードです。参考URLで配布しているアイコンで確認しました。
7. Google+
https://developers.google.com/identity/branding-guidelines
カラーコード：#DD5144
RGB：221,81,68
Google+のロゴに使用されている、赤色のカラーコードです。参考URLで配布しているアイコンで確認しました。
8. Flickr
https://www.facebook.com/flickr
ピンク……カラーコード：#FF0080 RGB：255,0,128
青……カラーコード：#0D65D3 RGB：13,101,211
Flickrのアイコンなどに使用されているピンク、青のカラーコードです。画像からスポイトツールで色を抽出しています。
9. Hatena
カラーコード：#5279E7
RGB：82,121,231
Hatenaに使用されている青色のカラーコードです。画像からスポイトツールで色を抽出しています。
10. Dropbox
https://www.dropbox.com/branding
カラーコード：#007EE5
RGB：0,126,229
Dropboxのロゴに使用されている、青色のカラーコードです。参考URLで配布しているアイコンで確認しました。
11. Evernote
カラーコード：#2DBE60
RGB：45,190,96
参考URL内のEvernoteロゴで確認した、緑色のカラーコードです。画像からスポイトツールで色を抽出しています。
12. Vimeo
https://press.vimeo.com/brand-guidelines
カラーコード：#1AB7EA
RGB：26,183,234
Vimeoのロゴに使用されている、青色のカラーコードです。参考URLで配布しているアイコンで確認しました。
13. WordPress
https://wordpress.org/about/logos/
青色……カラーコード：#21759B RGB：33,117,155
グレー色……カラーコード：#464646 RGB：70,70,70
オレンジ色……カラーコード：#D54E21 RGB：213, 78, 33
WordPressのロゴなどに使用されている、青色、グレー、オレンジ色のカラーコードです。参考URLに記載してあるカラーコードにて確認しました。
14. Amazon
オレンジ色……カラーコード：#FF9900 RGB：255,153,0
青色……カラーコード：#146EB4 RGB：20,110,180
Amazonのロゴなどに使用されている、青色、オレンジ色のカラーコードです。参考URLに記載してあるカラーコードにて確認しました。
15. feedly
http://www.feedly.com/factory.html
カラーコード：#6CC655 RGB：108,198,85
feedlyのボタンなどに使用されている、緑色のカラーコードです。参考URLで配布しているボタンで確認しました。
16. Snapchat
https://www.snap.com/ja-JP/brand-guidelines/
カラーコード：#FFFC00
RGB：255,252,0
Snapchatのロゴなどに使用されている、黄色のカラーコードです。参考URLに記載してあるカラーコードにて確認しました。
17. Pinterest
https://business.pinterest.com/en/brand-guidelines
カラーコード：#BD081C
RGB：189,8,28
Pinterestのロゴなどに使用されている、赤色のカラーコードです。参考URLに記載してあるカラーコードにて確認しました。
18. mixi
http://developer.mixi.co.jp/about-platform/policies/image_guidelines/
カラーコード：#D9BA6A
RGB：217,186,106
mixiのアイコンなどに使用されている、ベージュ色のカラーコードです。参考URL内の画像から、スポイトツールで色を抽出し確認しました。
19. GREE
カラーコード：#00A0DC
RGB：0,160,220
GREEのアイコンなどに使用されている、水色のカラーコードです。参考URL内のアイコン画像から、スポイトツールで色を抽出し確認しました。
20. Google
https://design.google/library/evolving-google-identity/
青色……カラーコード：#4285F4 RGB：66,133,244
緑色……カラーコード：#0F9D58 RGB：15,158,88
黄色……カラーコード：#F4B400 RGB：24,180,0
赤色……カラーコード：#DB4437 RGB：219,68,55
Googleのロゴなどに使用されている、4色のカラーコードです。参考URLに記載してあるカラーコードにて確認しました。
21. Android
https://www.android.com/intl/ja_jp/
カラーコード：#77C159
RGB：119,193,89
Androidのロゴに使用している、緑色のカラーコードです。参考URL内のロゴ画像から、スポイトツールで色を抽出し確認しました。
22. カカオトーク
https://play.google.com/store/apps/details?id=com.kakao.talk&hl=ja
黄色……カラーコード：#FBE300 RGB：251,227,0
茶色……カラーコード：#3B1E1E RGB：59,30,30
カカオトークのアイコンに使用している、黄色、茶色のカラーコードです。参考URL内のアイコン画像から、スポイトツールで色を抽出し確認しました。
23. Windows
https://www.microsoft.com/ja-jp/windows/
カラーコード：#0078D7
RGB：0,120,215
参考URL内のロゴ画像から、スポイトツールで色を抽出し確認しました。
24. Bing
https://www.facebook.com/Bing.jp/?swfnrid=2797336852&fnrt=0&brandredir=70424008437
カラーコード：#008274
RGB：0,130,116
Bingのロゴに使用している、緑色のカラーコードです。参考URL内のロゴ画像から、スポイトツールで色を抽出し確認しました。
25. Skype
https://www.skype.com/ja/legal/brand-guidelines/
カラーコード：#00B0F0
RGB：0,176,240
Skypeのロゴに使用している、水色のカラーコードです。参考URL内のアイコン画像から、スポイトツールで色を抽出し確認しました。
26. Yahoo!Japan
カラーコード：#FF0027
RGB：255,0,39
Yahoo!Japanのロゴに使用している、赤色のカラーコードです。参考URL内のロゴ画像から、スポイトツールで色を抽出し確認しました。
27. Dribbble
https://www.facebook.com/dribbble/
濃ピンク……カラーコード：#C32361 RGB：195,35,97
薄ピンク……カラーコード：#EA4C89 RGB：234,76,137
Dribbbleのロゴに使用しているカラーコードです。参考URL内のロゴ画像から、スポイトツールで色を抽出し確認しました。
28. はてなブックマーク
カラーコード：#00A4DE
RGB：0,164,222
はてなブックマークのアイコンなどに使用している、水色のカラーコードです。参考URL内のアイコン画像から、スポイトツールで色を抽出し確認しました。
29. Twitch
https://www.twitch.tv/p/brand/
カラーコード：#6441A4
RGB：100, 65, 164
Twitchのロゴなどに使用されている、紫色のカラーコードです。参考URLに記載してあるカラーコードにて確認しました。
まとめ
以上、国内の代表的なSNS＆Webサービスのブランドカラーコードを29個まとめてご紹介しました。いかがでしたでしょうか。
たまに使う機会がある、都度必要になった時に調べているという方は、ぜひブックマークしておくことをオススメします。ブランドカラーコードを知りたい時に、すぐにわかって便利です。
ちなみに「BrandColors」というサービスでは、様々なSNSやブランドのカラーコードを紹介しています。頻繁にカラーコードが必要な方はこちらもチェックしておくといいのではないでしょうか。
なお、今回取り上げた中には公式ロゴの配布URLなどの情報も含んでおりますが、使用に関して禁止事項を設けている場合がございます。ご利用の際などは、必ず配布ページや公式ホームページにて規約などをご確認ください。
