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>
|
View Comments (15)
-
-
-
-
-
-
-
-
-
-
1 2 次へ »とても参考になりました！SNSのカラーコードをまとめてくれているのは助かります。アイコンフォントについても知識が深まったので、早速デザインに活用します！ありがとうございます！
とても役立つ情報ですね！カラーコードとアイコンフォントの一覧が一つにまとめられているのは助かります。特にSNSデザインには欠かせないので、早速利用させていただきます。ありがとうございます！
とても役に立つ情報ですね！カラーコードやアイコンフォントのまとめはデザインに大いに活用できそうです。特にSNSごとの特徴が分かりやすくて助かります。ありがとうございます！
このまとめ、とても役に立ちました！カラーコードやアイコンフォントの情報が整理されていて、デザインに活用できそうです。特にSNSごとの仕様が分かりやすく、参考にさせていただきます。ありがとうございます！
このまとめはとても役立ちました！SNSのカラーコードを一つの場所で見られるのは便利ですね。アイコンフォントの情報も知れてよかったです。ありがとうございます！
カラーコードとアイコンフォントのまとめ、すごく参考になりました！特にSNS用の情報はデザインに役立ちそうです。これからのブログ記事も楽しみにしています！
とても便利なまとめですね！カラーコードやアイコンフォントを一か所で確認できるのは助かります。特に、デザインの参考にさせていただきます。ありがとうございました！
素晴らしいまとめ記事ですね！カラーコードやアイコンフォントの情報がとても参考になりました。デザインに活用させていただきます！ありがとうございます！
このまとめ、非常に役立ちました！特にカラーコードの部分はデザインにすぐ活用できそうです。アイコンフォントも整理されていて、使いやすいですね。ありがとうございます！
このブログ記事、とても助かりました！SNSのカラーコードやアイコンフォントを一目でまとめてくれていて、作業が楽になりそうです。ありがとうございます！