颜色选择器算法
Algorithm for color picker
我想了解像这样的颜色选择器背后的基本算法：
我想从头开始实现类似的东西，但想先了解基本算法。
我相信这是为了遵循 hue-saturation-brightness 模型（或者类似 hue-saturation-value 的模型）。
对于 HSB，通常最容易将颜色视为圆柱体。色调代表围绕圆圈的旋转。饱和度是沿圆柱轴的位置，亮度是中心到外侧的距离。
这样看，右边的带代表色相，所以当我们移动它时，我们选择了围绕圆柱体的旋转。
左边的正方形是那个圆柱体从中心到外面的切片。该正方形的 Y 轴表示 lightness/brightness。在亮度为 0（底部）时，无论其他情况如何，我们都会变黑。
正方形的X轴表示饱和度。最左边是 0 饱和度，所以在最边缘，我们只有一条纯灰色带，从底部的纯黑色到顶部的纯白色。向右移动，饱和度增加，直到我们到达右侧，在那里我们有纯红色（在这种情况下）从底部的最小亮度到顶部的最大亮度变化。
请注意，这些（基本上所有圆柱形颜色模型）在表示颜色的方式上有一些……奇怪之处。例如，在 light/brightness 为 0 时，其他两个输入（色调和饱和度）变得毫无意义，因为无论它们如何，您都会得到纯黑色。同样，在最大值 lightness/brightness 时，您会得到纯白色，而不管其他两个的值如何。
如果您打算从头开始编写代码，我个人会考虑尝试实施 bi-conic 模型。这不是圆柱体，而是将颜色视为 double-cone，两端的半径为 0，中间有一些最大半径。在最小或最大亮度下，我们的半径为 0，准确反映了纯黑或纯白没有颜色成分的事实。大约在这两个极端之间的中间位置，我们有可能达到最大饱和度。
与双锥模型的主要区别在于，在左侧而不是正方形，我们最终会得到一个三角形。就像正方形一样，左侧会有纯灰色，从底部的纯黑色到顶部的纯白色。向右看，我们在该亮度下会有不同程度的饱和度，最大饱和度恰好介于两者之间。在越来越低的亮度水平下，可用的饱和度会越来越低，直到我们到达极端，饱和度始终为零。
底部的亮度为零，因此您只能选择黑色。同样，在最顶部，您可以选择的唯一颜色是白色。在两者之间，您可以在所选角度选择最饱和的颜色（在这种特殊情况下为纯红色）。当您接近 top/bottom 时，您可以获得 higher/lower 亮度，并且可用的最大饱和度会降低。
就像圆柱模型一样，您也需要一些方法来选择色调。就个人而言，我会把它放在左边而不是右边，但也许这只是我。我还将它画成一个圆圈，显示混合在一起的颜色，并有一条线，用户可以在圆圈上拉到选定的角度。至少在我看来，这不会那么令人困惑。缺点是圆形明显比矩形占用更多屏幕 space（但让我们面对现实吧：640x480 显示器不再很常见，所以这不是什么大问题）。
我想了解像这样的颜色选择器背后的基本算法：
我想从头开始实现类似的东西，但想先了解基本算法。
我相信这是为了遵循 hue-saturation-brightness 模型（或者类似 hue-saturation-value 的模型）。
对于 HSB，通常最容易将颜色视为圆柱体。色调代表围绕圆圈的旋转。饱和度是沿圆柱轴的位置，亮度是中心到外侧的距离。
这样看，右边的带代表色相，所以当我们移动它时，我们选择了围绕圆柱体的旋转。
左边的正方形是那个圆柱体从中心到外面的切片。该正方形的 Y 轴表示 lightness/brightness。在亮度为 0（底部）时，无论其他情况如何，我们都会变黑。
正方形的X轴表示饱和度。最左边是 0 饱和度，所以在最边缘，我们只有一条纯灰色带，从底部的纯黑色到顶部的纯白色。向右移动，饱和度增加，直到我们到达右侧，在那里我们有纯红色（在这种情况下）从底部的最小亮度到顶部的最大亮度变化。
请注意，这些（基本上所有圆柱形颜色模型）在表示颜色的方式上有一些……奇怪之处。例如，在 light/brightness 为 0 时，其他两个输入（色调和饱和度）变得毫无意义，因为无论它们如何，您都会得到纯黑色。同样，在最大值 lightness/brightness 时，您会得到纯白色，而不管其他两个的值如何。
如果您打算从头开始编写代码，我个人会考虑尝试实施 bi-conic 模型。这不是圆柱体，而是将颜色视为 double-cone，两端的半径为 0，中间有一些最大半径。在最小或最大亮度下，我们的半径为 0，准确反映了纯黑或纯白没有颜色成分的事实。大约在这两个极端之间的中间位置，我们有可能达到最大饱和度。
与双锥模型的主要区别在于，在左侧而不是正方形，我们最终会得到一个三角形。就像正方形一样，左侧会有纯灰色，从底部的纯黑色到顶部的纯白色。向右看，我们在该亮度下会有不同程度的饱和度，最大饱和度恰好介于两者之间。在越来越低的亮度水平下，可用的饱和度会越来越低，直到我们到达极端，饱和度始终为零。
底部的亮度为零，因此您只能选择黑色。同样，在最顶部，您可以选择的唯一颜色是白色。在两者之间，您可以在所选角度选择最饱和的颜色（在这种特殊情况下为纯红色）。当您接近 top/bottom 时，您可以获得 higher/lower 亮度，并且可用的最大饱和度会降低。
就像圆柱模型一样，您也需要一些方法来选择色调。就个人而言，我会把它放在左边而不是右边，但也许这只是我。我还将它画成一个圆圈，显示混合在一起的颜色，并有一条线，用户可以在圆圈上拉到选定的角度。至少在我看来，这不会那么令人困惑。缺点是圆形明显比矩形占用更多屏幕 space（但让我们面对现实吧：640x480 显示器不再很常见，所以这不是什么大问题）。