颜色选择器的算法

Question

我希望了解颜色选择器背后的基本算法，如下所示：

我想从头开始实现这样的东西，但想先了解基本算法。

Answer 1

我认为这是为了遵循色调 - 饱和度 - 亮度模型（或者像色调饱和度值那样接近它）。

对于HSB，通常最容易将颜色视为圆柱体。 Hue表示围绕圆圈的旋转。饱和度是沿着圆柱轴的位置，亮度是从中心到外部的距离。

以这种方式观察事物，右边的乐队代表了Hue，所以当我们移动时，我们会选择围绕圆柱旋转。

左边的方块是从中心到外面的圆柱片。该正方形的Y轴表示亮度/亮度。在0亮度（底部），我们变黑，无论其他什么。

方形的X轴表示饱和度。在最左边是0饱和度，所以在最边缘，我们只有一条纯灰色带从底部的纯黑色到顶部的纯白色。向右移动，饱和度增加，直到我们到达右侧，在那里我们有纯净的（在这种情况下）红色从底部的最小亮度到顶部的最大亮度变化。

请注意，这些（基本上所有圆柱形的颜色模型）都有一些关于它们如何表示颜色的奇怪之处。例如，在光/亮度为0时，另外两个输入（色调和饱和度）变得毫无意义，因为无论它们是什么，都会得到纯黑色。同样，在最大亮度/亮度下，无论其他两个值如何，都会获得纯白色。

如果你要从头开始编写代码，我个人会考虑尝试实现双锥模型。这不是圆柱体，而是将颜色视为双锥体，每端的半径为0，中间的半径最大。在最小或最大亮度下，我们的半径为0，准确地反映了纯黑色或纯白色没有颜色成分的事实。在这两个极端之间大约有一半，我们有可能达到最大饱和度。

与双音模型的主要区别在于左侧而不是方形，我们最终得到一个三角形。就像广场一样，左边会有纯灰色，从底部的纯黑色到顶部的纯白色。向右移动，我们在该亮度处具有不同的饱和度，最大饱和度恰好位于两者之间。在较低和较高的亮度水平下，可以获得越来越少的饱和度，直到我们达到极值，饱和度始终为零。

在底部，我们的亮度为零，因此您可以选择的唯一颜色是黑色。同样，在最顶部，您可以选择的唯一颜色是白色。在两者之间，您可以在所选角度选择最饱和的颜色（在这种特殊情况下为纯红色）。当您靠近顶部/底部时，可以获得更高/更低的亮度，并且可以减少最大饱和度。

就像圆柱形模型一样，您还需要一些方法来选择色调。就个人而言，我把它放在左边而不是右边，但也许这只是我。我还将它绘制成一个圆圈，显示混合在一起的颜色，并有一条用户拉到圆圈上选定角度的线条。至少在我看来，这不会令人困惑。缺点是圆圈显然比矩形占用更多的屏幕空间（但让它面对它：640x480显示器不再是非常常见的，所以这不是一个大问题）。