バランスの取れたカラーパレットを作るための便利なサス駆動のツール

デザインのバックグラウンドから来ない可能性のある人のために、カラーパレットを選択することは、多くの場合、個人的な好みに基づいています。色の選択は、オンラインカラーツール、画像からのサンプリング、お気に入りのブランドからの「借り入れ」、またはパレットが「ちょうど気持ちがいい」までカラーホイールからランダムにピックしているだけで行われる場合があります。

私たちの目標は、SASSカラー関数を使用して重要な色の属性を探索することにより、パレットを「正しいと感じている」ものをよりよく理解することです。最後に、あなたはより慣れ親しんでいます：

• バランスの取れたパレットの構築を支援するためのパレットの輝き、軽さ、飽和をグラフ化する価値
• ツールにアクセス可能なコントラストチェックを構築することの重要性
• 高度なSASS機能は、あなたが操作してフォークすることができるCodepenを含むあなた自身の探索のために拡張するために機能します

ただし、最終的に見つけるのは、Web上の色がハードウェアと人間の知覚の戦いであるということです。

カラーグラフ化が役立つ理由

RGBおよびRGBA値、HSLおよびHSLA値、HEXコードなど、スタイルシートの色を宣言する方法に精通している場合があります。

 RBG（102,51,153）
RBGA（102,51,153、0.6）
HSL（270、50％、40％）
HSLA（270、50％、40％、0.6）
＃663399

これらの値は、色をレンダリングする方法に関するデバイスの指示を与えます。色のより深い属性をプログラムで露出し、活用して、色がより広いパレットにどのように関連するかを理解することができます。

色の属性をグラフ化する値は、色の関係についてより完全な画像を取得することです。これは、色のコレクションが一緒に正しいと感じるかもしれないし、そうでないかもしれない理由を明らかにします。複数の色の属性をグラフ化するには、より調和のとれたパレットを作成するためにどのような調整を行うことができるかを示唆するのに役立ちます。後のセクションで何を変更するかを決定する方法の例を検討します。

組み込みのサス色関数を使用して容易に取得できる2つの有用な測定値は、軽さと飽和です。

• 明るさとは、白または黒と色の混合を指します。
• 飽和とは、色の強度を指し、100％飽和が最も純粋な色になります（灰色の存在はありません）。

 $ color：Rebeccapurple;

@Debug Lightness（$ color）;
// 40％

@debug飽和（$ color）;
// 50％;

ただし、輝度は間違いなく最も有用な色の属性である可能性があります。私たちのツールで表されるように、輝度は、SRGBカラー空間を想定するWCAG式を使用して計算されます。輝度はコントラストの計算で使用され、より壮大な概念として、色の関係を評価するために相対的な明るさの人間の知覚の定量化に近づくことも目指しています。これは、パレット間の輝度値の範囲がより緊密な輝度範囲が、人間の目とよりバランスが取れていると認識される可能性が高いことを意味します。しかし、マシンは誤りがちであり、パレット値を操作するときに遭遇する可能性のあるこの規則には例外があります。輝度に関するより広範な情報、および色の均一性の人間の認識をさらに正確に表すことを目的とするCielabと呼ばれるユニークな色空間については、この記事の最後にあるリンクを参照してください。

さらに、特にプログラムで計算できるUI要素の読みやすさと区別の観点から、アクセシビリティにとって色のコントラストは非常に重要です。これは、ツールが合格値をテストできることを意味するという点で重要です。また、たとえば、アルゴリズムが背景色に渡されたときに適切なテキスト色を返すことができることを意味します。そのため、当社のツールは、パレットを調整する方法を測定するための追加の方法としてコントラストチェックを組み込みます。

このプロジェクトで実証された機能は、コントラストセーフデザインシステムパレットの計画を支援するために抽出したり、カスタムテーマを定義できるSASSフレームワークに焼き付けたりすることができます。

パレットビルディングツールとしてのSASS

SASSは、配列を介した作成や反復、カスタム関数を使用した値の操作など、ニーズに最適ないくつかの従来のプログラミング機能を提供します。リアルタイム処理があるCodepenのようなオンラインIDEと組み合わせると、本質的にカラーパレットの構築などの特定の問題を解決するためのWebアプリを作成できます。

以下は、使用するツールのプレビューです。

SASSパレットビルダーの機能

• 正確なプロットポイントの配置と値の比較のために、アスペクト比制御応答性グラフを出力します。
• SASSの色関数と数学計算の結果を活用して、0〜100％のスケールでポイントを正しくプロットします。
• グラデーションを生成して、より伝統的な「スウォッチ」ビューを提供します。
• 組み込みのSASS関数を使用して、飽和値と軽さの値を抽出します。
• 輝度とコントラスト関数を作成します（必要な事前計算された線形チャネル値をリンクすることに加えて、材料Webコンポーネントからフォークされます）。
• 特定の背景に適切なテキスト色を返し、使用する比率を変更する設定変数があります。
• 特定のパレット全体で飽和と軽さを均一にスケーリングする関数を提供します。

パレットビルダーを使用します

まず、提供されたサンプルパレットの中から交換して、さまざまな種類の色範囲のグラフ値がどのように変化するかを感じることをお勧めします。パレット変数名をコピーして、コメントの下で見つけることができる$ palette変数の値として$ defaultを交換するだけです。

次に、特にWCAGガイドラインのパスを確保することに慣れていない場合は、事前定義された比率間の$ contrastholdの変数値を切り替えてみてください。

次に、$パレットスケールライトネスまたは$パレットのスケール飽和値を調整してみてください。それらはパレット関数にフィードし、パレット全体でそれらの測定値を均一にスケーリングします（個々の色の限界まで）。

最後に、独自のパレットを追加するか、例の中にいくつかの色を交換してください。このツールは、SASSの色関数を探索して、色の特定の属性を調整するための優れた方法であり、その一部は$デフォルトのパレットで実証されています。

グラフを解釈し、バランスのとれたアクセス可能なパレットを作成します

グラフ化ツールは、前述のように、バランスの取れたパレットの最も信頼できる指標であるため、輝度を表示するデフォルトです。あなたのニーズに応じて、飽和と軽さはそれ自体で有用なメトリックになりますが、ほとんどの場合、それらはパレットの輝きをより調整するために調整する必要があるものを指すのに役立つ信号です。例外は、確立されたパレットの各値に基づいて軽度スケールを作成することです。そのために$ stripeblueの例に交換できます。

$デフォルトのパレットは、実際にはバランスの取れた輝度に近づくために調整が必要です。

バランスの取れた輝度を示すパレットは、Stripe（$ Stripe）のサンプルです。

ここで、ツールがマインドシフトを招待します。カラーホイールを操作する代わりに、SASS機能を活用して、プログラムで色の属性を調整します。

飽和グラフを確認して、色の強度で遊ぶ余地があるかどうかを確認してください。私の推奨される調整は、色の値をスケールカラー関数で包み、調整された$飽和値を渡すことです。スケールカラーの利点は、指定されたパーセントに基づいて値を流動的に調整することです。

軽さは、白または黒と混合することに対して測定された輝度に値を割り当てることにより、2色が異なると感じる理由を説明するのに役立ちます。 $ defaultパレットでは、変化色関数が紫色に使用されて、その相対$軽量値を赤色に使用した値の計算された軽さ（）に合わせます。

また、スケールカラー関数は、調整された$飽和値と$軽量値の両方をバンドルすることもできます。これは、多くの場合最も便利です。提供されたパーセントが負になる可能性があることに注意してください。

SASS機能を使用して飽和と軽さグラフをチェックすることにより、$ DefaultBalancedluminanceはバランスの取れた輝度を実現します。また、このパレットは、マップゲット関数を使用して$デフォルトのパレットから値をコピーし、それらを上書きする代わりにさらに調整を適用します。これは、おそらくパレットを横切る色相シフトなどの複数のバリエーションをテストするのに便利です。

他の利用可能な色関数を調べるために少し時間がかかります。

UIでパレットの色が実際にどのように使用されるかを考慮すると、コントラストが作用します。このツールは、すべてのテキストに最も適したAAコントラストにデフォルトです：4.5。軽いUIのために構築している場合は、テキストで使用される色は、プロットポイントの中心色で示される輝度に対して調整するときに、白と適切なコントラストを達成する必要があることを考慮してください。

ヒント：グラフは透明な背景で設定されているため、より暗いUIのために開発している場合は、身体にバックグラウンドルールを追加できます。

さらに読む

色は広大なトピックであり、この記事はSASS関数に関連する側面にのみヒットします。しかし、調和のとれたカラーシステムを作成する方法を本当に理解するには、次のリソースをお勧めします。

• カラースペース - さまざまなカラースペースのインタラクティブモデルとそれらの計算方法を備えた非常に印象的なディープダイブです。
• 色と輝きを理解する - 色と輝度に関するMDNからの初心者向けの概要と、アクセシビリティとの関係。
• 永続的に均一なカラースペース - 知覚的に均一なカラーシステムに関する詳細情報。より馴染みのあるHSLカラー空間から輝度調整されたCieluvカラー空間に値を変換するツールHSLUVを紹介します。
• アクセシブルなカラーシステム - カスタムツールを作成することでアクセス可能なカラーシステムを構築する経験に関するStripeのケーススタディ（この探索と記事に影響を与えました）。
• ウェブ上の色のオタクのガイド - これは、Web上の色のメカニズムの素晴らしい探索であり、CSS-Tricksで入手できます。
• Tanaguru Contrast Finder - アクセス可能なコントラストを実現するために色を調整するのに苦労している場合に役立つ信じられないほどのツール。
• ColorBox - グラフを介してカラースケールをさらに調査するLyftのWebアプリ。
• 系統的な色の設計 - 輝度香りのパレットを介して一貫したテーマをサポートするために、カラーランプを作成するためのミネラルUIの例外的な努力について説明しています。
• Tableau 10で新しいカラーパレットの設計方法 - Tableauは、その色空間の親しみやすい概要を含むCielabに基づいてリフレッシュされたパレットを作成するのに役立つカスタムツールの公開された機能です。

以上がバランスの取れたカラーパレットを作るための便利なサス駆動のツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。