>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

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

Color
この記事は約7分で読めます。

 

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 について 2...

 

表の見方

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

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

 

SNS関連・ツール

X 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>

コメント

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

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

タイトルとURLをコピーしました