color schemer

カラースキーマー

Sass で配色が簡単に

カラー スキーマーは、Sass 用の堅牢なカラー ツールセットです。既存の Sass カラー関数を拡張し、RYB 操作、* 色相の設定、明度の設定、色合い、色合いなどを追加します。また、これらのツールを利用して、1 つの原色を設定し、それを中心に全体のカラー スキームを作成できるフル機能のカラー スキーム ツールを追加します。

インストール

gem install color-schemer 。

Compass 設定ファイルにrequire 'color-schemer' 。

@import 'color-schemer'スタイルシートにインポートします。

カラースキーマの使用

新しいカラー機能

• tint($color, $amount) — 色を白と混合します。ほとんどの設計者はlighten()よりもこれを使用する方がはるかに快適です。
• shade($color, $amount) — 上記と同じですが、黒を追加します。デザイナーはdarken()よりもこれを好むかもしれません。
• equalize($color) — 完全に飽和した色を返します。
• set-red($color, $red) — 色の赤の量を設定します。
• set-green($color, $green) — 色の緑の量を設定します。
• set-blue($color, $blue) — 色の青の量を設定します。
• set-hue($color, $hue) — 色の色相を設定します。
• set-saturation($color, $saturation) — 色の彩度を設定します。
• set-lightness($color, $lightness) — 色の明度を設定します。
• set-alpha($color, $alpha) — 色のアルファを設定します。

RYBカラー関数

カラー スキーマは、赤、黄、青のカラー ホイールを操作するための多くの関数を追加します。コンピューターの色は赤、緑、青で計算されます。これは技術的にはより正確ですが、アーティストやデザイナーは、より良い色の関係を見つけるために長年 RYB を使用してきました。

• ryb-hue($color) — RYB カラーホイール上の色の色相を見つけます。
• set-ryb-hue($color, $hue) — RYB カラー ホイールに基づいて色の色相を設定します。
• ryb-adjust-hue($color, $degrees) — RYB カラーホイールの周囲の色の色相を調整します。
• ryb-complement($color) — 色の RYB 補数を見つけます。
• ryb-invert($color) — RYB カラーホイールの周囲の色を反転します。

CMYKカラー機能

• cmyk($cyan, $magenta, $yellow, $black) — CMYK 値を使用して色を定義します。

配色

機能

スキームの色を使用したい場所にこれらの関数をドロップします。さらに操作して、デザインに合わせて機能させることができます。これらは、さらに微調整する場合があるため、適切な出発点として考慮する必要があります。

• cs-primary() — 原色。
• cs-secondary() — 二次色。
• cs-tertiary() — 三次色。
• cs-quadrary() — 4次カラー。

変数

これらのグローバル変数を設定することで、上記の関数の結果を変更できます。

• $cs-primary — カラースキームで主色を設定します。
• $cs-scheme — モノラル、補体、トライアド、テトラッド、アナロジック、アクセント付きアナロジック
• $cs-hue-offset — スキーム内の色相調整の量。
• $cs-brightness-offset — スキーム内の明るさの調整量。
• $cs-color-model — rgb、ryb

ブレンドモード

カラー スキーマには、Photoshop スタイルの色のブレンドを可能にする SCSS ブレンド モードが含まれています。

すぐに使える

これらの関数はそのまま使用できますが、もう少し微調整する必要がある場合があります。これらをそのまま使用するのではなく、調整や移動を行いたい場合に備えて、変数を作成することをお勧めします。

 $primary : cs-primary ();
$secondary : darken ( cs-secondary (), 10 % ); // too light, darkening this up a bit.
$tertiary : cs-tertiary ();
$quadrary : cs-quadrary ();

カラースキームをテストする

カラースキームをテストするための便利なミックスインも含まれています。これを色のリストに含めるだけで、ページの上に色のバーが追加されます。

 @include cs-test ( red green blue );

インスピレーション

• http://colorschemedesigner.com/

ライセンス

著作権 (c) 2011 Scott Kellum (@scottkellum) および Mason Wendell (@canarymason)

本ソフトウェアおよび関連ドキュメント ファイル (以下「ソフトウェア」) のコピーを入手した人には、使用、コピー、変更、マージする権利を含むがこれらに限定されない、制限なくソフトウェアを取り扱う許可が、ここに無償で与えられます。 、以下の条件を条件として、本ソフトウェアのコピーを出版、配布、サブライセンス、および/または販売すること、および本ソフトウェアが提供される人物にそれを許可すること。

上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは主要部分に含まれるものとします。

ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定目的への適合性、および非侵害の保証を含むがこれらに限定されない、いかなる種類の保証も行われません。いかなる場合においても、作者または著作権所有者は、契約行為、不法行為、またはその他の行為であるかどうかにかかわらず、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる、いかなる請求、損害、またはその他の責任に対しても責任を負わないものとします。ソフトウェア。