Figma提供了Hex、HSB、HSL、CSS和RGB五种颜色模型。切换颜色模型只会影响Figma描述颜色的方式，并不会影响Figma对颜色的渲染，视觉上无任何变化。
颜色配置文件会影响Figma渲染颜色的方式。我们可以选择SRGB或Display P3作为默认颜色配置文件、设计文件的颜色配置文件，或用于导出资产。
一、可用的颜色模型
默认情况下，Figma使用十六进制模型表示颜色值。我们还可以在颜色选择器中查看其他模型的颜色值。
01 Hex
十六进制是Figma的默认颜色模型，指的是十六进制颜色。这是一种代表RGB值的字母数字简写。从事网页或数字设计的创作者将这种颜色模型的表示方法称为十六进制代码。
十六进制值有8个字符，使用以下方法：
#RRGGBBAA
- RR代表红色部分。
- GG代表绿色部分。
- BB代表蓝色部分。
- AA代表透明度部分。透明度值为00表示完全透明，透明度值为FF表示完全不透明。
02 RGB
RGB（红绿蓝）是最常用的颜色模型。
显示器或屏幕上渲染的每种颜色都是由不同数量的红色、绿色和蓝色组成。
RGB的语法如下：
（红色,绿色,蓝色,透明度）
- 红色、绿色和蓝色值通过0到255之间的整数定义颜色的强度。
- 透明度值通过为0.0（完全透明）到1.0（完全不透明）之间的数值表示。
03 HSB
色调饱和度（HSB）是RGB模型的另一种表示方式。
它是基于人眼对颜色的感知，而不是显示器对颜色的呈现方式（如RGB）。
HSB值的语法如下：
（色调，饱和度，亮度，透明度）
- 色调值以度为测量单位，用0到360之间的整数表示。
- 饱和度值用0到100之间的整数表示，100表示最高饱和度。
- 亮度值用0到100之间的整数表示，100表示最高亮度。
- 透明度值通过0.0（完全透明）到1.0（完全不透明）之间的数值表示。
04 HSL
色调饱和度（HSL）是另一种基于人眼对颜色感知的颜色模型。
与HSB一样，它是RGB模型的另一种表示方式。HSB和HSL之间的主要区别在于饱和度和亮度的处理方式不同。
HSL值的语法如下：
（色调，饱和度，亮度，透明度）
- 色调值以度为测量单位，用0到360之间的整数表示。
- 饱和度值用0到100之间的整数表示，100表示最高饱和度。
- 亮度值用1到100之间的整数表示，100表示最亮。
- 透明度值通过0.0（完全透明）到1.0（完全不透明）之间的数值表示。
05 CSS
CSS颜色模型允许使用CSS语法查看或输入RGBa值。
CSS值的语法如下：
rgba（红色，绿色，蓝色，透明度）
- 红色、绿色和蓝色值通过0到255之间的整数定义颜色的强度。
- 透明度值通过0.0（完全透明）到1.0（完全不透明）之间的数值表示。
颜色信息如何传达给开发人员或工程师？CSS模型允许您复制所选颜色的CSS友好型表示法。这使您可以直接将其粘贴到样式表中，包括格式。
二、查看和调整颜色模型的色值
使用颜色选择器可以查看和更新不同颜色模型的颜色。
- 选中一个图层。
- 点击右侧边栏的填充或描边部分中的色板打开颜色选择器。
- 使用色调和透明度滑块下方的下拉菜单查看当前颜色模型或选择其他的颜色模型。
- Figma将显示您选择的颜色模型对应的色值。
你也可以在色值字段框中输入数值来调整颜色：
- RGB、HSL和HSB颜色模型为透明度值设有单独的百分比字段。
- CSS颜色模型必须包含一个介于0.0到1.0之间的透明度值。
- 对于十六进制，你可以选择以下一个方式：
- 输入一个6位的十六进制代码，并使用单独的百分比字段来调整透明度值。
- 输入一个包含透明度值作为最后两位数字的8位十六进制代码。
从「不会画界面」到「只会画界面」再到「懂用户心理」，这条路我走了 10年 —— 如果你也在进阶，关注我，咱们结伴走得更快。
推荐阅读