Javascript 将 HSB/HSV 颜色准确转换为 RGB

阅读时长 3 分钟读完

在前端开发中,我们经常需要处理颜色值。HSB(Hue、Saturation、Brightness)和 HSV(Hue、Saturation、Value)是两种常见的颜色表示方式,但在 Web 开发中,RGB(Red、Green、Blue)是最常用的颜色表示方式。因此,我们需要一种方法将 HSB/HSV 颜色值转换为 RGB 颜色值。

转换原理

要将 HSB/HSV 颜色值转换为 RGB 颜色值,需要了解它们之间的关系。首先,Hue 表示颜色的色相,取值范围为 0-360 度。Saturation 表示颜色的饱和度,取值范围为 0-100%。Brightness(HSB)或 Value(HSV)表示颜色的明度,取值范围同样为 0-100%。

RGB 颜色值由三个分量组成:Red、Green 和 Blue。每个分量的取值范围为 0-255。因此,需要将 HSB/HSV 颜色值转换为 0-255 的 RGB 颜色值。

下面是将 HSB/HSV 转换为 RGB 的公式:

其中,mod 表示求模运算,| 表示取整运算。

转换代码实现

下面是使用 Javascript 实现 HSB/HSV 到 RGB 转换的示例代码:

-- -------------------- ---- -------
-------- ----------- -- -- -
  --- - - - - --
  --- - - - - -- - ------------ - --- - -- - ----
  --- - - - - --
  --- -- -- --
  -- -- -- - -- - - --- -
    --- -- -- - --- -- ---
  - ---- -- -- -- -- -- - - ---- -
    --- -- -- - --- -- ---
  - ---- -- -- -- --- -- - - ---- -
    --- -- -- - --- -- ---
  - ---- -- -- -- --- -- - - ---- -
    --- -- -- - --- -- ---
  - ---- -- -- -- --- -- - - ---- -
    --- -- -- - --- -- ---
  - ---- -
    --- -- -- - --- -- ---
  -
  - - ------------- - -- - -----
  - - ------------- - -- - -----
  - - ------------- - -- - -----
  ------ --- -- ---
-

同样,我们也可以实现 RGB 到 HSB/HSV 的转换。下面是一个示例函数:

-- -------------------- ---- -------
-------- ----------- -- -- -
  - -- ----
  - -- ----
  - -- ----
  --- --- - ----------- -- ---
  --- --- - ----------- -- ---
  --- -- -- - - ----
  --- - - --- - ----
  - - --- -- - - - - - - ----
  -- ---- -- ---- -
    - - -- -- ----------
  - ---- -
    ------ ----- -
      ---- -- - - -- - -- - - - -- - - - - - --- ------
      ---- -- - - -- - -- - - - -- ------
      ---- -- - - -- - -- -

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈