9

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

1
  • 2
    use HSVColor class
    – pskink
    Apr 9, 2020 at 4:12

4 Answers 4

21

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

3

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).

0

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

An extension method can also be used:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.