RGB 转 HSL 颜色转换

JavaScriptJavaScriptBeginner
立即练习

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

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何将 RGB 颜色元组转换为 HSL 格式。我们将使用 RGB 到 HSL 的转换公式,并使用 JavaScript 来实现它。在本实验结束时,你将更好地理解如何将 RGB 颜色转换为 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-28603{{"`RGB 转 HSL 颜色转换`"}} javascript/data_types -.-> lab-28603{{"`RGB 转 HSL 颜色转换`"}} javascript/arith_ops -.-> lab-28603{{"`RGB 转 HSL 颜色转换`"}} javascript/comp_ops -.-> lab-28603{{"`RGB 转 HSL 颜色转换`"}} end

RGB 转 HSL 转换

要将 RGB 颜色元组转换为 HSL 格式,请执行以下步骤:

  1. 打开终端/SSH 开始练习编码。
  2. 输入 node 并按回车键。
  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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程