大手企業のブランドカラーを集めたサイト「BrandColors」 スウォッチやCSSデータなどもダウンロードができるぞ!

こんにちは。今回は大手企業などのブランドカラーを集めたサイト「BrandColors」の紹介です。アイコンを作ったり、CSSでアイコン実装するときにコーポレートカラーの色がわからない場合に、その悩みを一発で解決してくれるサイトです。

大手企業のブランドカラーがわかる BrandColors

どの大手企業がどの色を使っているのか一発で判る上に、様々な形式で色をダウンロードして使えるので、「コーポレートカラー何色だったっけ?」と悩むデザイナー(WEB/グラフィック)にとっては非常に便利です。
BrandColors
[fac_icon icon=”external-link”]http://brandcolors.net/
白をベースとしたサイト構成で、非常にシンプルで使いやすいです。

BrandColors の使い方

全ての企業のカラーを落としたい場合
使い方は簡単で、画面右上にある、「[fac_icon icon=”download”]All」をクリックするだけ。
BrandColor
お好きなフォーマットでダウンロードが可能となっております。

ダウンロード可能なファイル

  • Adobe Swatch Exchange(.ase)
  • Cascading Style Sheets(.css)
  • Syntactically Awesome Stylesheets(.sass)
  • LESS
  • Stylus(.styl)

このサイトのすごいところは、スウォッチ(Adobe Swatch Exchange(.ase)だけではなく、CSSや、Sass、LESS、CSSメタ言語のStylusの5種類のファイルを選んでダウンロードができるところ!グラフィックデザイナーだけではなく、WEBデザイナー、コーダー向けにも非常にありがたいサイトになっております。

企業を選んでダウンロードしたい場合

「[fac_icon icon=”download”]All」の横にある検索ボックスにダウンロードしたい企業名を入れるとフィルタがかかって抽出されます。今回はLINEを選んでみました。また、検索した企業の色にマウスオーバーさせるとHTMLのカラーコードを見ることができます。
BrandColors
企業名の文字をマウスでクリックするとその左側に青く丸がつきます。これでダウンロードしたい企業カラーを選択できます。もちろん同時に複数の選択してダウンロードも可能です。上に「○(選択した数) brand in collection」と表示されているのでいくつ選択したかわかると思います。
BrandColors
あとは先ほどと同じように、「[fac_icon icon=”download”]Collection」をクリックすると、好きな形でカラーファイルをダウンロードすることができます。
BrandColors

まとめ

もともとこういったサイトは他にも様々あったのですが、5つの種類(Adobe Swatch Exchange/CSS/Sass/LESS/Stylus)でダウンロードできるといった点ではブランドカラーを集めたサイトの中では非常に使えるサイトだと思います。デザイナーのみなさん是非ブックマークして使ってみてください。
以上、大手企業のブランドカラーを集めたサイト「BrandColors」でした!
関連リンク:[fac_icon icon=”external-link”]http://brandcolors.net/

コメントを閉じる

コメントを残す