css - 是否有一个公式可以在 RGB 表示中获得不同的颜色

Question

一种颜色可以表示为红色、绿色和蓝色的混合。

例如:(255,51,153)=粉色

是否有任何好的公式可以通过更改一个变量来获得不同的颜色？例如 (10x,22x,2x^2)。所以当 x=1,2,3,4,.... 它会给出不同的颜色，如红色，绿色，青色，蓝色......等。

Answer 1

也许您对使用 HSL/HSV 颜色更感兴趣。定义饱和度和亮度并调整色调以获得不同的颜色。查看HSL and HSV wiki了解更多。将色调调整 15 到 30 度会产生明显不同的颜色，而不会影响饱和度或亮度。

CSS中hsl的一个例子如下。

<h1 style="color:hsl(0,50%,100%);">HSL Test</h1> //this will be red

第一个值为 0 是红色，前进 120 度会变成绿色，再往前 120 度会变成蓝色，最后一个 120 会让你回到红色，因为度数系统是基于 360 度的圆圈。所以 0 和 360 是相同的，只是 60 和 420。接下来的两个值是基于从 0% 到 100% 的百分比来定义该属性的强度。它们很难解释，所以我快速做了一个 fiddle that demonstrates this.

所以要回答你的问题，有一个很好的公式来调整颜色，它只取决于你想要改变它的精确程度。在 RGB 世界中，您可以通过统一降低值来使事物变暗，或者通过提高它们来相反。您可以通过按预期调整各个颜色值来增加不同颜色的存在。但是，如果您尝试循环整个色轮，那么使用 RGB 值很难 ( although entirely possible )。要吸取的真正教训是，有多种方法可以定义特定颜色，并且每种方法都有不同的遍历光谱的方法。 HSL 和 HSLA 对许多人来说非常直观，因为实际上不必猜测它的值。从色轮上选择一个特定的色调，记住ROYGBIV正如您想象的 0-359 的值。根据您希望颜色的大胆程度定义饱和度，然后根据亮度定义亮度。正如您将在该 fiddle 中看到的那样，在大多数情况下，它比 RGB 有用得多。使用 javascript 制作整个色谱的子集只需要几行代码。