保存必須！代表的なSNS＆Webサービスのブランドカラーコード29選

デザインに関する業務をしていると、よくWebサービスやSNSなどのブランドカラーを調べることがあります。そこまで頻度は高くないとはいえ、毎回調べるのは面倒だと感じた経験がある方も多いのではないでしょうか。

また、同じサービスでも検索すると過去のデザインが含まれるなど複数のカラーコードが出てくることがあり、混乱してしまいがちです。

そこで今回は、主要なSNS＆Webサービスのブランドカラーコードをまとめてご紹介します。
今後カラーコードを使用する機会がある方は、ぜひ参考にしてみてください。

※カラーコードは2017年7月29日時点でのものです。今後変更の可能性がございます

注意：
公式でカラーコードを記載しているものもありましたが、明記がないものなど、中には画像からスポイトで色を抽出しているものがございます。微妙に色が異なる恐れもありますので、ご了承ください。

目次

1. 主要SNS＆Webサービスのブランドカラーコード
   1. Instagram
   2. Facebook
   3. Twitter
   4. LINE
   5. tumblr
   6. Youtube
   7. Google+
   8. Flickr
   9. Hatena
   10. Dropbox
   11. Evernote
   12. Vimeo
   13. WordPress
   14. Amazon
   15. feedly
   16. Snapchat
   17. Pinterest
   18. mixi
   19. GREE
   20. Google
   21. Android
   22. カカオトーク
   23. Windows
   24. Bing
   25. Skype
   26. Yahoo!Japan
   27. Dribbble
   28. はてなブックマーク
   29. Twitch
2. まとめ

主要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

https://en.facebookbrand.com/

カラーコード：#3C5A99
RGB：60,90,153

Facebookのアイコンに使用されている紺色のカラーコードです。参考URLで配布しているアイコンで確認しました。
　　

3. Twitter

https://brand.twitter.com/ja.html

カラーコード：#1DA1F2　
RGB：29,161,242

Twitterのアイコンに使用されている水色のカラーコードです。参考URLで配布しているアイコンで確認しました。
　　

4. LINE

https://line.me/en/logo

カラーコード：#00B900
RGB：0,185,0

LINEのロゴやアイコンに使用されている緑色のカラーコードです。参考URLで配布しているアイコンで確認しました。
　　

5. tumblr

https://www.tumblr.com/logo

カラーコード：#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

http://www.hatena.ne.jp/

カラーコード：#5279E7
RGB：82,121,231

Hatenaに使用されている青色のカラーコードです。画像からスポイトツールで色を抽出しています。
　　

10. Dropbox

https://www.dropbox.com/branding

カラーコード：#007EE5
RGB：0,126,229

Dropboxのロゴに使用されている、青色のカラーコードです。参考URLで配布しているアイコンで確認しました。
　　

11. Evernote

https://evernote.com/intl/jp/

カラーコード：#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

https://images-na.ssl-images-amazon.com/images/G/01/AdvertisingSite/pdfs/AmazonBrandUsageGuidelines.pdf

オレンジ色……カラーコード：#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

http://gree.jp/

カラーコード：#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/?sw_fnr_id=2797336852&fnr_t=0&brand_redir=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

https://www.yahoo.co.jp/

カラーコード：#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. はてなブックマーク

http://b.hatena.ne.jp/

カラーコード：#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やブランドのカラーコードを紹介しています。頻繁にカラーコードが必要な方はこちらもチェックしておくといいのではないでしょうか。

BrandColorsについてはこちら

なお、今回取り上げた中には公式ロゴの配布URLなどの情報も含んでおりますが、使用に関して禁止事項を設けている場合がございます。ご利用の際などは、必ず配布ページや公式ホームページにて規約などをご確認ください。
　　

画像編集についてさらにチェック

ユーザーの「信頼感」を高めて効果アップ！クリックしたくなるクリエイティブの作り方とは？

広告クリエイティブに関わる方は、日々クリエイティブの改善に励んでいることかと思います。 今回はWebクリエイティブプロダクションである株式会社インフォデックスが、バナーのデザインやコピーについて意識調査を実施した結果を元に、クリックしたくなるクリエイティブを作成するコツを紹介します。

無料版なのに高機能！「もう手放せない」画像加工・編集できるフリーソフト40選

今回は、最新の画像加工フリーソフトをご紹介します。 無料でも高機能なソフトがたくさんありますので、プロ向けソフトの購入が難しい方、手軽に使えるソフトを探している方はぜひチェックしてみてください。