从一个主色生成 50-950 颜色色阶:设计系统调色板实操
只给一个品牌主色,如何用 HSL 亮度推出完整的明暗色阶?这篇讲清 tint 与 shade 的区别、50 到 950 的设计系统约定、按亮度挑 UI 状态色,附真实 hex 例子。
从一个主色生成 50-950 颜色色阶:设计系统调色板实操
设计师常常只丢给前端一个品牌主色,比如 #3b82f6,然后说"按钮浅一点、文字深一点"。可 Tailwind、Radix 这类设计系统要的不是一个孤值,而是从浅到深整整 11 档色阶。手调 55 个 hex 既慢又容易飘。这篇讲清楚:从一个基色推出明暗色阶的原理,以及 50 到 950 在真实项目里各自该放在哪儿。
tint 和 shade 到底差在哪
很多人把"调浅"和"调暗"当成一回事,其实它们是亮度轴上相反的两个方向。tint 是往基色里掺白,亮度升高,饱和度通常略降,得到的是清浅的近白色,适合做大块背景和 hover 填充。shade 是往基色里掺黑,亮度降低,得到的是沉稳的深色,适合做正文文字和边框。
一条完整色阶就是基色同时往这两个方向延展:上半截全是 tint,下半截全是 shade,基色本身落在中间某一档。理解了这一点,你就明白为什么 50 档跟你的品牌色"长得完全不像":50 是最浅的那一抹 tint,不是基色的近亲。
为什么不能按固定百分比加减亮度
最朴素的做法是每档加减 10% 亮度,但两端会塌。浅色端三四档之后全挤成分不清的近白,深色端两三档就压到纯黑。原因是人眼对亮度的感知不是线性的,接近白和接近黑的区域里,相同的亮度差看起来变化更小。
可用的做法是给 HSL 亮度插值叠一条感知缓动曲线,让 50 到 200 这段铺得够开、几档背景填充彼此能区分,让 700 到 950 这段在文字、边框、按下态之间留住区分度。深色端再把饱和度往上推一点,这正是手调色阶避免深色"发灰发脏"的常用手法。
一个真实例子:从 #3b82f6 推出整条色阶
把 #3b82f6 这个中间调的蓝喂进颜色色阶生成器,它会先按亮度把基色锚定到最近的一档,蓝色这种中间调通常落在 500,然后往两头推出其余十档:
- 50:
#eff6ff,页面背景 - 100:
#dbeafe,卡片背景 - 200:
#bfdbfe,浅边框 - 300:
#93c5fd,hover 填充 - 400:
#60a5fa,图标、次要元素 - 500:
#3b82f6,主品牌色(你输入的原值) - 600:
#2563eb,按钮、链接 - 700:
#1d4ed8,按下态、强调链接 - 800:
#1e40af,正文文字 - 900:
#1e3a8a,标题文字 - 950:
#172554,最深文字或暗色模式表面
注意 500 这一档渲染的就是你输入的精确品牌 hex,不会被挪动,其余各档由它推导。每一档旁边还会标出对白底、黑底的 WCAG 2.2 对比度,一眼看出哪几档能放白底正文。
50 到 950 在 UI 里的状态色约定
Tailwind 和 Radix 圈子里有一套大致约定,记住它你就能直接落地:
- 50 到 100:页面和卡片背景
- 200 到 300:浅边框和 hover 填充
- 400 到 500:主品牌色和图标
- 600 到 700:按钮和链接,以及它们的按下态
- 800 到 900:正文和标题文字
- 950:最深文字,或暗色模式的表面
有两个坑要避开。第一,别拿 300、400 这种浅档当白底上的正文,它们几乎过不了 AA(对白底对比度 ≥4.5),只能做填充和边框;需要可读文字时去拿 700 到 900。第二,别喂一个已经接近白的基色(比如 #fafafa),浅色端没有空间可走,各档会挤成一团;喂亮度大约在 45% 到 60% 的中间调,色阶才铺得匀。
我自己怎么用这条色阶
我接手过一份样式表,里面只定义了 --blue-500 和 --blue-700,然后三个组件各自凭感觉造中间那几档蓝,结果同一个界面上三种不一样的蓝,慢慢就偏离品牌了。后来我把 500 的值粘进生成器,直接读出缺的 300、400、600,把这几个精确 hex 抄回样式表,所有组件统一从一条色阶取色,问题当场消失。挑暗色模式文字色时,我也是看对比度徽章而不是凭眼睛,省下了来回试错的工夫。
配套工具
色阶解决的是单个色相的明暗梯度。如果你要先在几个不同色相之间搭配色方案,或者需要做做渐变、转换色彩格式、校验对比度,可以接着用:
整套流程都在浏览器本地跑,品牌色不会离开你的标签页。
Made by Toolora · Updated 2026-06-13