Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

colors

flutter

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

like image 563
Zenko Avatar asked Apr 09 '20 02:04

Zenko


People also ask

How do you change the saturation of a hue?

Change color saturation or hueChoose Enhance > Adjust Color > Adjust Hue/Saturation.

How do you specify colors in flutter?

Create a variable of type Color and assign the following values to it. Color myHexColor = Color(0xff123456) // Here you notice I use the 0xff and that is the opacity or transparency // of the color and you can also change these values. Use myHexColor and you are ready to go.

How do you darken color in flutter?

darken. darken: function(amount = 10) -> TinyColor . Darken the color a given amount, from 0 to 100. Providing 100 will always return black.

What is color hue value?

Hue distinguishes one color from another and is described using common color names such as green, blue, red, yellow, etc. Value refers to the lightness or darkness of a color. It defines a color in terms of how close it is to white or black.


2 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

like image 163
Tomas Baran Avatar answered Sep 18 '22 02:09

Tomas Baran


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

like image 30
griffins Avatar answered Sep 22 '22 02:09

griffins