Navigate

SNSなどのカラーコードとアイコンフォントまとめ

 

Twitter・Facebook・LINE・Instagram・YouTube・Tumblr・LinkedIn・はてなブックマーク・feedly・RSS・mixi・Skype・Dropbox・Vimeo・Yahoo・Amazon・楽天・WordPress・Google・windows・android・HTML5・css3

 

その他のカラーコード

ブランドカラー

SNS等企業ネットショップオリンピックプロ野球MLBJリーグ競輪・競馬地下鉄私鉄(1)私鉄(2)JR新幹線国旗

色別カラーコード

マカロンビビッドパステル伝統色和色セーフ色名 赤桃青紫黄橙緑茶黒 配色パターンサンプル

 

ブログやサイト構築で何かにつけ、色やアイコンフォントを探す機会の多いブランドカラーのカラーコードと、アイコンフォントのコードをまとめました。
アイコンフォントは「Font Awesome」のフリーフォントです。

Font Awesomeアイコンフォントの使い方については以下をご覧ください。

Font Awesomeアイコンフォントのサイズ・向き等の変更とコードが消える対処法
当サイトでは　Ver.5以降を使用しており、記事もすべて同様のバージョンでの利用に基づいています。Ver.4.7を使っておられる方で、アイコンフォントを探したい場合は以下をご覧ください。Font Awesome Ver.6　について2020...
ayaito.net

 


 

表の見方

各コードは以下の通り、上段がカラーコード、下段がアイコンフォントのコードです。

アイコンフォント　ブランド名
16進カラーコード RGBカラーコード
Unicode HTML

 

SNS関連・ツール

X
#000000 rgb(0,0,0)
f099 
<i class="fab fa-twitter"></i>

fontawesomeでは、これまでの青い鳥が黒背景に白文字のXロゴに代わっているらしいのですが、確認できていません。

Xのロゴは黒板太字という特殊文字をそのまま使っているので、以下のように記述しても可。

.fa-twitter:before {
    content: '';
    font-family: unset;
    font-weight: bold;
}

 

Twitter
#55acee rgb(85, 172, 238)
f099 
<i class="fab fa-twitter"></i>
Facebook
#315096 rgb(49, 80, 150)
f09a 
<i class="fab fa-facebook"></i>
f39e 
<i class="fab fa-facebook-f"></i>
LINE
#00c300 rgb(0, 195, 0)
f3c0 
<i class="fab fa-line"></i>
Instagram
#405de6 rgb(64, 93, 230)
#5851db rgb(88, 81, 219)
#833ab4 rgb(131, 58, 180)
#c13584 rgb(193, 53, 132)
#e1306c rgb(225, 48, 108)
#fd1d1d rgb(253, 29, 29)
#f56040 rgb(245, 96, 64)
#f77737 rgb(247, 119, 55)
#fcaf45 rgb(252, 175, 69)
#ffdc80 rgb(255, 220, 128)
f16d 
<i class="fab fa-instagram"></i>
YouTube
#ff0000 rgb(255, 0, 0)
#282828 rgb(40, 40, 40)
f173 
<i class="fab fa-youtube"></i>
Tumblr
#35465c rgb(53, 70, 92)
f173 
<i class="fab fa-tumblr"></i>
LinkedIn
#0077b5 rgb(0, 119, 181)
f08c 
<i class="fab fa-linkedin"></i>
はてなブックマーク
#008fde rgb(0, 143, 222)
feedly
#2bb24c rgb(43, 178, 76)
RSS
#f26522 rgb(242, 101, 34)
f09e 
<i class="fab fa-rss"></i>
f143 
<i class="fab fa-rss-square"></i>
mixi
#d1ad59 rgb(209, 173, 89)
Skype
#00aff0 rgb(0, 175, 240)
f17e 
<i class="fab fa-skype"></i>
Dropbox
#007ee5 rgb(0, 175, 240)
f16b 
<i class="fab fa-dropbox"></i>
Vimeo
#1ab7ea rgb(26, 183, 234)
f40a 
<i class="fab fa-vimeo"></i>
Pocket
#ef4056 rgb(239, 64, 86)
#50bcb6 rgb(80, 188, 182)

 

ネットショップ

Yahoo
#410093 rgb(65, 0, 147)
f19e 
<i class="fab fa-yahoo"></i>
Amazon
#ff9900 rgb(255, 153, 0)
#146eb4 rgb(20, 110, 180)
f270 
<i class="fab fa-amazon"></i>
楽天
#bf0000 rgb(191, 0, 0)

 

その他

WordPress
#21759b rgb(33, 117, 155)
#d54e21 rgb(213, 78, 33)
#464646 rgb(70, 70, 70)
f19a 
<i class="fab fa-wordpress"></i>
Google
#4285f4 rgb(66, 133, 244)
#34a853 rgb(52, 168, 83)
#fbbc05 rgb(251, 188, 5)
#ea4335 rgb(234, 67, 53)
f1a0 
<i class="fab fa-google"></i>
windows
#0078d7 rgb(0, 120, 215)
#ffb900 rgb(255, 185, 0)
#e81123 rgb(232, 17, 35)
#107c10 rgb(16, 124, 16)
f17a 
<i class="fab fa-windows"></i>
android
#a4c639 rgb(164, 198, 57)
f38b 
<i class="fab fa-android"></i>
HTML5
#e34f26 rgb(227, 79, 38)
f13b 
<i class="fab fa-html5"></i>
css3
#e34c26 rgb(227, 76, 38)
f38b 
<i class="fab fa-css3-alt"></i>
SNSアイコンフォントブランドカラー
綾糸: 綾糸　主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています

View Comments (3)

  • 素晴らしいまとめですね！SNSのカラーコードやアイコンフォントについて、これほど整理されていると使いやすいです。特に、色の選び方の参考になりました。ありがとうございます！

  • この記事は非常に有益であり、私たちのSNS Auchan npmCSSをより整える上でとても便利です。色々と色を揃える方法や、 sizeof Fame Nichet посе Васиfficulture flair を思いつくolyWA shookisyango floatics advice 等、非常に興味深いインフォを共有しています

  • この記事は非常に有益であり、私たちのSNS Auchan npmCSSをより整える上でとても便利です。色々と色を揃える方法や、 sizeof Fame Nichet посе Васиfficulture flair を思いつくolyWA shookisyango floatics advice 等、非常に興味深いインフォを共有しています。Thanks for sharing!

Leave a Comment
Related Post
  1. カラーコード一覧（色別・ブランドカラー・鉄道・野球・オリンピックなど）
  2. メジャーリーグ30球団の本拠地マップ・ロゴとイメージカラーコード
  3. 全国ＪＲ線158路線と新幹線・JRグループカラーコード