如何在 Flutter 中更改颜色的色调、饱和度或值？

Question

假设我在 Flutter 中有一个颜色 object，我想更改它的色相或饱和度或亮度或亮度，我该怎么做？

谢谢

Answer 1

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

• newHueValue : 任何双 btw 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

Answer 2

有几种方法可以做到这一点

1.大多数色板有colors，从100到900，以100为增量，加上颜色50。数字越小，颜色越淡。 数字越大，颜色越深。 重音样本（例如redAccent ）只有值100, 200, 400 700

示例Color selection = Colors.green[400]; // Selects a mid-range green. Color selection = Colors.green[400]; // Selects a mid-range green.

样本调色板

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

其他的颜色方法是

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

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

withAlpha(int a) → Color 返回与此颜色匹配的新颜色，并将 Alpha 通道替换为 a（范围从 0 到 255）。

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

withGreen(int g) → Color 返回与此颜色匹配的新颜色，并将绿色通道替换为 g（范围从 0 到 255）。

withOpacity(double opacity) → Color 返回与此颜色匹配的新颜色，并将 alpha 通道替换为给定的不透明度（范围从 0.0 到 1.0）。

withRed(int r) → Color 返回与此颜色匹配的新颜色，其中红色通道替换为 r（范围从 0 到 255）。

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();
}

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();
  }
}