Flutter中道颜色(Color)的差异,你知道是如何计算的吗？

站长

2023年11月27日 16:32 · 阅读数 101

🌹 ⭐️ 🌹请首先看我 🌹 ⭐️ 🌹

下面介绍的功能都是有 IDKit 库提供。

下面该功能需要 idkit ^ 0.3.5 以及以上可以使用。

idkit 包的引入方式如下: 1. 可以手动引入 idkit 包，就是将 idkit ^ 0.3.5 放在项目的 pubspec.yaml 文件的 dependencies 模块下，然后执行 flutter pub get 指令即可。 2. 可以使用后指令 flutter pub add idkit 在项目根目录终端下执行即可。

拾光记忆

简介: 针对 Flutter 项目资产管理的脚本服务。Fam 具有以下特点: 支持多种平台以及各平台无差异化、界面美观、功能齐全、快捷方便。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 针对 Flutter 多手指检测以及手势触发其他手势也触发的问题。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更深入的了解 Dart 的枚举以及相关使用和方法。 推荐: ⭐️⭐️⭐️

简介: 这是让开发者更加便捷的实现单选、多选功能，无需你对数据处理。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更深入的了解 Flutter 的两种指针的介绍以及相关使用和方法。 推荐: ⭐️⭐️⭐️

简介: 这是让开发者更加便捷的实现多种样式的轨道滑块，比如:轨道渐变色、触控笔悬浮标等。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更加便捷的查看日志，通过日志能够分析变量当前数值以及业务逻辑走势，同时也能作为日志收集日志文本。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更加便捷的实现图像添加图片类型的水印和文字类型的水印，支持水印多种样式的设定。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: IImage 是 IDKit 的其中一个功能模块，它提供了许多方便的图像处理方法，例如：尺寸调整、相对某点的矩形位置、大小调整、图像缩放、背景去除、真实内容尺寸获取以及真实内容图像获取等等。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 该篇主要介绍 Matrix4 的 16 个参数的含义。 推荐: ⭐️⭐️⭐️⭐️

一、简述

颜色在 Flutter 开发中无处不在。在 Flutter 中，颜色的色彩空间有 RGB、HSL 和 HSV 三种格式。通常情况下，我们在开发中使用 RGB 就能满足需求。然而，在一些对颜色要求特别高的处理中，RGB格式可能无法提供足够的精度。

二、色彩空间

HSV（Hue, Saturation, Value） HSV颜色空间将颜色分为色相（hue）、饱和度（saturation）和明度（value）三个维度。色相指颜色的种类，如红、绿、蓝等；饱和度指颜色鲜艳的程度；明度指颜色亮度的程度。HSV 颜色空间对于调整和设定颜色较为直观，常用于图像处理和计算机图形学中。
HSL（Hue, Saturation, Lightness） HSL 颜色空间也是基于色相、饱和度和亮度三个维度来描述颜色的。与 HSV 不同的是，HSL 将亮度作为一个独立维度，而不是使用明度。这使得 HS L颜色空间更适合于设计和图形艺术应用。
RGB（Red, Green, Blue） RGB 颜色空间是最常见的颜色表示法之一，它将颜色表示为红、绿、蓝三个成分的混合值。每个成分的取值范围通常是 0 到 255 之间，可以通过改变这三种颜色的值来调整颜色。RGB 颜色空间适用于彩色显示器和 LED 灯等设备。
LAB LAB 颜色空间是一种基于人眼感知的颜色模型，它将颜色表示为亮度（L）和与红绿（a）和黄蓝（b）相对应的三个轴上的坐标。这些轴代表了可感知的颜色变化，使得在LAB颜色空间中更容易比较、匹配和预测颜色的外观。LAB 常用于色彩管理和打印领域，以确保图像的准确展示。

三、 Flutter - LABColor

在 Flutter 中包含的色彩空间有三种 RGB、HSL 和 HSV ，然而就缺少 LAB 色彩空间。 IDKit 库就对颜色的 LAB 进行了支持，表现为 LABColor。 LABColor 提供了一些便捷的构建方法和属性，下面我们一起看看：

const LABColor.fromALAB(this.alpha, this.l, this.a, this.b) 该方法是通过 alpha、l、a、b 各个参数生成 LABColor 类型的颜色。
factory LABColor.fromColor(Color color) 该方法是通过 RGB 格式的颜色直接转化为 LABColor 类型的颜色。
LABColor withAlpha(double alpha) 该方法是调整 alpha 不透明度生成新的 LABColor 的颜色。
LABColor withL(double l) 该方法是调整 l 不透明度生成新的 LABColor 的颜色。
LABColor withA(double a) 该方法是调整 a 不透明度生成新的 LABColor 的颜色。
LABColor withB(double b) 该方法是调整 b 不透明度生成新的 LABColor 的颜色。
Color toColor() 该方法是将 LAB 颜色转化为 RGB。

四、颜色的其他妙招

字符串快捷转颜色（RGB） 我们以蓝湖为例，蓝湖提供的颜色格式有5 种，如下图所示：

其中前三个没有快捷生成 RGB 颜色的方式，所以下面我们提供了一些便捷方式，如下：
```
'#761DF2'.color;
'#761DF2'.hexColor;
'#FF761DF2'.aHexColor;
'#761DF2FF'.hexAColor;
```

由 RGB 颜色获取其他色彩空间的颜色

final Color reduceColor = '#761DF2'.color;
reduceColor.labColor;
reduceColor.hslColor;
reduceColor.hsvColor;

上边介绍了颜色的一部分便捷方式，开发中这种功能遍地开花，大家只需要自己感觉那个好就用那个。

五、颜色差异

下面我们将介绍 4 中方式来计算颜色的差异，如下所示：

1. `bool euclideanDistanceColorDifference(Color color, {double tolerance = 1.0})`

该方法是 RGB 颜色空间计算两个颜色的差异的方法。下面我们进行测试:

上面测试输出如下:

从上面看 color1 更和 color 相近，而 color2 比较也输出 false 没有差异，那是因为我们的容差默认设置为 1 。我们可以通过方法的 tolerance 参数根据自己的需求设置。

2. `bool cie76ColorDifference(LABColor color, {double tolerance = 2.3})`

该方法是 LAB 色彩空间的计算方法，如果是 RGB 色彩需要转换为 LAB 色彩计算。下面我们进行测试，如下：

上面代码输出如下：

从上面输出看， colorL2 更接近 colorL1, 从当前看当前的精准度高于 RGB 的 euclideanDistanceColorDifference 方法。其中我们也可以根据自己的需求调整颜色的容差值（tolerance）以满足需求，容差值默认是 2.3, 2.3 是人眼色彩辨别差异的最小值，官方称为 最小可觉差。

3. `bool cie94ColorDifference(LABColor color, {double tolerance = 1.0,ColorImageStyle colorImageStyle = ColorImageStyle.graphicArt,double kc = 1.0,double kh = 1.0,double sl = 1.0,})`

该方法是 LAB 色彩空间的计算方法，如果是 RGB 色彩需要转换为 LAB 色彩计算。下面我们进行测试，如下：

上面输出如下：

从上面输出看， colorL2 更接近 colorL1, 从当前看当前的精准度高于 RGB 的 euclideanDistanceColorDifference 方法。我们还能发现该方法的精度也高于 LAB 的 cie76ColorDifference 方法。其中我们也可以根据自己的需求调整颜色的容差值（tolerance）以满足需求，容差值默认是 2.3, 2.3 是人眼色彩辨别差异的最小值，官方称为 最小可觉差。我们还可以根据颜色的所在图像的类型（colorImageStyle）来调整精度，颜色所在图像的类型是 ColorImageStyle, 其包含两种: 图像艺术、纹理。还可以调整 kc、kh、sl 等使我们精度更高。

4. `bool ciede2000ColorDifference(LABColor color, {double tolerance = 2.3, double kc = 1.0,double kh = 1.0,double kl = 1.0,})`

该方法是 LAB 色彩空间的计算方法，如果是 RGB 色彩需要转换为 LAB 色彩计算。下面我们进行测试，如下：

上面输出，如下：

Flutter中道颜色(Color)的差异,你知道是如何计算的吗？

从上面输出看， colorL2 更接近 colorL1, 从当前看当前的精准度高于 RGB 的 euclideanDistanceColorDifference 方法。我们还能发现该方法的精度也高于 LAB 的 cie76ColorDifference 方法和 cie94ColorDifference 方法。其中我们也可以根据自己的需求调整颜色的容差值（tolerance）以满足需求，容差值默认是 2.3, 2.3 是人眼色彩辨别差异的最小值，官方称为 最小可觉差。还可以调整 kc、kh、kl 等使我们精度更高。

5. `颜色差异总结`

上面四种计算颜色差异的方法，精度顺序是: euclideanDistanceColorDifference < cie76ColorDifference < cie94ColorDifference < ciede2000ColorDifference 。在拥有高精度的同时所耗费的时间也随之增加，可根据自己需求选择对应的方法。注意:我们在计算颜色差异时，一定要将颜色转化为同一色彩空间，否则没有可比较性。

六、实际应用

例如在颜色的泛红算法时，不使用颜色差异时，展示效果如下:

我们从图片上可以明显的看到填充有白边，这是目前很多软件都具备的效果。使用 idkit 提供的差异算法，实现的填充效果如下：

我们发现效果很好，没有填充白边。

七、总结

上文我们介绍了 Flutter 中色彩的表现，同时也提及了 LAB 色彩的支持并且提供了计算颜色差异的方法和一些便捷的小功能。如果你觉得有帮助，请留下你的赞和评论。

转载自:https://juejin.cn/post/7235906458885177399

Flutter中道颜色(Color)的差异,你知道是如何计算的吗？

[》跳过拾光记忆]

拾光记忆

[返回拾光记忆《]