Programmatically Lighten or Darken a hex color in dart

问题

I am trying to convert this hash color code #159424 (GREEN-COLOR) to more darken and lighten programmatically. How to do this please help?

make green color darker

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

make green color lighter

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

回答1:

You can use tinycolor package:

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

Edit:

You can convert Color back to hex string like this:

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

or if you want opacity/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")}";
}

回答2:

For people who want to darken or lighten Color instead of hex string

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

回答3:

I found NearHuscarl' solution changes the tint of colors when darkening (more saturated tint) and produces white with an amount of .3 when lightening some colors (white should be reached at an amount of 1).

These methods produce shades of the base color that seem 'darker' or 'brighter' without changing the tint (it's for Flutter projects as it uses the material's Color class):

import 'package:flutter/material.dart';

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

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

// Example: use a percent from 1 to 100,
// where 100 is the maximum darkening/brightening (i.e. black or white)
final Color darkerGreen = darken(Color(0xFF159424), 15);

If starting from a Hex String value as OP asked, use J.M. Taylor' solution:

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

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

回答4:

Since some parts of TinyColor seem broken, and I only really needed lighten and darken, NearHuscarl's answer was perfect for me.

However, it was missing one part that was necessary to completely answer the original question, which was converting hash color code (declared as a String) to Color.

To do that, you can use this:

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

The above is not my code, but something I learned from a tutorial here.

Then just combine that with NearHuscarl's code to get the desired effect:

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

来源：https://stackoverflow.com/questions/58360989/programmatically-lighten-or-darken-a-hex-color-in-dart

标签

dart

colors

flutter-layout

uicolor

color-scheme