在前端开发中，我们常常需要获取颜色的不同属性值，包括红、绿、蓝三原色以及色调、饱和度、亮度等。那么，如何获取一个 Hex 格式的颜色值（例如 #FFA500）的色调呢？本文将为你介绍其中的实现方法。
了解 HSL 和 HSV
在深入讨论如何获取色调之前，我们需要先了解两个与颜色相关的概念：HSL 和 HSV。它们都是一种将颜色表示成三个参数的方式，包括：
- 色调（Hue）：用角度值表示，在圆形色谱上表示颜色。
- 饱和度（Saturation）：表示颜色的强度或纯度，取值范围为 0%-100%。
- 亮度（Lightness）或明度（Value）：表示颜色的明暗程度，取值范围为 0%-100%。
HSL 表示法将颜色表示为三个参数：H, S, L。而 HSV 表示法将颜色表示为三个参数：H, S, V。HSL 更适合描述人眼所感知到的颜色，而 HSV 则更适合进行颜色选择、拾取等交互操作。
从 Hex 色值计算色调
Hex 色值是一种十六进制的颜色表示方法，它由三组两位数的数字表示红、绿、蓝三原色的取值。例如 #FFA500 表示红色的取值为 255，绿色的取值为 165，蓝色的取值为 0。
要获取 Hex 色值的色调，我们需要先将其转换为 HSL 或 HSV 表示法，然后从中获取色调的取值。这里我们以 HSL 为例来实现这个过程。
将 Hex 色值转换为 RGB，再转换为 HSL
首先，我们需要将 Hex 色值转换为 RGB 值。具体的转换方法如下：
function hexToRGB(hex) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5), 16);
return { r, g, b };
}接下来，我们将 RGB 值转换为 HSL 值。具体的转换方法可以参考 Wikipedia 上的公式，实现如下：
-- -------------------- ---- -------
-------- ------------- -
----- - - ----- - ----
----- - - ----- - ----
----- - - ----- - ----
----- --- - ----------- -- ---
----- --- - ----------- -- ---
--- -- -- --
-- ---- --- ---- -
- - --
- ---- -- ---- --- - -- - -- -- -
- - -- - --- - -- - ---- - ------
- ---- -- ---- --- - -- - - -- -
- - -- - --- - -- - ---- - ----- - ----
- ---- -- ---- --- -- -
- - -- - --- - -- - ---- - ----- - ----
- ---- -- ---- --- -- -
- - -- - --- - -- - ---- - ----- - ----
-
- - ---- - ---- - --
-- ---- --- ---- -
- - --
- ---- -- -- -- ---- -
- - ---- - ---- - ---- - -----
- ---- -
- - ---- - ---- - -- - --- - -----
-
------ - -- --------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------