Question

我正在尝试将此哈希颜色代码＃159424 （绿色（GREEN-COLOR））转换为以编程方式进一步加深和加亮。该怎么做请帮忙？

使绿色变深

toDarkColor(String hashColor){
  // how to convert that hash string to make green color darker?
}

使绿色变浅

toLightColor(String hashColor){
  // how to convert that hash string to make green color lighter? 
}

Answer 1

适用于想要使Color变暗而不是十六进制字符串的人

// amount range from 0.0 to 1.0

Color darken(Color color, [double amount = .1]) {
  assert(amount >= 0 && amount <= 1);

  final hsl = HSLColor.fromColor(color);
  final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));

  return hslDark.toColor();
}

Color lighten(Color color, [double amount = .1]) {
  assert(amount >= 0 && amount <= 1);

  final hsl = HSLColor.fromColor(color);
  final hslLight = hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));

  return hslLight.toColor();
}

// usage
// final lightRed = lighten(Colors.red);
// final darkBlue = darken(Colors.blue, .3);

Answer 2

以下方法会产生底色的阴影，在不改变色度的情况下看起来更“暗”或“更明亮”（strong）（适用于Flutter项目，因为它使用了材质的{ {1}}类。

NearHuscarl'解决方案在变暗时会更改颜色的色调（色调更饱和）。同样，它的增亮功能可以产生某些颜色的纯白色，其数量为0.3，尽管只能达到1的数量。

<div class="block">
 <div class="container">
   <button>£10</button>
   <button>£20</button>
   <button>£30</button>
  </div>
</div>

如果按OP要求从十六进制字符串值开始，请使用J.M. Taylor的解决方案：

Color

Answer 3

您可以使用tinycolor软件包：

TinyColor.fromString("#159424").darken(10).color

编辑：

您可以像这样将Color转换回十六进制字符串：

String toHex(Color color) {
  return "#${color.red.toRadixString(16).padLeft(2, "0")}"
      "${color.green.toRadixString(16).padLeft(2, "0")}"
      "${color.blue.toRadixString(16).padLeft(2, "0")}";
}

或者如果您想要不透明/ alpha：

String toHex(Color color) {
  return "#${color.alpha.toRadixString(16).padLeft(2, "0")}"
      "${color.red.toRadixString(16).padLeft(2, "0")}"
      "${color.green.toRadixString(16).padLeft(2, "0")}"
      "${color.blue.toRadixString(16).padLeft(2, "0")}";
}

Answer 4

由于TinyColor的某些部分似乎已损坏，而且我只需要变亮和变暗，因此NearHuscarl的答案对我来说是完美的。

但是，它缺少一个完整回答原始问题所必需的部分，即将原始颜色代码（声明为String转换为Color。

为此，您可以使用以下方法：

Color hexToColor(String code) {
    return Color(int.parse(code.substring(0, 6), radix: 16) + 0xFF000000);
}

以上不是我的代码，而是我从a tutorial here中学到的东西。

然后将其与NearHuscarl的代码结合起来即可达到预期的效果：

final Color darkerGreen = darken(hexToColor('#159424'));

Answer 5

我的解决方案基于 https://stackoverflow.com/a/58604669/7479173

extension ColorBrightness on Color {
  Color darken([double amount = .1]) {
    assert(amount >= 0 && amount <= 1);

    final hsl = HSLColor.fromColor(this);
    final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));

    return hslDark.toColor();
  }

  Color lighten([double amount = .1]) {
    assert(amount >= 0 && amount <= 1);

    final hsl = HSLColor.fromColor(this);
    final hslLight =
        hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));

    return hslLight.toColor();
  }
}

有了这个可以简单地：

Colors.red.darken()
Colors.red.lighten()
Colors.red.lighten(0.1)

只要您导入扩展程序，它就适用于任何颜色。

Answer 6

我使用了 withLightness 的 HSLColor 方法来淡化颜色。

HSLColor.fromColor(Colors.red).withLightness(0.95).toColor()

以编程方式使飞镖中的十六进制颜色变亮或变暗

6 个答案: