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ごとの特徴を押さえているのが助かります。もっと色々試してみたくなりました！
素晴らしいまとめですね！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!