ブランドカラーの検索に便利なツール

 

BrandColorsが超便利

様々なウェブサービスのブランドカラーを調べるとき、BrandColorsというウェブサイトがとても便利。

BrandColors : https://brandcolors.net

ただ、若干の色味の違いがある。一番正確なのが、直接調べること。
Color Pickerを使うと便利。ただいちいちサイトにアクセスする作業が面倒なので、以下のように変数にして用意しておくと時間短縮になる。

 

ブランドカラーをSassの変数で管理する

ブランドカラーの使用頻度は高いので、使用頻度の高いブランドカラーをSassファイルで管理しておくと便利。

Sassの変数一覧


//  SNS系統
$twitter: #1da1f2;
$instagram: #c13584;
$googleplus: #ea4335;
$facebook: #3b5998;
$codepen: #0ebeff;
$github: #4078c0;
$behance: #1769ff;
$doibbble: #ea4c89;
$youtube: #ff0000;
$linkedin: #0077b5;

//  連絡ツール系統
$skype: #00aff0;
$messenger: #0084ff;
$line: #00c300;
$wechat: #7bb32e;

//  ブログサービス系統
$feedly: #2bb24c;
$hatena: #00a4de;
$pocket: #ef4056;
$pinterest: #bd081c;
$rss: #f26522;
$wordpress-org: #21759b;
$wordpress-com: #0087be;

//  eコマース系統
$amazon: #232F3E;
$rakuten: #BF0000;
$yahooshop: #FF0033;

//  プログラミング系統
$htmlfive: #e34f26;
$javascript: #f7df1e;
$jquery: #0769ad;
$mySQL: #00758f;
$php: #4f5b93;
$ruby: #cc342d;
$rubyonrails: #cc0000;
$vuejs: #42b883;

 

終わりに

Instagramのようにグラデーションが必要ならグラデーション指定で変数に格納できるので、ブランドによって複数バージョンを用意しておくのもよい。

 

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO