搜索插件、代码仓与 APP 分类

material_color_utilities 封面
插件详情v0.13.1

material_color_utilities

为 Material Design 3 色彩系统提供支持的算法和实用工具,包括从图像中选择主题色彩以及创建色彩的色调;所有功能均在新的色彩空间中实现。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
1080万
喜欢数
282
Pub 分数
150

安装插件

flutter pub add material_color_utilities

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 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

Library availability

Language Availability Location
C++ ✅
Dart ✅ pub package
Java ✅ MDC-Android
Swift ✅
TypeScript ✅ npm package
Kotlin ✅

Need another platform/language? Check the existing issues or open a new one.

Capabilities Overview

library components cheat sheet

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

Learn about color science

The Science of Color & Design - Material Design

Try it out

Material Theme Builder

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.

所属分类

依赖

依赖清单 1 项

源码仓库

使用此插件的项目