JavaScriptを使用してRGB色の飽和と明るさを調整する

最近、私はカラーデザインの原則を模索しており、Adam WathanとSteve Schrogerの作品からインスピレーションを得ています。彼らのアドバイスは、いくつかの審美的に心地よい16進コードを超えて、包括的なカラーパレットの必要性を強調しています。堅牢なアプリケーションの構築には、多数のグレーといくつかの主要な色を含む、より広い範囲が必要です。

私の開発ワークフローには、多くの場合、ヘックスコードやRGBの色が含まれますが、軽さと飽和を手動で調整することは面倒です。このプロセスを合理化し、一定のカラーピッカー調整による反復的なひずみ損傷を防ぐために、色を効率的に操作するためにいくつかのコードを検討しましょう。

HSL値を活用します

HSL（色相、飽和、軽さ）は、特に手動の色の調整が予想される場合、Web色を定義するための優れた方法を提供します。 HSLは、数（0-360）として色相、飽和、軽さをパーセンテージとして表します。例えば：

 div {
  背景色：HSL（155、30％、80％）;
}

これにより、軽くミュートされたミントグリーンが生成されます。一貫性を維持し、暗いテキストを追加するために、明るさを調整できます。

 div {
  背景色：HSL（155、30％、80％）;
  色：HSL（155、30％、5％）;
}

これにより、背景と調和する暗いテキストが作成されます。行動を促すボタンの場合、飽和を増やし、軽さをわずかに低下させる可能性があります。

 .call-to-action {
  背景色：HSL（155、80％、60％）;
  色：HSL（155、30％、5％）;
}

それほど重要ではないテキストは、飽和を減らして明るさを増加させることにより、さらに強調される可能性があります。

 div {
  背景色：HSL（155、30％、80％）;
  色：HSL（155、30％、5％）;
}

.lessimportant {
  色：HSL（155、15％、40％）;
}

HSLのブラウザの互換性と宣言的性質により、RGBよりも好ましくなります。ただし、既存のRGBプロジェクトまたはレガシーブラウザのサポートの懸念は、代替アプローチを必要とする場合があります。

カラーライブラリを利用します

多数のカラー操作ライブラリがHSLからRGB/HEX変換を簡素化し、高度な配色の生成を提供します。いくつかの注目すべき例は次のとおりです。

• Colvertize（Philipp Mildenberger）：変換および操作機能を備えた軽量ライブラリ。
• Color（Josh Junon）：色宣言、処理、抽出のための流fluentインターフェイス。
• Tinycolor（Brian Grinstead）：さまざまな入力タイプを処理し、スキーム生成ユーティリティを提供します。

CSS-Tricksは、カラー形式の変換に関する貴重なリソースも提供します。

カラーグリッドツール

よりインタラクティブなアプローチについては、色グリッドツールを検討してください。 Refactoring UIが強調するように、数学的精度だけでは最適なカラーパレットを保証するものではありません。私が開発した反応アプリケーションであるカラーグリッドは、選択した色相に基づいてパレットを生成し、飽和と軽さの100のバリエーションを提供します。ユーザーは、ヘックスコードまたはCSSカスタムプロパティをインターフェイスから直接コピーできます。

RGBカラー操作技術

次の手法は、RGBカラー処理に焦点を当てています。

RGBの軽さを決定します

注：この方法では、色相の固有の明るさを説明していません（たとえば、紫色よりも黄色の高い知覚輝度）。混合された黒または白の量を測定します。視覚的評価は、正確な軽さの判断のために依然として重要です。

軽さは、最高と最低のRGB値を平均することで計算され、255で除算します。

関数getlightnessofrgb（rgbstring）{
  const rgbintarray =（rgbstring.replace（ / / g、 ''）.slice（4、-1）.split（ '、'）。map（e => parseint（e）））;
  const hightest = math.max（... rgbintarray）;
  const lowest = math.min（... rgbintarray）;
  return（最も低い） / 2/255;
}

軽さや色相に影響を与えることなくRGBを飽和させます

飽和RGBは課題を提示します。グレーは色相情報を欠いており、純粋な色相を達成するには50％の軽さが必要です。この例は軽さを維持します：

飽和するには、最低のRGB値と最高のRGB値の差を増やします。軽さを維持するには、0-255の制限によって制約される最高値と最低値の等しい増加/減少が必要です。使用可能な飽和範囲は、次のように決定されます。

• 灰色（同じ軽さ）と255の違い。
• 灰色（同じ軽さ）と0の違い。

 // ...（上からgetlightnessofrgb関数）...

const grayval = getlightnessofrgb（ 'rgb（205、228、219）'） * 255; // 217
const artationrange = math.round（math.min（255 -grayval、grayval））; // 38

// ...（飽和計算の残り）...

中間値の調整は、最高値と最低値の変化に比例します。完全な飽和関数は非常に複雑であり、簡潔にするために省略されていますが、コアの概念は提示されています。

RGB色の飽和

飽和度は飽和プロセスを逆転させ、灰色の値に向かって移動します。完全な飽和度は、等しいRGB値を持つ灰色になります。部分的な飽和度には、最高と最低のRGB値の差を比例的に減らすことが含まれます。完全な飽和関数も簡潔に省略されています。

色相を維持しながらRGBを明るくして暗くします

照明では、RGB値を255に比例的に増加させることが含まれますが、暗くなると比例して0に減少します。両方のプロセスは徐々に飽和を減らします。照明と暗くなるための完全な機能は、簡潔にするために省略されています。

これらの機能は、RGBカラー操作の基盤を提供します。ただし、HSL、カラーライブラリ、およびカラーグリッドツールは、ニーズとプロジェクトの制約に応じて、代替の潜在的に効率的なソリューションを提供します。

以上がJavaScriptを使用してRGB色の飽和と明るさを調整するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。