2

開始 16 進数コードが与えられた場合、明度の線形値を昇順および降順で計算するための数学を知りたいです。色相と彩度についても同様です。

私が欲しいものを正確に説明するのはちょっと難しいですが、幸運なことに、私が必要とする正確なアルゴリズムを利用するこのページを見つけました:

http://www.workwithcolor.com/hsl-color-schemer-01.htm

ページを確認すると、最後の 3 つの redio ボタンが次のように表示されていることに気付きました: 色相によるリニア、彩度によるリニア、明度によるリニア。それぞれ、元の 16 進コードに対応する 16 進コードのリストを昇順で提供します。

たとえば、明度については、次のリストが表示されます (カラー FFCE2E から): FFCE2E FFDA61 FFE694 FFF2C7 FFFEFA

数式が必要です。

前もって感謝します。

4

1 に答える 1

0

これを複数の場所からマッシュアップできます。一言で言えば、必要なもの：

  1. 選択した色の HSL 値。おそらくこれは、RGB を HSL に変換することによって取得されるか ( #xxxxxx 色の色相をどのように取得しますか? )、または Web サイトでパレットで選択するだけです。
  2. これで、3 つのコンポーネント (H、S、および L) ができました。選択したチェックボックスに応じて、編集ボックスで指定された % 値だけコンポーネントを減らし始めます。

  3. このデクリメント中に値のリストを取得し、HSL 値から RGB への逆変換 ( HSL から RGB への色変換) を実行します。

    // I gonna use rgbToHsl and hslToRgb from https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
var initialRGB = [ir, ig, ib];
var initialHSL = rgbToHsl(initialRGB[0], initialRGB[1], initialRGB[2]);
var howManyVariants = 4;
var decrementPercent = 0.1;  // 10%
// This example is for hue change
var decrement = initialHSL[0] * decrementPercent;
for (var i = 0; i < howManyVariants; i++) {
  // Linear decrementation
  var nextHue = initialHSL[0] - i * decrement;
  var nextColor = hslToRgb(nextHue, initialHSL[1], initialHSL[2]);
  // visualize somehow
}

同様に、彩度による変化のセットが必要な場合は、2 番目のパラメーター/コンポーネントのみを減少させ、ルミネセンスを変化させたい場合は、3 番目のパラメーターを変化させます。

これが明確であることを願っています。

于 2016-06-28T01:30:26.367 に答える