颜色色阶
颜色色阶生成器 - 50 到 900 UI 色阶
从一个基础色生成 50–900 色阶，复制 CSS 变量，并预览适合 UI 的浅色、深色和设计 token。
生成色阶
CSS 变量
--color-brand-50: #F4F6FB;
--color-brand-100: #E2EBF8;
--color-brand-200: #C2D5F5;
--color-brand-300: #90B6F4;
--color-brand-400: #5B96F5;
--color-brand-500: #2474F5;
--color-brand-600: #0D5BD9;
--color-brand-700: #0C47A6;
--color-brand-800: #0B3474;
--color-brand-900: #0A2247;如何使用
把一个品牌色扩展成可用于界面的完整色阶。生成器会从浅色到深色标记常见设计系统的 50–900，并导出 CSS 变量。
- 1 输入基础颜色。
- 2 查看生成的 50–900 色阶。
- 3 复制单个色阶或完整 CSS 变量。
常见问题
50–900 色阶是什么？
它们是从很浅到很深的标记步骤，常见于 UI 系统和工具类 CSS 框架。
500 色阶一定是原始颜色吗？
本生成器会保留基础色的色相和饱和度方向，并生成均衡色阶，不强行让某一档完全等于原色。
这些色阶可以用于文字吗？
可以，但需要检查文字/背景对比度。很浅的色阶通常更适合作为背景而不是文字。
导出的变量该怎么命名？
建议使用产品前缀，例如 --color-brand-500，让色阶成为可维护的设计 token。