在材料设计组件中如何计算原色的浅色和深色版本？

Posted 2023-02-22

【中文标题】在材料设计组件中如何计算原色的浅色和深色版本？

【英文标题】：How light and dark versions of primary colors are calculated in material design components?

【发布时间】：2019-12-08 18:07:04

【问题描述】：

我想知道我们需要在哪些 sass 变量中提供主色/辅助色的浅色和深色版本。它是否使用某些mixin由材料本身自动计算？如果是这样，有没有办法为明暗赋予我们自己的颜色？

我看不到用于提供浅色和深色版本的主要和次要颜色的特定变量。只有@mdc-theme-primary 和@mdc-theme-secondary 变量可用。

Here The link to gitlab

【参考方案1】：

这个问题似乎有了答案：Convert colorPrimary to colorPrimaryDark (how much darker)

官方Material Color Tool基于JS库chroma.js计算变暗/变亮颜色，使用chroma.darken() / chroma.brighten()函数，其算法基于CIELAB颜色空间。