探索HSB到RGB的颜色转换

JavaScriptJavaScriptBeginner
立即练习

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

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

简介

在本实验中,我们将使用JavaScript探索HSB到RGB的颜色转换过程。我们将学习如何使用公式将HSB颜色值转换为RGB格式,并将输出转换为适当的值范围。在实验结束时,你将对颜色模型以及如何在JavaScript中使用它们有更好的理解。


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-28377{{"`探索HSB到RGB的颜色转换`"}} javascript/data_types -.-> lab-28377{{"`探索HSB到RGB的颜色转换`"}} javascript/arith_ops -.-> lab-28377{{"`探索HSB到RGB的颜色转换`"}} javascript/comp_ops -.-> lab-28377{{"`探索HSB到RGB的颜色转换`"}} end

HSB 转 RGB 转换

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

  • 打开终端/SSH 并输入 node 开始练习编码。
  • 使用 HSB 到 RGB 的转换公式 转换为适当的格式。
  • 输入参数应在以下范围内:H: [0, 360],S: [0, 100],B: [0, 100]。
  • 所有输出值应在 [0, 255] 范围内。

以下是可用于将 HSB 转换为 RGB 的代码:

const HSBToRGB = (h, s, b) => {
  s /= 100;
  b /= 100;
  const k = (n) => (n + h / 60) % 6;
  const f = (n) => b * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1)));
  return [255 * f(5), 255 * f(3), 255 * f(1)];
};

例如,如果你想将 HSB 颜色元组 (18, 81, 99) 转换为 RGB 格式,可以使用以下代码:

HSBToRGB(18, 81, 99); // [252.45, 109.31084999999996, 47.965499999999984]

总结

恭喜你!你已完成从HSB到RGB的实验。你可以在LabEx中练习更多实验来提升你的技能。

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