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...
表の見方
各コードは以下の通り、上段がカラーコード、下段がアイコンフォントのコードです。
| アイコンフォント ブランド名 |
| 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>
|
| 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のカラーコードやアイコンフォントについて、これほど整理されていると使いやすいです。特に、色の選び方の参考になりました。ありがとうございます！
この記事は非常に有益であり、私たちの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!