算法拾色器

Question

我看明白了一个颜色选择器这样背后的基本算法：

我想从头开始实现这样的事情，但要了解基本的算法第一。

Answer 1

我相信这是为了跟随色相饱和度 - 亮度模型（或者与色调 - 饱和度值接近的东西）。

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

用这种方式来看待事物，右边的带代表色调，所以当我们移动它时，我们选择围绕圆柱体的旋转。

左边的正方形是从中心向外侧该气缸的切片。该正方形的Y轴表示亮度/亮度。在0亮度下（底部），我们变黑，不管别的什么。

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

请注意，这些（基本上所有的圆柱模型的颜色）有一些古怪的代表颜色。例如，在0的亮度/亮度下，另外两个输入（色调和饱和度）变得毫无意义，因为无论它们是否为纯黑色。同样，在最大亮度/亮度下，无论其他两个值如何，都可以获得纯白色。

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

与双锥模型的主要区别在于，在左侧而不是正方形时，我们最终会形成一个三角形。就像广场一样，左边将会有纯粹的灰色，从底部的纯黑色到顶部的纯白色。在右边，我们会在这个亮度下有不同程度的饱和度，在这两个亮度之间的中间可以达到最大饱和度。在越来越高的亮度水平下，越来越少的饱和度将可用，直到我们达到极端，饱和度总是为零。

在底部，我们有为零的亮度，所以你可以选择唯一的颜色是黑色。同样，在最顶端，唯一可以选择的颜色是白色。在两者之间的一半，你可以选择在选定角度最饱和的颜色（在这种情况下纯红色）。当您接近顶部/底部时，可以获得更高/更低的亮度，并且可用的最大饱和度会降低。

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