Material 颜色工具

驱动 Material Design 3 (M3) 颜色系统的算法和工具,
包括从图片中选择主题颜色和创建颜色色调;全部在
一个新的颜色空间中。

代码可用性

语言 可用性
C/C++ 即将推出
Dart material_color_utilities
Java
Objective-C 即将推出
TypeScript

需要其他平台/语言?
开一个 issue.

用法

图片转颜色

这个库的一个常见用例是从图片中提取单一颜色。
方法如下

即将推出

速查表

library cheat sheet

背景

了解
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 插件进行设计工作流。它将动态颜色带入
设计发生的场所。设计师可以采用现有设计,并查看它
在不同的主题下看起来如何,只需点击几下。

GitHub

查看 Github