一个 Dart 包,实现了 Material Design 3 颜色系统的核心算法,支持从图像动态生成主题并精确创建颜色色调。它在新的感知色彩空间中运行,以获得更准确且视觉上一致的结果。该包支持高级功能,如颜色调和、对比度优化以及基于输入图像的主题自定义,确保跨平台的可访问性和美学质量。
适合场景
从图像背景生成主题
创建可访问的颜色调色板
自动化UI色彩方案
设计响应式应用主题
实现动态主题
增强视觉一致性
主要特点
用于准确表示的感知色彩空间
基于图像的颜色提取
带有亮色/暗色变体的音调生成
无障碍感知的对比度调整
支持 Material Design 3 规范
跨平台兼容性
适合对象
UI 设计师实施 Material Design 3
开发动态主题系统
需要自动配色方案生成的应用程序
专注于无障碍和视觉和谐的项目
使用 Flutter 开发多平台应用的团队
使用建议
需要理解 Material Design 3 原则
可能需要额外处理以应对复杂的图像输入
最好配合设计指南使用以获得最佳效果
仅限颜色系统逻辑——无UI组件
不适用于通用颜色操作
原始 README
以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。
Material Color Utilities
Color is a foundational part of the
Material Design system, alongside typography and
shape. In products, color can communicate brand, reinforce meaning through
semantic roles, and improve usability through
accessible contrast.
Historically, teams hand-picked many colors to cover all UI use cases. In
Material 3,
dynamic color
shifts
Need another platform/language? Check the
existing issues
or open a new one.
Capabilities Overview
The library consists of various components, each having its own folder and
tests, designed to be as self-contained as possible. This enables seamless
integration of subsets into other libraries, like Material Design Components
and Android System UI. Some consumers do not require all components, for
example, MDC doesn’t need quantization, scoring, image extraction.
Components
Purpose
blend
Interpolate, harmonize, animate, and gradate colors in HCT
contrast
Measure contrast, obtain contrastful colors
dislike
Check and fix universally disliked colors
dynamiccolor
Obtain colors that adjust based on UI state (dark theme, style, preferences, contrast requirements, etc.)
hct
A new color space (hue, chrome, tone) based on CAM16 x L*, that accounts for viewing conditions
palettes
Tonal palette — range of colors that varies only in tone Core palette — set of tonal palettes needed to create Material color schemes
quantize
Turn an image into N colors; composed of Celebi, which runs Wu, then WSMeans
scheme
Create static and dynamic color schemes from a single color or a core palette
score
Rank colors for suitability for theming
temperature
Obtain analogous and complementary colors
utilities
Color — convert between color spaces needed to implement HCT/CAM16 Math — functions for ex. ensuring hue is between 0 and 360, clamping, etc. String - convert between strings and integers
We recommend incorporating the Material Theme Builder
Figma plugin
and web tool
into the design workflow. With them, designers can easily experiment with
different dynamic color themes and see how they transform their designs with
just a few clicks.