颜色色阶生成器
根据任意基础颜色生成更浅的浅色调和更深的深色调。
如何使用 颜色色阶生成器
- 输入 HEX 或 RGB 格式的基础颜色。
- 查看五个浅色调和五个深色调。
- 复制任意 HEX 值用于你的设计或 CSS。
关于 颜色色阶生成器
优秀的界面会使用一种颜色的多个层次,而不是单一的平面色值。以 HEX(#137256 或 #137)或 RGB(rgb(19,114,86))格式粘贴一个基础颜色,这个生成器就会返回十一个色值:你的基础色、五个向白色混合的浅色调,以及五个向黑色混合的深色调。这通常足以满足悬停和激活状态、边框、分隔线、细微背景以及界面层次感的需求。
各级色阶的间隔是均匀的——每一级浅色调都比上一级向 255 多推进六分之一,每一级深色调也以同样的比例向 0 靠近。每个结果都以可直接复制进 CSS 的 HEX 代码形式展示,基础颜色还会以色块形式预览,方便你确认输入的正是你想要的颜色。
需要了解的是:这是在 RGB 色彩空间中进行的直接混合,而不是感知均匀的色彩空间,所以各级间隔在数学上是均等的,但视觉上看起来未必均等——饱和度很高或很暗的基础颜色,在色阶两端往往会失去区分度。输出仅为 HEX 格式。如果打算在某个配色上放置文字,请用 对比度检查器 检查一下,颜色值转换可使用 颜色转换器。全部操作都在你的浏览器本地完成。
常见问题
浅色调和深色调有什么区别?
浅色调是你的颜色与白色混合而成,会更亮;深色调是你的颜色与黑色混合而成,会更暗。这个工具会分别为你生成五种浅色调和五种深色调。
支持哪些输入格式?
三位或六位形式的 HEX,以及类似 rgb(19,114,86) 的 RGB 格式。结果始终以 HEX 格式返回。
各级色阶是怎么计算出来的?
每一级都是向白色或黑色迈进的六分之一。浅色调 1 是向白色迈进六分之一,浅色调 5 则是迈进了六分之五;深色调的计算方式相同,只是方向相反。
可以把这些颜色用作 CSS 主题色阶吗?
可以。这十一个色值组成了一套现成的色阶,可用于按钮、悬停状态、界面表面和边框。把这些 HEX 代码复制进自定义属性,然后在样式表中引用即可。
为什么我最深的几个色调看起来几乎一样?
因为混合是在 RGB 空间中进行的,而不是感知均匀的色彩空间。随着各通道数值趋近于零,各级之间的差异会变得越来越难以分辨,这在深色或高饱和度的基础颜色上尤为明显。