はじめに
この実験では、JavaScript プログラミングの世界に深く突き入り、HSL から RGB への変換について学びます。HSL から RGB への変換公式と、それを使って HSL カラー タプルを RGB 形式に変換する方法を紹介します。この実験が終わるとき、JavaScript で色を扱う方法と、美しい配色を作成するために HSL 値を操作する方法について、より深い理解を得ることができるようになります。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、JavaScript プログラミングの世界に深く突き入り、HSL から RGB への変換について学びます。HSL から RGB への変換公式と、それを使って HSL カラー タプルを RGB 形式に変換する方法を紹介します。この実験が終わるとき、JavaScript で色を扱う方法と、美しい配色を作成するために HSL 値を操作する方法について、より深い理解を得ることができるようになります。
HSL 形式のカラー タプルを RGB に変換するには、次の手順に従います。
node
と入力します。以下は、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 でさらに実験を練習することができます。