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 |
| #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 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!