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