如何在Flutter中改变颜色的色调、饱和度或者明度？

Question

假设我在Flutter中有一个Color对象，我想改变它的色相、饱和度、亮度或亮度值，我该怎么做？

谢谢

- Zenko

---

使用HSVColor类 - pskink

Answer 1

你可以使用这些辅助方法来更改它。只需替换

• newHueValue：任何介于0和360之间的双倍数
• newSaturationValue：任何介于0和1之间的双倍数
• newLightnessValue：任何介于0和1之间的双倍数

Color changeColorHue(Color color) => HSLColor.fromColor(color).withHue(newHueValue).toColor();

Color changeColorSaturation(Color color) => HSLColor.fromColor(color).withSaturation(newSaturationValue).toColor();

Color changeColorLightness(Color color) => HSLColor.fromColor(color).withLightness(newLightnessValue).toColor();

同样地，您可以使用：HSVColor 用于 HSV（色相、饱和度、亮度）。

更多信息：https://api.flutter.dev/flutter/painting/HSLColor-class.html

- Tomas Baran

Answer 2

有几种方法可以实现这个：

1.大多数样本的颜色从100到900，每次增加100，还有颜色50。数字越小，颜色越浅，数字越大，颜色越深。强调的样本（例如redAccent）仅具有值100,，200,，400和700。

例如：Color selection = Colors.green[400]; //选择中等程度的绿色。

示例颜色板

此外，还提供了一系列常见不透明度的黑色和白色。例如，black54是纯黑色，不透明度为54％。

其他颜色方法包括：

computeLuminance() → double 返回介于0（最暗）和1（最亮）之间的亮度值。

toString() → String 返回此对象的字符串表示形式。

withAlpha(int a) → Color 返回与此颜色匹配且带有替换后的alpha通道（范围从0到255）的新颜色。

withBlue(int b) → Color 返回与此颜色匹配且带有替换后的蓝色通道（范围从0到255）的新颜色。

withGreen(int g) → Color 返回与此颜色匹配且带有替换后的绿色通道（范围从0到255）的新颜色。

withOpacity(double opacity) → Color 返回一个新的颜色，该颜色的alpha通道已替换为给定不透明度（范围从0.0到1.0）。

withRed(int r) → Color 返回与此颜色匹配且带有替换后的红色通道（范围从0到255）的新颜色。

- griffins

Answer 3

除了@Tomas Barans的答案：

这里有一些相关的辅助方法，可以修改饱和度、色调和亮度，而无需设置绝对值：

Color increaseColorSaturation(Color color, double increment) {
  var hslColor = HSLColor.fromColor(color);
  var newValue = min(max(hslColor.saturation + increment, 0.0), 1.0);
  return hslColor.withSaturation(newValue).toColor();
}

Color increaseColorLightness(Color color, double increment) {
  var hslColor = HSLColor.fromColor(color);
  var newValue = min(max(hslColor.lightness + increment, 0.0), 1.0);
  return hslColor.withLightness(newValue).toColor();
}

Color increaseColorHue(Color color, double increment) {
  var hslColor = HSLColor.fromColor(color);
  var newValue = min(max(hslColor.lightness + increment, 0.0), 360.0);
  return hslColor.withHue(newValue).toColor();
}

- schlenger

Answer 4

还可以使用扩展方法：

import 'package:flutter/foundation.dart';
import 'package:flutter/painting.dart';

extension ColorWithHSL on Color {
  HSLColor get hsl => HSLColor.fromColor(this);

  Color withSaturation(double saturation) {
    return hsl.withSaturation(clampDouble(saturation, 0.0, 1.0)).toColor();
  }

  Color withLightness(double lightness) {
    return hsl.withLightness(clampDouble(lightness, 0.0, 1.0)).toColor();
  }

  Color withHue(double hue) {
    return hsl.withHue(clampDouble(hue, 0.0, 360.0)).toColor();
  }
}

- daxicks