Material Design 调色板生成器
选择一个基础颜色,立即获得它从最浅(50)到最深(900)的十个色阶,风格类似 Material Design 所推广的色调调色板。计算完全在您的浏览器中进行。
工作原理
本工具将您的基础颜色视为 500 色阶,然后通过逐步混入白色计算出更浅的色阶(50 到 400),通过混入黑色计算出更深的色阶(600 到 900),离 500 越远,混合比例越大。最终得到一套协调一致的色调调色板,可直接用于设计系统或组件规范。
这就是 Material Design 官方的算法吗?
不是,Google 使用基于 HCT 色彩空间、更为复杂的专有算法来计算官方调色板。本工具采用向白色和黑色线性混合的近似方法,视觉效果相近,可以直接使用,但不保证与官方 Material 调色板逐像素一致。
如何在我的项目中使用这个调色板?
点击某个色阶即可复制其 HEX 代码,然后将其用作 CSS 变量或设计令牌(例如 --primary-500):浅色色阶常用于背景和禁用状态,500 色阶用于主色,深色色阶用于文字或高对比度的激活状态。
所有颜色计算都直接在您的浏览器中完成,不会调用任何外部服务器。