RGB颜色格式被开发人员和设计师广泛使用，它基于这样一个概念，即颜色可以被表示为红、绿和蓝的组合。
今天使用的大多数设备（手机、电视、笔记本电脑）都使用RGB作为输出格式。整个可用的颜色范围可以通过改变每个颜色成分（红、绿或蓝）的值从0到255来表达。
RGB也是一种在内存中存储颜色信息的方便格式。每个颜色分量只占一个字节，一个ARGB颜色可以在内存中被压缩成4个字节（用一个额外的字节来表示alpha值）。
例如，红色可以在Dart中这样表达。
// these three expressions all yield exactly the same color
// each component can range from 0 to 255
Color.fromARGB(255, 255, 0, 0);
// same as above, but rather than alpha we use opacity that goes from 0.0 to 1.0
Color.fromRGBO(255, 0, 0, 1.0);
// color in hex format: AARRGGBB
Color(0xFFFF0000);
虽然RGB作为一种存储和输出格式是有意义的，但它并不符合人类对颜色的感知方式。
相反，有一种更直观的格式，在设计移动和网络应用时更有意义。
进入HSL
HSL格式将颜色表示为色相、饱和度和明度。如果你使用过Photoshop或Figma等设计工具，你可能对这个很熟悉。
Sketch中的RGB/HSL颜色选择器
在这个例子中，红色被选中，选取器显示以下数值。
- HEX: #FF0000
- H: 360
- S: 100
- L: 50
- 阿尔法。100
最重要的组成部分是色调。它以相同的红色开始和结束（0或360度），它横扫整个颜色范围。
色相从0到360横跨整个颜色范围
饱和度代表颜色的鲜艳程度，以百分点表示。当饱和度为0%时，色相就没有意义了，我们只能表达灰度。
明度从0（黑色）到100（白色），而50%的值代表一个完整、明亮的颜色。
左：饱和度=0，亮度：0。右边：饱和度=0，明度：100
这种格式的好处是，它的使用非常直观。
- 选择色相，将饱和度设为100，亮度设为50。
- 想要一个更深的颜色阴影？降低明度。
- 想要一个较浅的颜色？增加明度。
- 颜色太 "亮"（饱和度高）？降低饱和度。
但还有更多。给予HSL格式的任何颜色，你可以非常容易地生成一个调色板。
HSL调色板实例
你可以使用这种技术为你的应用程序主题中的主色、次色和重点色创建一个调色板。这将使你的应用程序或网站看起来更加一致和专业。
现在的理论已经足够了。是时候看看如何在Dart & Flutter中使用HSL了!💙
Flutter中的颜色
如果您在您的Flutter应用程序中定制了任何颜色，您可能已经使用了颜色类。
因为Flutter紧跟Material Design规范，它带有一套预定义的调色板或色块。
红原色色卡。来源：api.flutter.dev
只要你想使用预定义的色板，这个索引系统就能发挥作用。但是如果你想用默认颜色以外的东西创建你自己的调色板，或者你不想使用Material Design，你就有更多的工作要做。
而且正如我们所看到的，RGB并不是很直观。
HSLColor类
为了用HSL格式表示颜色，Dart使用了一个叫做HSLColor的类。
因此，让我们重新审视我们的调色板，看看我们如何在Flutter中定义它。
HSL颜色调色板示例
final redHSLColors = [
HSLColor.fromAHSL(1, 360, 1.0, 0.25),
HSLColor.fromAHSL(1, 360, 1.0, 0.37),
HSLColor.fromAHSL(1, 360, 1.0, 0.5),
HSLColor.fromAHSL(1, 360, 1.0, 0.63),
HSLColor.fromAHSL(1, 360, 1.0, 0.75),
];
final greenHSLColors = [
HSLColor.fromAHSL(1, 120, 1.0, 0.25),
HSLColor.fromAHSL(1, 120, 1.0, 0.37),
HSLColor.fromAHSL(1, 120, 1.0, 0.5),
HSLColor.fromAHSL(1, 120, 1.0, 0.63),
HSLColor.fromAHSL(1, 120, 1.0, 0.75),
];
final orangeHSLColors = [
HSLColor.fromAHSL(1, 30, 1.0, 0.25),
HSLColor.fromAHSL(1, 30, 1.0, 0.37),
HSLColor.fromAHSL(1, 30, 1.0, 0.5),
HSLColor.fromAHSL(1, 30, 1.0, 0.63),
HSLColor.fromAHSL(1, 30, 1.0, 0.75),
];
这再容易不过了。但请记住，上面列表中的值的类型是HSLColor ，而不是Color 。
这意味着它们不能直接作为颜色分配给小组件属性。
Container(
// The argument type 'HSLColor' can't be assigned to the parameter type 'Color?'
color: redHSLColors[2],
)
相反，HSL颜色需要被转换回 Color 。
Container(
color: redHSLColors[2].toColor(),
)
除了
HSLColor，Flutter SDK还定义了一个HSVColor类，它与此密切相关。维基百科上的这篇文章更详细地介绍了HSL和HSV。
总结
我们已经了解了什么是HSL以及为什么它比RGB更直观。
但您应该为您的Flutter应用程序使用哪种格式？
- 如果您对预定义的Material Design颜色感到满意，请使用现有的色卡（例如：
Colors.orange,Colors.red[600],Colors.green[400]）。 - 如果您的设计使用RGB，请保留（大多数设计到代码的工具仍然可能导出为RGB）。
- 如果你需要不同色调的自定义颜色，HSL更容易使用。
编码愉快!
