Flutter如何实现颜色HLS转HEX

在Flutter开发中，我想将HLS颜色格式转换为HEX格式，但不知道如何实现。查了官方文档也没找到直接可用的方法，请问有没有现成的Dart库或代码片段可以实现这个转换？最好能附带一个简单的使用示例，谢谢！

2 回复

在Flutter中，使用HSLColor.fromAHSL创建HLS颜色，然后调用toColor()转为Color对象，最后用.value.toRadixString(16)获取HEX值。

更多关于Flutter如何实现颜色HLS转HEX的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现HLS转HEX，可以通过以下步骤完成：

  1. HLS转RGB：先将HLS颜色值转换为RGB格式
  2. RGB转HEX：再将RGB值转换为HEX字符串
import 'package:flutter/material.dart';

class ColorConverter {
  /// 将HLS转换为HEX颜色
  /// h: 色相 (0-360)
  /// l: 亮度 (0-1)
  /// s: 饱和度 (0-1)
  static String hlsToHex(double h, double l, double s) {
    // 先转换为RGB
    Color rgbColor = _hlsToRgb(h, l, s);
    // 再转换为HEX
    return _rgbToHex(rgbColor.red, rgbColor.green, rgbColor.blue);
  }

  /// HLS转RGB
  static Color _hlsToRgb(double h, double l, double s) {
    h = h % 360.0;
    double c = (1 - (2 * l - 1).abs()) * s;
    double x = c * (1 - ((h / 60) % 2 - 1).abs());
    double m = l - c / 2;

    double r = 0, g = 0, b = 0;
    
    if (h >= 0 && h < 60) {
      r = c; g = x; b = 0;
    } else if (h >= 60 && h < 120) {
      r = x; g = c; b = 0;
    } else if (h >= 120 && h < 180) {
      r = 0; g = c; b = x;
    } else if (h >= 180 && h < 240) {
      r = 0; g = x; b = c;
    } else if (h >= 240 && h < 300) {
      r = x; g = 0; b = c;
    } else if (h >= 300 && h < 360) {
      r = c; g = 0; b = x;
    }

    return Color.fromRGBO(
      ((r + m) * 255).round(),
      ((g + m) * 255).round(),
      ((b + m) * 255).round(),
      1.0,
    );
  }

  /// RGB转HEX
  static String _rgbToHex(int r, int g, int b) {
    return '#${r.toRadixString(16).padLeft(2, '0')}'
           '${g.toRadixString(16).padLeft(2, '0')}'
           '${b.toRadixString(16).padLeft(2, '0')}';
  }
}

// 使用示例
void main() {
  String hexColor = ColorConverter.hlsToHex(120, 0.5, 0.8);
  print(hexColor); // 输出类似: #33cc66
}

参数说明：

  • h (色相)：0-360度，表示颜色在色轮上的位置
  • l (亮度)：0-1，0为黑色，1为白色
  • s (饱和度)：0-1，0为灰色，1为纯色

注意事项：

  • 确保输入值在有效范围内
  • 输出的HEX字符串格式为 #RRGGBB
  • 如果需要透明度，可以扩展支持A通道
回到顶部