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

Posted 2023-02-23

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

【英文标题】：Programmatically Lighten or Darken a hex color in dart

【发布时间】：2020-02-10 03:30:52

【问题描述】：

我正在尝试以编程方式将此哈希颜色代码 #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? 

【问题讨论】：

也许HSLColor 类可以提供帮助。

【参考方案1】：

对于想要变暗或变亮Color 而不是十六进制字符串的人

// ranges 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);

Live Demo

【参考方案2】：

无插件的色彩准确解决方案

接受的答案在变暗时会改变色调（色调更饱和）。此外，它的增亮功能会产生纯白色，对于某些颜色而言，其数量为 0.3，尽管白色仅应达到 1。

以下两种方法产生基色的阴影，看起来“更暗”或“更亮”不改变色调。

import 'package:flutter/material.dart';

/// Darken a color by [percent] amount (100 = black)
// ........................................................
Color darken(Color c, [int percent = 10]) 
    assert(1 <= percent && percent <= 100);
    var f = 1 - percent / 100;
    return Color.fromARGB(
        c.alpha,
        (c.red * f).round(),
        (c.green  * f).round(),
        (c.blue * f).round()
    );


/// Lighten a color by [percent] amount (100 = white)
// ........................................................
Color lighten(Color c, [int percent = 10]) 
    assert(1 <= percent && percent <= 100);
    var p = percent / 100;
    return Color.fromARGB(
        c.alpha,
        c.red + ((255 - c.red) * p).round(),
        c.green + ((255 - c.green) * p).round(),
        c.blue + ((255 - c.blue) * p).round()
    );

示例：将颜色加深 15%。

final Color darkerGreen = darken(Color(0xFF159424), 15);

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

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


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

注意：它适用于 Flutter 项目，因为它使用材质的 Color 类。

【参考方案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")";

【讨论】：

它会提供颜色。那么如何将颜色转换为字符串十六进制，如 #159424 ？

Darken 给出错误值 String check = toHex(TinyColor.fromString("#159424").darken(10).color); String check1 = toHex(TinyColor.fromString("#159424").lighten(10).color); print('#159424----->' + check + '---' + check1);黑暗：给出错误的值，例如“#f6719”

否，toHex 返回错误值（#f6719 应为 #0f6719）。 padLeft(2, "0") 应该解决这个问题 - 请参阅更新的答案。

TinyColor 插件中的 setAlpha(int value) 和 setOpacity(double value) 等方法不起作用

请记住，TinyColor 未维护，在 Flutter >= 2.0 中根本不起作用。

【参考方案4】：

我的解决方案基于https://***.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)

只要您导入扩展，这适用于任何颜色。

【参考方案5】：

由于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'));

【参考方案6】：

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

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