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

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

• バランスの取れたパレットの構築を支援するためのパレットの輝き、軽さ、飽和をグラフ化する価値
• ツールにアクセス可能なコントラストチェックを構築することの重要性
• 高度な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

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

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

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

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

 $ color：Rebeccapurple;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最後に、獨自のパレットを追加するか、例の中にいくつかの色を交換してください。このツールは、SASSの色関數(shù)を探索して、色の特定の屬性を調(diào)整するための優(yōu)れた方法であり、その一部は$デフォルトのパレットで実証されています。

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

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

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

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

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

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

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

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

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

他の利用可能な色関數(shù)を調(diào)べるために少し時間がかかります。

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

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

さらに読む

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

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

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