JavaScript の基礎 | RGB から HSB への変換

はじめに

この実験では、JavaScript プログラミング言語の基本を学びます。この実験は、変数、データ型、制御構造、関数など、JavaScript の基本をしっかりと理解するのに役立つように設計されています。一連の実践的な演習と例を通じて、参加者は JavaScript でコードを書き、簡単なプログラムを作成する方法を学びます。この実験は、ほとんどまたはまったくプログラミング経験のない初心者に適しています。

RGB から HSB への変換

RGB カラータプルを HSB 形式に変換するには、次の手順に従います。

ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。
RGB から HSB の変換式を使用して、RGB カラータプルを適切な HSB 形式に変換します。
入力パラメータの範囲は [0, 255] ですが、結果の値の範囲は次のとおりです。

H: [0, 360]
S: [0, 100]
B: [0, 100]

次に、JavaScript の関数です。

const RGBToHSB = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const v = Math.max(r, g, b),
    n = v - Math.min(r, g, b);
  const h =
    n === 0
      ? 0
      : n && v === r
        ? (g - b) / n
        : v === g
          ? 2 + (b - r) / n
          : 4 + (r - g) / n;
  return [60 * (h < 0 ? h + 6 : h), v && (n / v) * 100, v * 100];
};

この関数を次のように呼び出すことができます。

RGBToHSB(252, 111, 48);
// [18.529411764705856, 80.95238095238095, 98.82352941176471]

まとめ

おめでとうございます！RGB から HSB の実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。

実践による JavaScript の基礎

はじめに

RGB から HSB への変換

まとめ