ガジェット通信

見たことのないものを見に行こう

地味に忘れるソーシャル系やサイトのキーカラーをSassの変数でまとめてみた

DATE:
  • ガジェット通信を≫

どうもですよ、はやちですよ٩( ᐛ )و
ここ最近「刀剣乱舞」のキャラクターが揃いつつあり、あと二振りでコンプリートしそうです٩( ᐛ )و<残りおじいちゃんと明石

だが何百回出陣してもおじいちゃんが来ません。
ください( ˇωˇ )<おじいちゃんどこ

そんなことはどうでもいいですね( ˇωˇ )
ソーシャル系やサイトのキーカラーをうっかり忘れてしまうので、Sassの変数でまとめてみました。ご紹介します( ˇωˇ )

カラーまとめ

よく使うソーシャルサイト

Facebook

$facebook:#3B5999;

はてなブックマーク

$hatena:#2C6EBD;

Twitter

$twitter:#55ACEE;

Google+

$google+:#CC3732;

Poket

$poket:#DC3D50;

LINE

$line:#00C300;

その他のソーシャルサイト

CODEPEN

$codepen:#000000;

Github

$github:#171515;

Tambler

$tambler:#44546B;

Instaglum

$instaglum:#3F729B;

LinkedIn

$linkedin:#0077B5;

Vimeo

$vimeo:#1AB7EA;

Vine

$vine:#00B489;

Spotify

$spotify:#84BD00;

RSS

$rss:#e0812a;

Blogger

$blogger:#F57D00;

mixi

$mixi:#E0C074;

YouTube

$youtube:#CD201F;

Pinterest

$pinterest:#CC2127;

Flicker

$flicker:#ff0084;

サービス系

Bitbacket

$bitbacket:#003366;

PayPal

$paypal:#336699;

WordPress

$wordpress:#21759b;

Skype

$skype:#00AFF0;

Feedly

$feedly:#33b051;

Evernote

$evernote:#6FB536;

ソフトウェア系

SourceTree

$sourcetree:#1F5081;

Windows

$windows:#00bcf2;

Sass

$sass:#CF649A;

Gulp

$gulp:#E94C4F;

Git

$git:#F03C2E;

HTML5

$html5:#F14A29;

Firefox

$firefox:#E66000;

Grunt

$grunt:#fba919;

Android

$android:#A4C639;

色を集めたサイト

せっかくなので、いろんな色を載せているサイトもご紹介します( ˇωˇ )

GUIDELINE COLOUR
http://guidelinecolour.com/?p=tools/guidelinecolours/

ソーシャルサイトだけでなく、さまざまなサイトやブラウザなどのキーカラーを揃えています( ˇωˇ )

FIND GUIDELINENS ON THE WEB
http://findguidelin.es/

こちらは、ソーシャルボタンのカラーをPhotoshopのスウォッチに保存できます。デザイナーさんにとってとても便利ですね( ˇωˇ)

BrandColors
http://brandcolors.net/

サイトのキーカラーロゴカラーを一色ではなく配色セットで紹介しています( ˇωˇ)

まとめ

いかがでしたでしょうか?
集めるのが面白くなって、いっぱい集めてしまいました٩( ᐛ )و

ご紹介した色の変数たちは、こちらで配布しております
( ˘ω˘)☞三☞シュッシュッ Download

見た目はこのような感じです
( ˘ω˘)☞三☞シュッシュッ Demo

これで少しでも作業短縮なれれば幸いです。ではでは(ˇωˇ)

カテゴリー : 生活・趣味 タグ :
LIGの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

TOP