- Published on
HSV and HSL gradient Tools ( Built-in Drop-in replacement )
- Authors

- Name
- CoresightQuant
NOTE
本文为公开交易策略的技战术复盘,聚焦方法逻辑、交易场景与风险边界。
策略解读
这个公开脚本是一个纯粹的“颜色工具库”,它解决了一个在交易图表中常见但容易被忽视的问题:如何让颜色渐变变得自然、可控且信息饱满。作者 kaigouthro 用一个简洁的库封装了 RGB 与 HSV 之间的转换逻辑,并进一步提供了 HSL/HSV 渐变的参考实现。在演示图中,内置的默认渐变被放置在画布中央,而上下两侧则分别用 HSL 和 HSV 两种颜色模型生成渐变,用于对比和替换。
在量化交易场景中,颜色从来不只是“好看”的装饰。大多数交易平台默认的 K 线上涨红色、下跌绿色,或者紫色、青色等,都是基于 RGB 空间的简单赋值。但 RGB 是一个面向硬件显示的颜色模型,它把颜色拆分为红、绿、蓝三个通道的强度,并不符合人类对颜色的感知。比如,从红色渐变到绿色,如果在 RGB 空间直接做线性插值,中间可能会经过暗淡的棕色或灰色,导致图表上的过渡段看起来“脏乱”。
HSV 和 HSL 则是为人类感知设计的颜色模型。它们将颜色分解为色相、饱和度与亮度/明度三个维度。色相决定颜色的基本信息,如红、绿、蓝;饱和度决定颜色的鲜艳程度;亮度/明度决定颜色的黑暗或明亮程度。使用 HSV 或 HSL 进行渐变,可以让颜色在色相环上平滑走动,保持鲜艳或柔和,而不会产生不期望的中间暗色。
这个脚本提供的“Drop-in replacement”意味着你可以直接用它的颜色转换函数替换平台内置的颜色处理函数,而不需要大量修改绘图逻辑。作者特意在渐变上下两侧分别使用 HSL 和 HSV,目的就是让用户直观对比两种颜色空间在渐变效果上的差异。正如 TODO 中所说,纯黑色 #000000 是一个特殊问题:在 HSV 模型中,黑色的色相和饱和度为 0,只有亮度为 0,这意味着在做色相插值时黑色会成为一个不稳定的端点,容易导致渐变中出现异常的色相跳变。
对于量化交易者而言,这类工具的价值在于它允许你将任意数值(如 RSI、MACD 柱、成交量、涨跌幅)映射到 HSV 色相环上,从而形成信息密度更高的图表。例如,将震荡指标的超卖区域映射为青蓝色、超买区域映射为紫红色,并通过饱和度表达动能强度,通过明度表达风险水平。这样一来,图表上的每一次颜色变化都携带着多维信号,而不仅仅是简单的红绿二分。
名词解释
RGB:红绿蓝三原色光模式,一种加色模型。通过三个数值(0-255)分别表示红、绿、蓝的强度。它是显示屏和图像传感器的基础,但三个通道之间相互影响,不适合做直觉上的颜色渐变。
HSV:色相-饱和度-明度模型。色相用角度表示(0-360),决定色彩类型;饱和度(0-100%)表示颜色纯度;明度(0-100%)表示色彩的明亮程度。HSV 紧密贴合美术和设计中的颜色感知,适合用来描述“这是什么颜色,有多浓,有多亮”。
HSL:色相-饱和度-亮度模型,与 HSV 类似,但亮度定义不同。HSL 中亮度为 50% 代表标准颜色,通过上下调节亮度实现纯黑或纯白;HSV 中明度为 100% 代表纯色,降低明度走向黑色。两者在色相、饱和度上相近,但在亮度/明度的计算和插值上存在差异。
色相(Hue):人眼区分颜色的基本属性,通常用色相环上的角度表示。0° 为红色,120° 为绿色,240° 为蓝色。在图表中,色相可以用于表达方向或类别,如多头为红色、空头为绿色。
饱和度(Saturation):颜色的纯净程度,从灰色到纯色。饱和度为 0% 时表现为灰度,100% 时表现为完全鲜艳的色调。在交易指标中,饱和度可以表达信号强度:信号越强,颜色越艳丽。
明度/亮度(Value/Lightness):描述颜色的明亮程度。明度低时颜色发黑,明度高时颜色发白。在数据可视化中,明度可以用来表达绝对水平或超买超卖状态。
渐变(Gradient):一种颜色平滑过渡到另一种颜色的过程。颜色空间的选择决定了渐变的中间色是否自然。好的渐变能避免出现杂色或暗色,提高图表可读性。
Drop-in replacement:指一个模块或函数可以在不改动外部调用逻辑的前提下,直接替代另一个组件。这里指该库可以作为内置颜色转换函数的直接替代品。
策略思路讲解
虽然这个脚本本身不构成一个交易策略,但它为策略的信号可视化提供了底层工具。一个完整的量化策略通常包含信号生成、仓位管理和风险控制,而信号可视化往往被忽略。实际上,一个清晰的颜色映射方案能显著提高交易者快速识别市场状态的能力。
以常见的双均线策略为例,传统做法是当短期均线向上穿越长期均线时,在图表上绘制红色箭头或标记;反之绘制绿色箭头。如果结合 HSV 渐变工具,我们可以设计更细腻的信号表达:当短期均线与长期均线的差值(动力动能)从负转正时,将背景或柱状图从蓝色渐变到红色,色相表示动量方向,饱和度表示乖离程度,明度表示趋势的加速度。当乖离率很高时,饱和度达到 100%,明度提高,信号异常醒目;当乖离率接近零时,颜色退化为灰色,避免引起误判。
另一个典型应用是 RSI 指标。RSI 的取值范围是 0-100,传统使用 30、50、70 作为分界线。我们可以将 RSI 数值映射到 HSV 色相环的 180° 到 360° 区间:RSI 从 30 到 70 映射为青绿色到橙黄色,表示中性区域;RSI 低于 30 映射为深蓝色,高于 70 映射为紫红色。饱和度则根据 RSI 偏离 50 的程度动态调整,偏离越多越鲜艳。这种映射方式比单一的红绿色带更富有层次感,能够同时呈现超买超卖水平、动量和潜在转折点。
还可以将 HSV 渐变用于订单簿深度或成交量分布的可视化。把某个价格区间的成交量映射为色相:低成交量区域使用冷色(蓝、青),高成交量区域使用暖色(红、黄),中间通过明度表达价格的相对高低。这样,交易者可以从图表背景的“热力图”一眼看出筹码密集区和突破关键点。
在实际落地中,你不需要关心底层算法,只需要知道该库提供了从 RGB 到 HSV 的转换函数,以及 HSV 颜色的构造接口。你可以传入任意 RGB 颜色,得到对应的色相、饱和度、明度值,然后对这三个值进行插值,再转换为可绘制的颜色。这种“先分解到感知空间,再插值,再合成”的思路,是制作高质量图表渐变的通用方法论。
值得注意的是,脚本作者特意提到 HSL 和 HSV 的区别。对于趋势强度可视化,HSV 更合适,因为明度能直观表达“昏暗=弱势/下跌”,而饱和度则表达“鲜艳=强势/上涨”。对于背景网格或淡色区域的填充,HSL 往往更好,因为它的亮度可控性更强,不容易出现刺眼的过亮颜色。
优点
-
颜色过渡自然,避免 RGB 插值的暗色问题:在 RGB 空间直接做线性渐变时,中间颜色常常偏离预期,产生灰暗或浑浊的过渡色。HSV/HSL 通过色相、饱和度、明度三个独立维度插值,能够保持颜色鲜艳且平滑,例如从红色渐变到黄色,中间会经过标准的橙色,而不是脏棕色。
-
降低视觉噪声,提升信号辨识度:使用 HSV 后,信号强度可以用饱和度或明度来表达,而不是依赖红绿两色的亮度变化。交易者可以在不额外添加文字的情况下,根据颜色深浅快速判断纪律水平。
-
可作为内置颜色功能的直接替换:作者将其设计为“Drop-in replacement”,意味着在现有图表中,你只需替换颜色计算函数即可获得新的渐变效果,无需改动绘图逻辑、坐标轴、线条厚度等其他部分,迁移成本极低。
-
同时提供 HSL 和 HSV 两种模型,便于场景选择:不同应用场景适合不同颜色模型。该工具同时覆盖这两种主流感知颜色空间,让使用者能够对比选择,甚至混合使用,例如用 HSV 画主趋势线,用 HSL 画背景阴影。
-
支持透明度参数,适合多层信息叠加:脚本的 rgbhsv 函数接受透明度参数,这样可以将渐变信息叠加在 K 线或其它指标上,而不遮挡原有数据。透明度可以进一步表达时间权重或样本数量,增加可视化维度。
-
开源且可扩展,方便二次开发:作为一个公开社区的库,它提供了基础函数,任何人都可以在此基础上扩展出更适合自己策略的颜色映射逻辑。
缺点
-
纯黑色 #000000 的处理尚未完善:作者在 TODO 中明确标注了这个问题。在 HSV 空间中,黑色的色相和饱和度都是未定义的,当渐变端点包含纯黑时,插值算法可能产生随机色相,导致渐变中出现不合理的杂色。
-
计算开销相对较高:RGB 到 HSV 的转换涉及多次条件判断和浮点运算,在每根 K 线、多个对象上反复调用会带来一定的性能开销。对于高频分钟级策略,尤其是需要实时渲染大屏监控时,可能需要优化缓存。
-
颜色映射的主观性强,容易误导读盘:不同人对颜色的直觉不同,比如某些交易者习惯红涨绿跌,另一些则相反。若强行使用色相环映射,可能导致使用者需要重新训练视觉习惯,增加决策误差。
-
对色盲使用者不友好:HSV 色相环中,红绿色盲用户难以区分部分角度变化;如果策略依赖红绿渐变表达多空信号,会降低可访问性。
-
缺乏完整的策略逻辑,只是底层工具:脚本只处理颜色转换,不包含任何趋势判断或震荡判断。普通交易者直接使用无法获得交易信号,必须自行设计数值到颜色的映射规则。
-
渐变端点的选择没有普适原则:虽然工具提供了转换能力,但如何选择色相区间、饱和度和明度范围,仍然需要人工试验。没有内置 “红涨绿跌”或“冷暖色”等约定俗成的模板,上手需要一定经验。
起源年份考证
该类方法——将 RGB 颜色转换为更符合人类感知的颜色空间,并用于数据可视化中的渐变插值——并非最近才出现。根据公开的技术史资料,这一类方法的起源和普及时间可梳理如下:
- 1960年代:RGB 色彩模型广泛应用于彩色显示器和扫描设备。但当时的研究者已经注意到 RGB 在颜色编辑和渐变生成上的局限,开始探索更直观的颜色空间。
- 1974年:计算机图形学先驱 A. R. Smith 提出了 HSV 颜色空间,正式将色相、饱和度、明度概念引入数字图像处理。该模型主要用于用户交互式的颜色选择器。
- 1978年:George H. Joblove 和 Donald Greenberg 发表了关于 HSL 颜色空间的论文,完善了亮度定义,使渐变计算在图形学中更稳定。此后 HSV 与 HSL 并称为两大感知颜色模型。
- 1980年代:个人电脑图形界面普及,颜色选择器大量采用 HSV/HSL,同时绘图软件中的渐变工具开始允许用户在不同颜色空间下插值,以解决 RGB 插值偏暗的问题。
- 2000年代:量化交易逐渐个人化,图表平台开始支持脚本编程,交易者利用 HSV/HSL 对指标进行自定义着色,以提升图表信息密度。
- 2020年代:公开交易社区中出现了一批如 hsvColor 这类轻量级颜色库,作者通常借鉴计算机图形学中的标准算法并加以适配,使普通交易者也能使用专业的渐变渲染技术。
需要说明的是,以上是基于“该类方法”(即感知颜色空间变换与渐变插值)的行业公认时间线考证,并非针对本脚本作者个人创造年份的考证。该具体脚本的发布年份无法从现有信息中准确查证。
改进建议
-
解决 #000000 端点问题:可以在转换函数中增加一个特殊分支,当输入为纯黑色时,默认使用色相 0 或继承两端中另一端的色相,并单独设置饱和度为 0,从而避免插值时产生随机色相。或者在渐变插值过程中,跳过黑色点的色相插值,仅对明度插值。
-
增加 HSL 转换的函数接口:当前工具主要聚焦 HSV,虽然演示中有 HSL 渐变,但没有作为核心接口完整暴露。建议补充 rgbhsl、hsl 两个函数,并允许在同一个渐变标记中混用 HSL 和 HSV,进一步拓展使用场景。
-
提供色盲友好预设色板:在库中内置若干经过调试的色相区间,例如蓝-橙、绿-紫等高对比度组合,避免依赖红绿搭配。这可显著提升在不同视觉条件下的可读性,也符合现代量化终端对无障碍设计的要求。
-
加入渐变端点与色相映射方向的参数化控制:允许用户设定渐变的起始色相、结束色相,以及是否绕色相环走最短路径或固定方向(顺时针/逆时针)。许多默认渐变问题源于色相插值方向不明确,导致中间出现非预期颜色。
-
优化性能并支持缓存:对于反复计算相同 RGB 值的情况,可以引入颜色转换结果的缓存表,特别是当 RGB 输入来自固定集合(如颜色常量)时,能够显著降低计算时间。同时使用查找表替代浮点运算,可让脚本在低配设备上运行更流畅。
-
增加数值区间到颜色的自动映射工具:将 “数值范围——色相/饱和度/明度范围” 的映射过程封装成一个通用函数,允许交易者设定输入的最小值、最大值和输出颜色空间的上下限。这将大大降低使用者将指标数值转换为渐变颜色的工作难度。
-
支持主题模式一键切换:提供“浅色主题”和“深色主题”两套默认渐变参数,在深色背景下采用高饱和、低明度的颜色,在浅色背景下降低饱和度、提高明度,保证渐变在两种常见界面环境下都清晰可辨。
-
补充可视化调试面板:允许在一个独立的小窗口中直接预览不同曲线形状和参数设置下的渐变效果,类似绘图软件中的色条编辑器。这可以帮助交易者在不修改图表代码的情况下快速调出满意的颜色方案。
总结
HSV 与 HSL 渐变工具看似只是一个颜色转换库,但它背后的理念是量化图表信息表达的一次升级。在传统 RGB 模式下,颜色只是“三盏灯”的亮度组合,难以承载方向、强度、速度等多重意义;而在 HSV/HSL 模式下,色相、饱和度、明度对应着不同的信息维度,使得一张图表可以同时呈现多种市场状态。
本文剖析了该公开库的核心功能、设计思路与潜在问题,并给出了从 RGB 到 HSV 的映射逻辑在交易策略中的应用方法。它不能告诉你什么时候买入或卖出,但它能帮助你更清晰地看到已经发生的趋势和动量变化。就像一副眼镜让模糊的指标变得分明,颜色空间的正确选择也能让复杂的市场数据更直观地进入交易者的认知系统。
需要坦诚的是,该工具仍有若干待改进之处,尤其是黑色端点的插值问题。但瑕不掩瑜,作为一种可替换的颜色计算方案,它提供了快速迭代色彩可视化方案的基础。对于量化交易者而言,掌握并善用这类低层工具,往往能创造出具有高辨识度的个人图表风格,从而在信息过载的行情界面中,获得一丝独特的竞争优势。