WebページのUIデザインで役立つカラーセット集「open-color」



WebページのUIデザインが 少し楽になるカラースキーム ライブラリ「open-color」の紹介です。

 Webデザインを行う上で、" フォント "、" ヘッダーの色 "、" font-awesome アイコン " のカラー変更など、色を管理することは よくあるタスクの1つです。

 色の設定は CSSやスタイルタグ内の ' color ' プロパティに  hex (16進数) 形式で記述して色を割り当てますが、慣れていないとググったり、カラーピッカーを開いたりなど、色1つ割り当てるのにも手間が掛かります。

そんな面倒を少し楽にしてくれる カラーライブラリが「open-color」です。

* open-color 公式ページから

 

open-color で出来ること 

- 簡単なclass名 を記述するだけで、HTML要素へのカラー適応が簡単にできるようになります
CSS , LESS , SASS ( SCSS ) , Stylus に対応 

* open-colorを使ってテキストの色を変更  
open-colorを使って要素の色を変更
open-colorに用意されているカラーリスト  


open-color のインストール

 open-color のインストールは ' npm ', ' yarn ', ' bower ' 、3種類のパッケージマネージャーに対応しています。
ブラウザから直接ライブラリを読み込みたい時は、CSS の ' @import ' で CDNのURLを指定します。

# npm
npm install open-color
# yarn
yarn add open-color
# bower
bower install open-color
# cdn * cssで直接読み込む場合
@import 'https://unpkg.com/open-color/open-color.css';


open-color の使い方

open-colorは CSSを含む Sass ( Scss ), Less, Stylusの4種類のスタイルシート言語に対応しています。
 使い方も簡単で、各々の言語用のライブラリを読み込みんだ後、カラー用の変数を呼び出して割り当てて使用します。
* 13色、10段階の色レベルが用意されています )

* 用意されているカラーレベル ( 色の濃さ ) 

例えば、scss 上で open-colorを使用し、上画像の ' RED 9 ' の色を使用する場合は下記のように定義します。

// $oc-色-濃さ

// クラス 'test' に赤色(9)を適応
.test {
  color : $oc-red-9;
}

* red-9 ( クラス ' test ' ) を要素に適応 

open-color に 用意されている色

- gray : 灰色 ~ 黒
- red
- pink
- grape : 紫
- violet : 青紫
- indigo : 藍色
- blue
- cyan : 青緑
- teal : 緑がかった青
- green
- lime : 黄緑
- yellow
- orange

sass ( scss ) で使う場合

// ' node_modules ' からライブラリの読み込み
@import '~open-color/open-color.scss';

// $oc-色-濃さ
.myColor {
  color: $oc-cyan-4;
}


lessで使う場合

// node_modulesからライブラリの読み込み
@import '~open-color/open-color.less';

// @oc-色-濃さ
.myColor {
  color: @oc-indigo-1;
}


stylusで使う場合

// node_modulesからライブラリの読み込み
@import 'open-color/open-color.styl';

// oc-色-濃さ
.myColor 
  color: oc-orange-7


cssで使う場合

* css で使う場合は ' var() ' 関数を使う必要があります

@import '/node_modules/open-color/open-color.css';

/* --oc-色-濃さ */
.myColor {
  color: var(--oc-red-7);
}


Summary

open-colorは簡単に色を呼び出せるように設計されているので、
 各言語用の変数を呼び出す時の prefix ( ' -- ', ' @ ', ' $ ' など) に気をつけるぐらいで簡単に使うことができます。

ルールが明確にされており どんなプロジェクトにも導入しやすいので、途中参加の フロントエンド エンジニアさんも簡単に使うことが出来そうです。

Github : yeun/open-color

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ