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



我正在尝试以编程方式将此哈希颜色代码 #159424(绿色(转换为更暗和更亮。如何做到这一点,请帮忙?

使绿色更深

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? 
}

适用于想要变暗或变亮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);

现场演示

无需插件的色彩精确解决方案

接受的答案会在变暗时改变颜色的色调(色调更饱和(。此外,它的亮化功能产生纯白色,某些颜色的量为 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类。

我的解决方案基于 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)

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

您可以使用 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")}";
}

或者,如果您想要不透明度/阿尔法:

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

我使用了withLightnessHSLColor方法来减轻颜色。

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

一个带有内置方法的衬里:

Color.lerp(myColor, Colors.white, 0.4) // 0 = keep as is, 1 = white

由于TinyColor的某些部分似乎坏了,而我只需要变亮和变暗,NearHuscarl的回答对我来说是完美的。

但是,它缺少完全回答原始问题所必需的部分,即将哈希颜色代码(声明为String(转换为Color

为此,您可以使用以下内容:

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

以上不是我的代码,而是我从这里的教程中学到的东西。

然后只需将其与NearHuscarl的代码相结合即可获得所需的效果:

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

最新更新