How do I change color's hue, saturation, or value in Flutter?

Viewed 4798

Suppose I have a Color object in Flutter that I want to change its Hue or Saturation or Lightness or Brightness, how do I do that?

Thanks

3 Answers

You can use these helper methods to change it. Just replace

  • newHueValue: with any double btw 0 and 360
  • newSaturationValue: with any double btw 0 and 1
  • newLightnessValue: with any double btw 0 and 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();

Similarly you can use: HSVColor for HSV (hue, saturation, value).

more: https://api.flutter.dev/flutter/painting/HSLColor-class.html

there are several ways of doing this

1.Most swatches have colors from 100 to 900 in increments of one hundred, plus the color 50. The smaller the number, the more pale the color. The greater the number, the darker the color. The accent swatches (e.g. redAccent) only have the values 100, 200, 400, and 700.

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

sample color palette green palette

In addition, a series of blacks and whites with common opacities are available. For example, black54 is a pure black with 54% opacity.

other methods of color are

computeLuminance() → double Returns a brightness value between 0 for darkest and 1 for lightest.

toString() → String Returns a string representation of this object.

withAlpha(int a) → Color Returns a new color that matches this color with the alpha channel replaced with a (which ranges from 0 to 255).

withBlue(int b) → Color Returns a new color that matches this color with the blue channel replaced with b (which ranges from 0 to 255).

withGreen(int g) → Color Returns a new color that matches this color with the green channel replaced with g (which ranges from 0 to 255).

withOpacity(double opacity) → Color Returns a new color that matches this color with the alpha channel replaced with the given opacity (which ranges from 0.0 to 1.0).

withRed(int r) → Color Returns a new color that matches this color with the red channel replaced with r (which ranges from 0 to 255).

In addition to @Tomas Barans answer:

Here are some relative helper methods to modify the saturation, hue and brightness without the need to set an absolute value:

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