css的hue-rotate是调整了色相吗？

什么是色相？

色相就是HSL模型下的H

就是颜色的倾向

什么是HSL？

HSL，是区别于RGB的另一种颜色模型。

H代表Hue，就是色相。S代表Saturation，就是饱和度。L代表Lightness，就是亮度

这三者共同组成可以表示一个颜色

下面是调整HSL时的颜色在颜色选择器上的变化

调整色相时，色环上的颜色发生了变化

调整亮度时，色彩向左上或者右下移动

调整饱和度时，色彩向右上或者左下移动

hue-rotate和hue

那为什么说hue-rotate并不是调整了色相呢？

下面来看一个对比

上面的方块是直接调整hsl中的hue的值

而下面的方块是调整hue-rotate的值

为什么两个方块的颜色呈现出不一样的效果呢？

原因

那是因为hue-rotate并不是直接调整hue的值，而是用了另一种算法来计算结果

在这种算法中，颜色在hue-rotata 之后，亮度并不会改变，

在上面的实验中，我们也可以看到，上面的方块的亮度感受是有高有低的

而下面的方块亮度是统一的

120.0度的旋转将准确地将红色映射为绿色，绿色映射为蓝色，蓝色映射为红色。但是，此转换有一个问题，输入颜色的亮度没有保留。

这大概就是css标准所考虑到的吧