Material Design 中 Palette 实现色彩提取及使用技巧-JavaScript中文网-JavaScript教程资源分享门户

Material Design 中 Palette 实现色彩提取及使用技巧

本文将为读者介绍如何使用 Material Design 中的 Palette 工具，提取搭配合适、符合设计规范的颜色，帮助前端工程师提升设计水平、打造更好的用户体验。

一、Palette 工具是什么？

Palette 是 Material Design 里的一个色彩提取工具，它可以自动提取图片中的色彩并生成不同层次的颜色。

它主要使用以下两个类来实现色彩提取：

Palette：所有调色板的父类。主要定义了3中颜色样式：Light Vibrant（亮色活力）、Vibrant（活力）、Dark Vibrant（暗色活力），三个样式和基本图像颜色都有显著差异。
Palette.Builder：Palette 调色板的构建器，用于指定图像、调色板样式等参数，最后通过 builder.generate() 方法获取到 Palette 实例。

二、Palette 工具的使用

Palette 有很多实用方法可以自定义结果，我们先看一下自定义提取样式的方法，此处以 Vibrant（活力）为例:

// javascriptcn.com 代码示例
Bitmap bitmap = BitmapFactory.decodeResource(res, R.drawable.heart);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(@NonNull Palette palette) {
        Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();
        if(vibrantSwatch != null){
            //获取活力颜色的RGB值
            int color = vibrantSwatch.getRgb(); 
        }
    }
});

上述代码利用 builder 按照 Vibrant 提取样式构建了一段 Bitmap 数据，然后通过传入 Palette.AsyncListener 监听器，异步进行 Palette 实例的处理和生成。在 onGenerated 回调中，我们可以获取到颜色提取结果：

palette.getVibrantSwatch()能够获取到图像中与 Vibrant 风格匹配的调色板信息，Swatch 对象包含了颜色信息，如 RGB 值、四种 HSL 值。获取到 RGB 值可以直接使用，而 HSL 值需要适当转换以供使用。

三、Palette 工具具体方法

getVibrantSwatch()

调用此方法可以获取图片中颜色最丰富的中等饱和度（40%-60%）的活力颜色。

Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();

getMutedSwatch()

调用此方法可以获取图片中颜色最柔和的中等饱和度（40%-60%）的颜色。

Palette.Swatch mutedSwatch = palette.getMutedSwatch();

getSwatches()

从颜色信息提取的目录中，查看和获取所有的 swatch，可快速获取每个主题颜色的 Swatch 实例。

List<Palette.Swatch> swatches = palette.getSwatches();

getDominantSwatch()

提取图像中最显著、最占比的颜色。

Palette.Swatch dominantSwatch = palette.getDominantSwatch();

除了以上方法， Palette 还有其他实用接口，例如：计算每种颜色 Swatch 实例的文字颜色是否能够放在该颜色的背景上；判断该颜色是否适合展示阴影颜色；或者使用独特的过滤器从图像中检索使用的颜色。

四、Palette 工具使用技巧

避免提取出不合适的颜色

Palette 提取出的颜色可能会因图片素材不同而差异较大，有时可能会产生不符合设计规范的颜色。为防止这种情况的发生，我们可以使用 setColorExtractor() 接口来自定义色彩提取方式，以获取满足需求的颜色信息。

Palette.from(bitmap).setColorExtractor(new Palette.ColorExtractor() {
    @Override
    public void extract(Bitmap bitmap) {
        //TODO: 自己手动提取颜色
    }
}).generate();

对于不同场景的色彩搭配应该不同

在实际项目中，不同的场景可能需要使用不同的色彩搭配，比如主题、画面、情感等。我们可以使用 Palette 工具根据场景需要自行选择对应的颜色提取样式。

与其他调色板相结合

我们可以将从 Palette 中提取得到的颜色信息，和其他调色板库进行结合，如使用简单易用的 colorthief 库结合 Palette 实现色彩提取和渐变色展示等效果。

ColorGradient colorGradient = new ColorGradient(palette.getVibrantSwatch().getRgb(), palette.getMutedSwatch().getRgb());
int[] colorArray = colorGradient.getColorJitterArray(gradient_array.length, 0.1f, 0.1f, 0.1f, 0.1f);

此例中利用 colorGradient 实现了渐变色效果，并结合 Palette 的 Vibrant 和 Muted 获取对应颜色。

五、总结

Palette 工具是 Material Design 的一个非常有用的功能，通过调用 Palette API，可以快速轻松的实现图片色彩的提取和调色板的生成。使用 Palette 工具不仅可以让你获得更加优美的配色方案，还可以提高项目开发效率。

本文简要介绍了 Palette 工具调用方式，提供了一些实用技巧和配套使用建议，希望能够为前端工程师提供参考和指导，打造优美的用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654364b17d4982a6ebd20c4a