颜色工具

颜色明暗色阶生成器

输入十六进制颜色代码并设置阶数,快速生成向白色渐变的浅色调与向黑色渐变的深色调色阶列表。

运行工具

颜色明暗色阶生成器可根据输入的基准颜色,计算出一系列明暗过渡的衍生色阶。该工具支持常见的十六进制颜色代码,包括标准六位格式、三位简写形式以及省略前缀井号的输入文本。系统在解析前会自动补齐前缀并将简写代码展开。用户可以自由设置阶数数量(默认为10阶),并按需勾选生成浅色调(向纯白渐变)或深色调(向纯黑渐变)分组。计算过程中,每个颜色通道的数值均经过约束与四舍五入取整,最终输出规范的十六进制色值列表。若未输入具体颜色,工具默认以经典的浅蓝色(#3498db)作为基准进行计算;若输入的色值格式无法解析,界面将在结果面板中给出明确的错误提示。这为网页界面设计、UI组件悬停反馈以及设计系统调色板的构建提供了便捷的色彩阶梯参考。

使用说明

  1. 在基准颜色输入框中输入十六进制颜色代码,例如 #3498db 或 3498db,也可以输入三位简写如 #f00。
  2. 设置需要生成的色阶数量(阶数),默认为 10 阶。
  3. 根据设计需求,勾选或取消勾选浅色调与深色调复选框。
  4. 点击运行按钮,即可在下方查看生成的对应色阶列表及十六进制代码。

示例

  • 输入颜色 #3498db,阶数设为 5,同时勾选浅色调和深色调,可获得基准蓝色的 5 个浅色过渡色阶和 5 个深色过渡色阶。
  • 输入三位简写色值 f60,阶数设为 3,仅勾选生成深色调,工具将自动补齐为 #ff6600 并输出 3 个向黑色渐变的橙色深色调。

常见问题

输入颜色时必须带有井号(#)吗?

不需要。如果输入的颜色代码开头没有井号,工具会自动在前端添加井号前缀后再进行解析。

支持输入三位简写颜色代码吗?

支持。输入类似 #abc 或 f00 的三位十六进制代码时,系统会自动将每个字符双写扩展为标准六位格式后再计算色阶。

如果输入的颜色格式不合法会怎样?

若输入的文本无法被正确解析为十六进制颜色,结果区域会显示相应的错误提示信息。

浅色调与深色调是如何计算的?

浅色调是在基准色与纯白色之间均匀插值计算出的渐变色,深色调则是基准色与纯黑色之间的过渡色,所有通道值均限制在 0 至 255 并四舍五入。

嵌入此工具

使用以下代码,将这个可直接使用的 SmartPlusLab 工具添加到您的网站。