デザインのバックグラウンドから來ない可能性のある人のために、カラーパレットを選択することは、多くの場合、個(gè)人的な好みに基づいています。色の選択は、オンラインカラーツール、畫像からのサンプリング、お?dú)荬巳毪辘违芝楗螗嗓椁巍附瑜耆毪臁埂ⅳ蓼郡膝靴欹氓趣袱沥绀Δ蓺莩证沥いぁ工蓼钎椹`ホイールからランダムにピックしているだけで行われる場合があります。

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

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

ただし、最終的に見つけるのは、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つの有用な測定値は、軽さと飽和です。

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

 $ color：Rebeccapurple;

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

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

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

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

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

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

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

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

SASSパレットビルダーの機(jī)能

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

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

まず、提供されたサンプルパレットの中から交換して、さまざまな種類の色範(fàn)囲のグラフ値がどのように変化するかを感じることをお?jiǎng)幛幛筏蓼埂％靴欹氓葔鋽?shù)名をコピーして、コメントの下で見つけることができる$ palette変數(shù)の値として$ defaultを交換するだけです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

さらに読む

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

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

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