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

2017年8月3日

ニュース

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

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

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

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

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

主要SNS＆Webサービスのブランドカラーコード

1. Instagram

https://en.instagram-brand.com/assets

カラーコード：#
                  4C
                64D3　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/?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

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
薄ピンク……カラーコード：#EA
                  4C
                89　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 などの情報も含んでおりますが、使用に関して禁止事項を設けている場合がございます。ご利用の際などは、必ず配布ページや公式ホームページにて規約などをご確認ください。
　　