RGB から HSL への色変換

はじめに

この実験では、RGB カラー タプルを HSL 形式に変換する方法を探ります。RGB から HSL への変換式を使用し、JavaScript を使って実装します。この実験が終わるとき、RGB カラーを HSL 形式に変換し、プロジェクトで色の値を操作する方法をより深く理解しているでしょう。

Skills Graph

RGB から HSL への変換

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

1. コーディングの練習を始めるために、ターミナル/SSH を開きます。
2. node と入力し、Enter キーを押します。
3. RGB から HSL の変換式を使用して、適切な形式に変換します。
4. すべての入力パラメータが [0, 255] の範囲内に収まることを確認します。
5. 得られる値は、H: [0, 360]、S: [0, 100]、L: [0, 100] の範囲内に収まる必要があります。

次に、JavaScript の RGBToHSL 関数の例を示します。

const RGBToHSL = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const l = Math.max(r, g, b);
  const s = l - Math.min(r, g, b);
  const h = s
    ? l === r
      ? (g - b) / s
      : l === g
        ? 2 + (b - r) / s
        : 4 + (r - g) / s
    : 0;
  return [
    60 * h < 0 ? 60 * h + 360 : 60 * h,
    100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
    (100 * (2 * l - s)) / 2
  ];
};

RGBToHSL 関数の使用例を次に示します。

RGBToHSL(45, 23, 11); // [21.17647, 60.71428, 10.98039]

まとめ

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