JavaScript による HSL から RGB への変換

JavaScriptJavaScriptBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、JavaScript プログラミングの世界に深く突き入り、HSL から RGB への変換について学びます。HSL から RGB への変換公式と、それを使って HSL カラー タプルを RGB 形式に変換する方法を紹介します。この実験が終わるとき、JavaScript で色を扱う方法と、美しい配色を作成するために HSL 値を操作する方法について、より深い理解を得ることができるようになります。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") subgraph Lab Skills javascript/variables -.-> lab-28378{{"JavaScript による HSL から RGB への変換"}} javascript/data_types -.-> lab-28378{{"JavaScript による HSL から RGB への変換"}} javascript/arith_ops -.-> lab-28378{{"JavaScript による HSL から RGB への変換"}} javascript/comp_ops -.-> lab-28378{{"JavaScript による HSL から RGB への変換"}} end

JavaScript を使って HSL を RGB に変換する

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

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

以下は、HSL から RGB への変換公式の JavaScript コードです。

const HSLToRGB = (h, s, l) => {
  s /= 100;
  l /= 100;
  const k = (n) => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = (n) =>
    l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  return [255 * f(0), 255 * f(8), 255 * f(4)];
};

この関数を使用するには、引数として H、S、および L の値を指定します。

HSLToRGB(13, 100, 11); // [56.1, 12.155, 0]

まとめ

おめでとうございます!あなたは HSL から RGB への実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに実験を練習することができます。