配色板生成
根据 HEX 基础色生成五档 RGB 明暗色阶
基础颜色
输入 3 位或 6 位 HEX 色值，可带 #，例如 #3a7、22c55e。请勿包含空格、透明度或其他文字；有效输入会即时更新色板。
五档 RGB 色阶
#00a13a#10b34c#22c55e#34d770#46e982部分通道达到 0 或 255，已截断到边界，因此实际变化可能小于标注偏移。
这些颜色如何生成？
五档分别将 R、G、B 通道同时加上 −36、−18、0、+18、+36，并将结果限制在 0–255。中间一档是基础色。这是简单的 RGB 明暗偏移，不是互补色、三色配色、HSL 明度调整或感知均匀的色阶。
接近黑色或白色时可能出现重复色。用于文字、按钮或背景前，请单独检查对比度；此工具不保证任何色阶组合满足可访问性要求。复制 CSS 会得到 --palette-1 到 --palette-5 五个变量。
计算在当前页面本地完成，输入色值不会写入浏览器存储或发送给统计服务。复制会将结果写入系统剪贴板。
完整说明还包括常见问题处理、操作示例、代码片段、FAQ 和相关工具，便于核对结果或排查问题。
工具说明
输入带或不带 # 的三位或六位 HEX 色值，工具对每个 RGB 通道分别增加 −36、−18、0、+18、+36，并限制在 0–255，得到五档明暗变化。不计算互补色、三色或四色配色，RGB 等步长也不代表视觉亮度等距。无效或空输入会清空色板，不再替换成默认颜色。接近纯黑或纯白时，通道截断可能产生重复色值。用于界面前，请将实际文字与背景组合送入对比度检查器验证。
生产可用片段
RGB 通道偏移样例
text
基础 RGB：51、102、153
偏移：-36、-18、0、+18、+36
#336699 → #0f4275, #215487, #336699, #4578ab, #578abd场景配方
核对五档色阶的计算
目标：明确通道偏移如何改变基础色。
- 输入 #336699 或简写 #369。
- 将五个色阶与下方样例核对。
- 复制目标色值，再与实际文字或背景颜色检查对比度。
结果：#336699 → #0f4275, #215487, #336699, #4578ab, #578abd
常见问题
可以输入哪些格式？
支持 #369、369、#336699 这样的三位或六位十六进制色值。不支持颜色名称、rgb()、hsl() 或带透明度的 HEX。
会生成互补色吗？
不会。这里只对各 RGB 通道增加相同固定数值，得到明暗变化，不是色彩和谐或感知等距的配色算法。
为什么有重复颜色？
通道值限制在 0–255。以纯黑为例，两个负向步长和原色都会保持 #000000，因此重复是正常结果。
生成的色阶自动满足无障碍要求吗？
不会。是否满足要求取决于实际前景、背景组合及用途，请另行检查文字对比度；生成色值不代表通过 WCAG。
输入无效颜色会怎样？
色板会清空并显示支持的 HEX 格式说明，不会将上一份有效色板冒充本次结果。
继续浏览