Material Color Utilities 项目：创建动态色彩方案指南-优快云博客

Material Color Utilities 项目：创建动态色彩方案指南

material-color-utilities Color libraries for Material You 项目地址: https://gitcode.com/gh_mirrors/ma/material-color-utilities

前言

在现代UI设计中，色彩方案是构建视觉一致性和品牌识别度的关键要素。Material Design 3 引入了动态色彩系统，允许开发者基于单一种子色生成完整的色彩方案。本文将深入解析如何使用 Material Color Utilities 项目创建动态色彩方案。

核心概念

动态色彩方案基础

动态色彩方案是基于HCT色彩空间构建的。HCT代表色调(Hue)、色度(Chroma)和明度(Tone)，这种色彩空间能够更好地保持色彩在不同亮度下的视觉一致性。

关键组件

源颜色(Source Color)：作为生成整个色彩方案基础的种子色
方案变体(Variant)：预定义的色彩关系规则
明暗模式(isDark)：决定生成亮色还是暗色方案
对比度级别(Contrast Level)：控制整体色彩对比度

创建色彩方案

方法一：使用预定义变体（推荐）

这是最简单的方法，只需提供源颜色即可生成完整的色彩方案。

// 以Dart为例
final hct = Hct.fromInt(0xFF6750A4); // 将ARGB颜色转换为HCT
final scheme = SchemeTonalSpot(
  sourceColorHct: hct,
  isDark: false,
  contrastLevel: 0.0
);

Material Color Utilities 提供了多种预定义变体：

TonalSpot：默认变体，强调主色调
Content：内容优先的变体
Expressive：表现力更强的变体
Monochrome：单色调变体
Vibrant：高饱和度变体

方法二：自定义调色板

对于需要更精细控制的场景，可以手动指定各个调色板：

// Java示例
DynamicScheme scheme = new DynamicScheme(
    Hct.fromInt(0xFFEB0057),
    Variant.VIBRANT,
    false,
    0.0,
    TonalPalette.fromInt(0xFFEB0057),
    TonalPalette.fromInt(0xFFF46B00),
    TonalPalette.fromInt(0xFF00AB46),
    TonalPalette.fromInt(0xFF949494),
    TonalPalette.fromInt(0xFFBC8877)
);

获取具体颜色值

创建方案后，可以通过以下方式获取具体颜色：

直接获取ARGB值

// TypeScript示例
const primaryColor = scheme.primary;

通过MaterialDynamicColors类获取

// Swift示例
let primaryArgb = MaterialDynamicColors.primary.getArgb(scheme)
let primaryHct = MaterialDynamicColors.primary.getHct(scheme)

对比度控制

Material Color Utilities 提供了灵活的对比度控制：

0.0：默认对比度
0.5：中等对比度
1.0：高对比度
-1.0：低对比度

迁移指南

对于使用旧版Scheme类的用户，建议迁移到新的DynamicScheme体系：

| 旧方法 | 新方法 | |------------------------|---------------------------------------| | Scheme.light(color) | SchemeTonalSpot(Hct.fromInt(color), false, 0.0) | | Scheme.dark(color) | SchemeTonalSpot(Hct.fromInt(color), true, 0.0) | | Scheme.lightContent(color) | SchemeContent(Hct.fromInt(color), false, 0.0) |