从基础颜色生成 10-12 个明暗色阶,并导出可用于 design token 的 CSS 变量。
从基色生成较浅和较暗的阴影,为背景、边框、文本和状态标记构建一致的 UI 比例。
它会围绕选定的基色产生阴影和色调变化。
它有助于为设计标记和组件状态创建系统色标。
它加速调色板扩展,同时保持色调一致性。
基色
#2563EB
阴影计数
10步尺度(50-900)
模式
平衡色调和色调
色度等级
50:#EFF6FF ... 500:#3B82F6 ... 900:#1E3A8A
Token 映射
--blue-100, --blue-200, --blue-300 ...
辅助功能说明
分配满足目标对比度的文本和背景对。
缩放步骤在视觉上感觉不均匀
使用感知调整而不是线性通道移位。
中间色调太饱和
减少中心周围的饱和度曲线步骤.
暗步骤失去色调特性
在保持色调锚定的同时调整亮度。
太多标记使使用变得复杂
为生产组件采用有限的语义子集。
颜色明暗阶生成器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
设计系统应有多少个阴影包括?
通常为 8-10 个步骤,语义上使用较小的子集。
应该在 UI 中使用每种阴影吗?
否,仅将必要的步骤映射到具体组件角色。
生成的阴影能否保证可访问性?
否,验证每个文本背景的对比度配对.
阴影和色调相同吗?
阴影向黑色变暗,而色调向白色变浅。