javascript - RGB 値の配列を指定して、カラー スライダーの Y 位置を計算するにはどうすればよいですか

Question

現在、次のコードを使用して、キャンバス要素にカラー スライダー グラデーションをレンダリングしています。

 var colorgrad = self.cache.colorctx.createLinearGradient(0, 0, 0, self.cache.colorpicker.height);
        colorgrad.addColorStop(0, 'red'); //red
        colorgrad.addColorStop(1 / 6, 'yellow'); //yellow
        colorgrad.addColorStop(2 / 6, 'lime') // green
        colorgrad.addColorStop(3 / 6, 'aqua'); // aqua
        colorgrad.addColorStop(4 / 6, 'blue'); //blue
        colorgrad.addColorStop(5 / 6, 'magenta'); // pink
        colorgrad.addColorStop(1, 'red'); //red
        self.cache.colorctx.fillStyle = colorgrad;
        self.cache.colorctx.fillRect(0, 0, 60, self.cache.colorpicker.height);

        self.cache.colourdata = self.cache.colorctx.getImageData(0, 0, 1, self.cache.colorpicker.height).data;

これにより、カラー ホイールを介して赤から赤に戻るグラデーションが作成され、次のようなイメージが生成されます。

ユーザーが画像の上部にある円形のコントローラーを動かすと、Yコントローラーの位置をキャッシュされた画像のピクセル データと照合して、16 進数/RGB 値を返す単純なカラー ピッカーを生成します。

ユーザー入力に基づいて色抽出が機能するようになったので、16 進数の色の値を取得してtop、コントロールの値を計算できるようにする必要もあります。したがって、本質的には、テクニックを逆にします。しかし、使用する正しいアルゴリズムに頭を悩ませているようには見えません。

私は作業hex to RGB関数を持っているので、色入力はRGB値の配列と見なすことができます:

colour : {
        r : 255,
        g : 255,
        b : 255
}

要約すると、上の画像のピクセルの高さがわかっている場合、RGB 値の配列が提供されている場合、この画像の特定の色のy位置をどのように計算できますか?

前もって感謝します。