免费在线工具内容创作

双色渐变色卡生成器

选定渐变两端的颜色，为数字绘画的明暗过渡、插画或网页主题制作一组色阶。结果可以直接复制为 CSS 变量。

计算在浏览器中完成，无需账号或 API 密钥。

计算结果

返回输入

#284B91
#77708D
#9F8A89
#BD9F85
#D6B181
#ECC17D
#FFCF78

色阶数: 7
CSS 插值空间: srgb-linear

:root {
  --palette-1: #284B91;
  --palette-2: #77708D;
  --palette-3: #9F8A89;
  --palette-4: #BD9F85;
  --palette-5: #D6B181;
  --palette-6: #ECC17D;
  --palette-7: #FFCF78;
}

使用方法

选择渐变起点和终点的屏幕颜色。
设定 3 至 12 个色阶，并选择混合色彩空间。
更新色卡，比较各级颜色，再复制 CSS 变量使用。

选择中间色的明亮程度

编码 sRGB 直接对已编码的红、绿、蓝分量插值。线性光 sRGB 先把分量转换成相对光强，再进行混合。试试将黑色和白色分为三阶，两种模式对应的中间色分别是 #808080 和 #BCBCBC。

在绘画里使用色阶

可以从物体的亮部和暗部各挑一种颜色，先用五个色阶区分大块明暗，再增加级数细分过渡。改变级数后，两端颜色保留在原来的位置，方便逐次对比中间色。

常见问题

为什么有些相邻级别的颜色相同？

输出十六进制色值时，每个通道会取整到 256 个可表示的值之一。两端距离很近时，多个级别可能得到相同色值。

可以按这些步长调配实体颜料吗？

这里的步长对应 sRGB 屏幕色。实际调色效果还与颜料、媒介和画材表面有关，请在要使用的纸张或画布上试色。

输入你的内容