主要SNSロゴの最新カラーコードと利用規約まとめ30選【2020年版】

SNS & WEB SERVICE COLOR CODE

サイトやブログを作っていると、FacebookやTwitterのアイコンを配置したい時に、各ブランドの公式カラーコードを調べることが多々あると思います。

使用する度に、SNSの公式サイトを検索して、記載されているカラーコードを確認したり、画像から色をスポイトで取ったりするのは、毎回手間が掛かってしまい、かなり面倒ですよね。

なので、SNSロゴとwebサービスのカラーコードを、この記事だけで完結できるように掲載することにしました。

また、ロゴを使用する際の利用規約と、Font Awesome(version4.7及びversion5)の使用コードも一緒にご紹介します。
サイトやブログを作る上で役に立つと思うので、ぜひ参考にしてみてください。

※カラーコードやFont Awesomeの利用コードは2020年1月16日現在のものです。今後、変更される可能性もございます。
※公式サイトでカラーコードの記載がなかったものに関しては、画像から色をスポイトで取得したカラーコードを記載しております。正式な色と微妙に差がある恐れもございますので、予めご了承ください。

主要SNSロゴの最新カラーコードと利用規約をまとめて30個ご紹介します

主要SNS・webサービスのカラーコードなどの情報は下記の内容になります。

Facebook

カラーコード : #1877f2
RGB : 24,119,242
公式ガイドラインページ : https://ja.facebookbrand.com/facebookapp/
Font Awesome ver5 : <i class=”fab fa-facebook-f”></i>
Font Awesome ver4.7 : <i class=”fa fa-facebook” aria-hidden=”true”></i>

旧 Facebook

カラーコード : #3C5A99
RGB : 60,90,153
利用規約に関しては、新しいFacebookページのガイドラインをご確認ください。

Twitter

カラーコード : #1da1f2
RGB : 29,161,242
公式ガイドラインページ : https://about.twitter.com/ja/company/brand-resources.html
Font Awesome ver5 : <i class=”fab fa-twitter”></i>
Font Awesome ver4.7 : <i class=”fa fa-twitter” aria-hidden=”true”></i>

Instagram

カラーコード : #5f4cc9 , #d22e90 , #faa241 ※画像の左から順
RGB : 95,76,201 210,46,144 250,162,65
公式ガイドラインページ : https://en.instagram-brand.com/assets/icons
Font Awesome ver5 : <i class=”fab fa-instagram”></i>
Font Awesome ver4.7 : <i class=”fa fa-instagram” aria-hidden=”true”></i>

単色ではないため、公式サイトに掲載されているロゴの色が濃い3箇所をスポイトで抽出しました。
ガイドラインページで掲載されていた画像で単色で使用されていたカラーコードは #f00075 でした。

Youtube

カラーコード : #cd201f
RGB : 205,32,31
公式ガイドラインページ : https://www.youtube.com/intl/ja/about/brand-resources/#logos-icons-colors
Font Awesome ver5 : <i class=”fab fa-youtube”></i>
Font Awesome ver4.7 : <i class=”fa fa-youtube-play” aria-hidden=”true”></i>

LINE

カラーコード : #00b900
RGB : 0,185,0
公式ガイドラインページ : https://line.me/ja/logo
Font Awesome ver5 : <i class=”fab fa-line”></i>
Font Awesome ver4.7 : アイコンがありませんでした

はてなブックマーク

カラーコード : #00a4de
RGB : 0,164,222
公式ガイドラインページ : https://hatenacorp.jp/press/resource
Font Awesome ver5 : アイコンがありませんでした
Font Awesome ver4.7 : アイコンがありませんでした

Hatena

カラーコード : #5279e7
RGB : 82,121,231
公式ガイドラインページ : https://hatenacorp.jp/press/resource
Font Awesome ver5 : アイコンがありませんでした
Font Awesome ver4.7 : アイコンがありませんでした

feedly

カラーコード : #6cc655
RGB : 108,198,85
公式ガイドラインページ : https://www.feedly.com/factory.html
Font Awesome ver5 : アイコンがありませんでした
Font Awesome ver4.7 : アイコンがありませんでした

Pinterest

カラーコード : #bd081c
RGB : 189,8,28
公式ガイドラインページ : https://business.pinterest.com/ja/pinterest-brand-guidelines
Font Awesome ver5 : <i class=”fab fa-pinterest”></i>
Font Awesome ver4.7 : <i class=”fa fa-pinterest” aria-hidden=”true”></i>

Evernote

カラーコード : #2dbe60
RGB : 45,190,96
公式ガイドラインページ : https://evernote.com/intl/jp/legal/trademark-use
Font Awesome ver5 : <i class=”fab fa-evernote”></i>
Font Awesome ver4.7 : アイコンがありませんでした

Google

カラーコード : #4285f4 , #0f9d58 , #f4b400 , #db4437 ※画像の左から順
RGB : 66,133,244 15,158,88 24,180,0 219,68,55
公式ガイドラインページ : https://developers.google.com/identity/branding-guidelines?hl=ja
Font Awesome ver5 ; <i class=”fab fa-google”></i>
Font Awesome ver4.7 ; <i class=”fa fa-google” aria-hidden=”true”></i>

Google+

カラーコード : #dd5144
RGB : 221,81,68
公式ガイドラインページ : https://developers.google.com/identity/branding-guidelines
Font Awesome ver5 : <i class=”fab fa-google-plus-g”></i>
Font Awesome ver4.7 : <i class=”fa fa-google-plus” aria-hidden=”true”></i>

Internet Explorer

カラーコード : #0078d7
RGB : 0,120,215
公式ガイドラインページ : https://query.prod.cms.rt.microsoft.com/cms/api/am/binary/RE1qeRY
Font Awesome ver5 : <i class=”fab fa-internet-explorer”></i>
Font Awesome ver4.7 : <i class=”fa fa-internet-explorer” aria-hidden=”true”></i>

Microsoft Edge

カラーコード : #0078d7
RGB : 0,120,215
公式ガイドラインページ : https://query.prod.cms.rt.microsoft.com/cms/api/am/binary/RE1q9FT
Font Awesome ver5 : <i class=”fab fa-edge”></i>
Font Awesome ver4.7 : <i class=”fa fa-edge” aria-hidden=”true”></i>

Yahoo!Japan

カラーコード : #ff0027
RGB : 255,0,39
公式ガイドラインページ : https://about.yahoo.co.jp/info/copyright.html
Font Awesome ver5 : <i class=”fab fa-yahoo”></i>
Font Awesome ver4.7 : <i class=”fa fa-yahoo” aria-hidden=”true”></i>

Dropbox

カラーコード : #007ee5
RGB : 0,126,229
公式ガイドラインページ : https://www.dropbox.com/branding
Font Awesome ver5 : <i class=”fab fa-dropbox”></i>
Font Awesome ver4.7 : <i class=”fa fa-dropbox” aria-hidden=”true”></i>

Amazon

カラーコード : #ff9900
RGB : 0,126,229
公式ガイドラインページ : https://images-na.ssl-images-amazon.com/images/G/01/AdvertisingSite/pdfs/AmazonBrandUsageGuidelines.pdf
Font Awesome ver5 : <i class=”fab fa-amazon”></i>
Font Awesome ver4.7 : <i class=”fa fa-amazon” aria-hidden=”true”></i>

WordPress

カラーコード : #21759b , #464646 ※画像の左から順
RGB : 33,117,155 70,70,70
公式ガイドラインページ : https://wordpress.org/about/logos/
Font Awesome ver5 : <i class=”fab fa-wordpress”></i>
Font Awesome ver4.7 : <i class=”fa fa-wordpress” aria-hidden=”true”></i>

tumblr

カラーコード : #39475d
RGB : 57,71,93
公式ガイドラインページ : https://www.tumblr.com/logo
Font Awesome ver5 : <i class=”fab fa-tumblr”></i>
Font Awesome ver4.7 : <i class=”fa fa-tumblr” aria-hidden=”true”></i>

Vimeo

カラーコード : #1ab7ea
RGB : 26,183,234
公式ガイドラインページ : https://press.vimeo.com/brand-guidelines
Font Awesome ver5 : <i class=”fab fa-vimeo”></i>
Font Awesome ver4.7 : <i class=”fa fa-vimeo” aria-hidden=”true”></i>

mixi

カラーコード : #d9ba6a
RGB : 217,186,106
公式ガイドラインページ : http://developer.mixi.co.jp/about-platform/policies/image_guidelines/
Font Awesome ver5 : アイコンがありませんでした
Font Awesome ver4.7 : アイコンがありませんでした

GREE

カラーコード : #00a0dc
RGB : 0,160,220
公式ガイドラインページ : https://docs.developer.gree.net/ja/assets/doc/ja/terms/VisualIdentitySystemGuidelines_Vendors_v2.0.pdf
Font Awesome ver5 : アイコンがありませんでした
Font Awesome ver4.7 : アイコンがありませんでした

Skype

カラーコード : #00b0f0
RGB : 0,176,240
公式ガイドラインページ : https://www.skype.com/ja/legal/brand-guidelines/
Font Awesome ver5 : <i class=”fab fa-skype”></i>
Font Awesome ver4.7 : <i class=”fa fa-skype” aria-hidden=”true”></i>

Android

カラーコード : #77c159
RGB : 119,193,89
公式ガイドラインページ : https://developer.android.com/distribute/marketing-tools/brand-guidelines?hl=ja
Font Awesome ver5 : <i class=”fab fa-android”></i>
Font Awesome ver4.7 : <i class=”fa fa-android” aria-hidden=”true”></i>

カカオトーク

カラーコード : #fbe300 , #3b1e1e
RGB : 251,227,0 59,30,30
公式ガイドラインページ : http://www.kakaotalk.jp/terms/
Font Awesome ver5 : アイコンがありませんでした
Font Awesome ver4.7 : アイコンがありませんでした

Windows

カラーコード : #0078d7
RGB : 0,120,215
公式ガイドラインページ : https://query.prod.cms.rt.microsoft.com/cms/api/am/binary/RE1voQq
Font Awesome ver5 : <i class=”fab fa-windows”></i>
Font Awesome ver4.7 : <i class=”fa fa-windows” aria-hidden=”true”></i>

Microsoft

カラーコード : #f25022 , #7fba00 , #00a4ef , #ffb900
RGB : 242,80,34 127,186,0 0,164,23 255,185,0
公式ガイドラインページ : https://www.microsoft.com/ja-jp/mscorp/legal/trademarks-corplogo.aspx
Font Awesome ver5 : <i class=”fab fa-microsoft”></i>
Font Awesome ver4.7 : アイコンがありませんでした

Wix

カラーコード : #fbbd71 , #000000
RGB : 251,189,113 0,0,0
公式ガイドラインページ : https://ja.wix.com/about/design-assets
Font Awesome ver5 : <i class=”fab fa-wix”></i>
Font Awesome ver4.7 : アイコンがありませんでした

Pocket

カラーコード : #f04a5e
RGB : 240,74,94
公式ガイドラインページ : https://getpocket.com/tos
Font Awesome ver5 : <i class=”fab fa-get-pocket”></i>
Font Awesome ver4.7 : <i class=”fa fa-get-pocket” aria-hidden=”true”></i>

TripAdvisor

カラーコード : #f8c40f , #ef6945 , #00af87 , #000a12
RGB : 248,196,15 239,105,69 0,175,135 0,10,18
Font Awesome ver5 : <i class=”fab fa-tripadvisor”></i>
Font Awesome ver4.7 : <i class=”fa fa-tripadvisor” aria-hidden=”true”></i>

まとめ

主要なSNSアイコンおよびwebサービスのカラーコードを30個ご紹介しました。
普段意識せずに各ブランドのロゴを見ていますが、有名なロゴの中にも似た色を使っているものって結構あるんだなと感じました。

今の時代はSNSも溢れていて、カラーコードを各ブランドごとにメモして置くのも手間が掛かって大変だと思います。
カラーコードをまた利用される事がある方は、ぜひブックマークしてこの記事をご利用いただければと思います。