デザインに関する業務をしていると、よく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

instagram.jpg
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

facebook.jpg
https://en.facebookbrand.com/

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

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

3. Twitter

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

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

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

4. LINE

LINE
https://line.me/en/logo

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

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

5. tumblr

tumblr
https://www.tumblr.com/logo

カラーコード:#39475D
RGB:57,71,93

tumblrのロゴに使用されている、落ち着いたネイビー色のカラーコードです。参考URLで配布しているアイコンのPNG画像から、スポイトツールで色を抽出しています。
  

6. Youtube

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+

google_.jpg
https://developers.google.com/identity/branding-guidelines

カラーコード:#DD5144
RGB:221,81,68

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

8. Flickr

Flickr.jpg
https://www.facebook.com/flickr

ピンク……カラーコード:#FF0080 RGB:255,0,128
青……カラーコード:#0D65D3 RGB:13,101,211

Flickrのアイコンなどに使用されているピンク、青のカラーコードです。画像からスポイトツールで色を抽出しています。
  

9. Hatena

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

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

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

10. Dropbox

Dropbox
https://www.dropbox.com/branding

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

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

11. Evernote

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

カラーコード:#2DBE60
RGB:45,190,96

参考URL内のEvernoteロゴで確認した、緑色のカラーコードです。画像からスポイトツールで色を抽出しています。
  

12. Vimeo

Vimeo
https://press.vimeo.com/brand-guidelines

カラーコード:#1AB7EA
RGB:26,183,234

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

13. WordPress

wordpress.jpg
https://wordpress.org/about/logos/

青色……カラーコード:#21759B RGB:33,117,155
グレー色……カラーコード:#464646 RGB:70,70,70
オレンジ色……カラーコード:#D54E21 RGB:213, 78, 33

WordPressのロゴなどに使用されている、青色、グレー、オレンジ色のカラーコードです。参考URLに記載してあるカラーコードにて確認しました。
  

14. Amazon

amazon.jpg
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

feedly
http://www.feedly.com/factory.html

カラーコード:#6CC655 RGB:108,198,85

feedlyのボタンなどに使用されている、緑色のカラーコードです。参考URLで配布しているボタンで確認しました。
  

16. Snapchat

Snapchat
https://www.snap.com/ja-JP/brand-guidelines/

カラーコード:#FFFC00
RGB:255,252,0

Snapchatのロゴなどに使用されている、黄色のカラーコードです。参考URLに記載してあるカラーコードにて確認しました。
  

17. Pinterest

Pinterest
https://business.pinterest.com/en/brand-guidelines

カラーコード:#BD081C
RGB:189,8,28

Pinterestのロゴなどに使用されている、赤色のカラーコードです。参考URLに記載してあるカラーコードにて確認しました。
  

18. mixi

mixi.jpg
http://developer.mixi.co.jp/about-platform/policies/image_guidelines/

カラーコード:#D9BA6A
RGB:217,186,106

mixiのアイコンなどに使用されている、ベージュ色のカラーコードです。参考URL内の画像から、スポイトツールで色を抽出し確認しました。
  

19. GREE

gree.jpg
http://gree.jp/

カラーコード:#00A0DC
RGB:0,160,220

GREEのアイコンなどに使用されている、水色のカラーコードです。参考URL内のアイコン画像から、スポイトツールで色を抽出し確認しました。
  

20. Google

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

android
https://www.android.com/intl/ja_jp/

カラーコード:#77C159
RGB:119,193,89

Androidのロゴに使用している、緑色のカラーコードです。参考URL内のロゴ画像から、スポイトツールで色を抽出し確認しました。
  

22. カカオトーク

cacaotalk.jpg
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

Windows
https://www.microsoft.com/ja-jp/windows/

カラーコード:#0078D7
RGB:0,120,215

参考URL内のロゴ画像から、スポイトツールで色を抽出し確認しました。
  

24. Bing

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

Skype
https://www.skype.com/ja/legal/brand-guidelines/

カラーコード:#00B0F0
RGB:0,176,240

Skypeのロゴに使用している、水色のカラーコードです。参考URL内のアイコン画像から、スポイトツールで色を抽出し確認しました。
  

26. Yahoo!Japan

Yahoo!Japan
https://www.yahoo.co.jp/

カラーコード:#FF0027
RGB:255,0,39

Yahoo!Japanのロゴに使用している、赤色のカラーコードです。参考URL内のロゴ画像から、スポイトツールで色を抽出し確認しました。
  

27. Dribbble

dribble.jpg
https://www.facebook.com/dribbble/

濃ピンク……カラーコード:#C32361 RGB:195,35,97
薄ピンク……カラーコード:#EA4C89 RGB:234,76,137

Dribbbleのロゴに使用しているカラーコードです。参考URL内のロゴ画像から、スポイトツールで色を抽出し確認しました。
  

28. はてなブックマーク

はてなブックマーク.jpg
http://b.hatena.ne.jp/

カラーコード:#00A4DE
RGB:0,164,222

はてなブックマークのアイコンなどに使用している、水色のカラーコードです。参考URL内のアイコン画像から、スポイトツールで色を抽出し確認しました。
  

29. Twitch

twitch.jpg
https://www.twitch.tv/p/brand/

カラーコード:#6441A4 
RGB:100, 65, 164

Twitchのロゴなどに使用されている、紫色のカラーコードです。参考URLに記載してあるカラーコードにて確認しました。
  

まとめ

以上、国内の代表的なSNS&Webサービスのブランドカラーコードを29個まとめてご紹介しました。いかがでしたでしょうか。

たまに使う機会がある、都度必要になった時に調べているという方は、ぜひブックマークしておくことをオススメします。ブランドカラーコードを知りたい時に、すぐにわかって便利です。

ちなみに「BrandColors」というサービスでは、様々なSNSやブランドのカラーコードを紹介しています。頻繁にカラーコードが必要な方はこちらもチェックしておくといいのではないでしょうか。

BrandColorsについてはこちら

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

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

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

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

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

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

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

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