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

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

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

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

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

目次

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

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

1. LINE（ライン）

https://line.me/en/logo

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

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

2. 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色を抽出し確認しました。
　　

3. Facebook（フェイスブック）

カラーコード：1877f2
RGB：60,90,153

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

4. Twitter（ツイッター）

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

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

Twitterのアイコンに使用されている水色のカラーコードです。参考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選

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