Material 颜色工具
驱动 Material Design 3 (M3) 颜色系统的算法和工具,
包括从图片中选择主题颜色和创建颜色色调;全部在
一个新的颜色空间中。
代码可用性
| 语言 | 可用性 | 包 |
|---|---|---|
| C/C++ | 即将推出 | |
| Dart | ✅ | material_color_utilities |
| Java | ✅ | |
| Objective-C | 即将推出 | |
| TypeScript | ✅ |
需要其他平台/语言?
开一个 issue.
用法
图片转颜色
这个库的一个常见用例是从图片中提取单一颜色。
方法如下
即将推出
速查表
背景
了解
M3 颜色系统.
组件
该库由多个组件构建而成
- 每个组件都有自己的文件夹和测试
- 每个组件尽可能小
这使得将子集轻松合并和更新到其他库成为可能,例如
Material Design Components, Android System UI 等。
- 并非所有使用者都需要每个组件 — 例如 MDC 不需要
量化/评分/图片提取
量化
- 将壁纸转换为 N 种颜色
- Celebi 运行 Wu,然后是 WSMeans
评分
- 对颜色进行排序,以确定其是否适合主题化
- Quantize 将壁纸分成 128 种颜色
- 支持对该输出进行去重和排序。
方案
- 从角色到颜色的映射,例如主色、名称等。
调色板
- 色调调色板 — 仅在色调上变化的颜色范围
- 核心调色板 — 创建 Material 颜色方案所需的色调调色板集合
HCT
- 色相 (Hue)、彩度 (Chroma)、明度 (Tone)
- 基于 CAM16 x L* 的新颜色空间
- 考虑了观看条件
混合
- HCT 中的颜色插值
- 协调、动画、渐变
实用工具
- 颜色 — 实现 HCT/CAM16 所需的颜色空间之间的转换
- 数学 — 例如确保色相在 0 到 360 之间、限制等函数的实现
设计工具
推荐使用
Material 主题生成器
Figma 插件进行设计工作流。它将动态颜色带入
设计发生的场所。设计师可以采用现有设计,并查看它
在不同的主题下看起来如何,只需点击几下。
