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

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

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

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

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

3. Facebook(フェイスブック)

fb_color.jpg

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

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

4. Twitter(ツイッター)

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

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

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

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