HohoTools

颜色色阶生成器

一个品牌色很难直接撑起整个界面：放在按钮上要更深一档的悬停态，描边和阴影要再深几档，徽章、背景和暗色模式表面又要更浅的兄弟色。

使用方法

  1. 输入或粘贴 HEX 色值：带不带 # 均可，支持 3 位与 6 位写法。
  2. 网格展示原色、10 级混黑加深与 10 级混白减淡，共 21 档。
  3. 点击任意色块，即可复制该档的 HEX 色值。

常见问题

色阶是怎么算出来的？

在 sRGB 通道上做线性插值：对混合比例 r，每个通道等于 原通道 × (1 − r) + 目标通道 × r，四舍五入到整数；shade 的目标是纯黑，tint 的目标是纯白。比例从 10% 到 100% 按 10% 步进，因此 100% shade 就是纯黑、100% tint 就是纯白。混合发生在伽马编码的 sRGB 空间（即 HEX 码直读的数值），不是 OKLCH 这类感知均匀空间——口径与经典设计工具的混色一致，结果可预期、可复现。

为什么和 HSL 里降亮度的结果不一样？

因为算法不同。HSL 里调低 L 是沿感知亮度轴滑动，再换算回 RGB；本工具是让每个 RGB 通道直接向纯黑/纯白靠拢，饱和通道也会随之变深。两种口径没有对错，只是约定不同。请按设计系统的约定选用——本工具给出的是纯粹的通道混合结果，手工也能复算。

支持 3 位 HEX 缩写吗？

支持。标准 CSS 缩写会逐位展开后再计算：#f80 先展开为 #ff8800 再生成色阶。井号可省略；带 alpha 的 4 位/8 位写法会被明确拒绝——色阶只为不透明颜色定义。

色阶有什么用？

按钮的悬停/按下/禁用态、若隐若现的分割线与描边、保持品牌感的图表系列色、提示条背景，以及从单一品牌色推导的暗色模式表面。10 档足够覆盖一个应用的完整用色；固定的 10% 间距让梯度易于沟通——直接说"用 30% 那档"即可。

颜色会被上传吗？

不会。色阶在你输入的那一刻由浏览器本地计算，任何内容都不离开设备，关闭页面即消失。

相关工具

颜色混合器 "这两个颜色中间是什么色"是设计里的高频问题：渐变的中间停靠点要过渡顺滑不出色带、插画配色需要一座过渡桥色、客户换标时想看新旧品牌色对半掺的样子、或者给中性色掺一点品牌色做出 30% 的倾向感。 实用工具 随机颜色生成器 这款免费的随机颜色生成器在浏览器本地生成均匀分布的随机 HEX 颜色，随机源是 crypto.getRandomValues——浏览器为密钥和令牌保留的加密安全随机数。 实用工具 HEX 转 RGB 设计师交接色板时给的是 #FFA500，而写动画、做混色、调用一个只认数字的接口时，你需要的是十进制通道值——HEX 与 RGB 本是同一种颜色的两种写法，但切换场景总要换一种表达。 实用工具 颜色对比度检查器 低对比度文字是网络上最常见的无障碍问题：在你校色过的屏幕上刚好看的灰底灰字，放到阳光下的廉价手机上、对低视力读者、对四十岁以上的人，都可能完全读不清。 实用工具 图片取色器 看得见却叫不出名字的颜色，是前端开发、幻灯片设计和照片修图里每天都在发生的问题。 图片工具
了解更多

一个品牌色很难直接撑起整个界面：放在按钮上要更深一档的悬停态，描边和阴影要再深几档，徽章、背景和暗色模式表面又要更浅的兄弟色。靠肉眼挑这些档位，色相和饱和度很容易悄悄跑偏；按公式算出来的色阶，整条梯度才是一条连贯的线。这款免费的色阶生成器输入一个 HEX 色值，立刻展开成 21 档完整色阶：原色、10 级向黑色加深的 shade、10 级向白色减淡的 tint，每一档都以色块呈现，点击即复制 HEX。混合口径完全公开：在 sRGB 通道空间做线性插值，每个通道按"原通道 × (1 − r) + 目标通道 × r"计算后四舍五入，混合比例从 10% 到 100% 按 10% 步进——与设计工具里把图层压到纯黑/纯白上的算法一致，拿到的值可以复现、可以对齐。输入非法时明确报错，不会悄悄给出错误颜色。全部计算在浏览器本地完成，输入不上传、不存储、不进日志。在下方粘贴色值，生成你的色阶。