原子网络科技 原子网络科技

关于颜色模型 – Figma

2026年08月16日 · 阅读时间约 1 分钟

关于颜色模型 – Figma

开始之前

谁可以使用此功能

可用性:所有套餐均可使用。任何拥有文件编辑权限的人都可以使用颜色选择器并选择颜色模型

概述

Figma 允许您在五种颜色模型中查看颜色:Hex、HSB、HSL、CSS 和 RGB

在颜色模型之间切换只会影响 Figma 描述颜色的方式,不会影响 Figma 渲染颜色的方式。颜色配置文件会影响 Figma 渲染颜色的方式。您可以选择 sRGB 或 Display P3 作为默认颜色配置文件、设计文件的颜色配置文件,或用于导出资源

了解更多关于颜色配置文件与颜色管理的信息

可用的颜色模型

默认情况下,Figma 使用 Hex 模型表示颜色值。您也可以在颜色选择器中查看其他模型的颜色表示法

Hex

Hex 是 Figma 中的默认颜色模型,指的是十六进制颜色。这是一种代表 RGB 值的字母数字简写形式。Web 或数字设计领域的创作者通常将这种颜色模型的表示法称为 hex 代码

Hex 值包含 8 个字符,使用以下语法:#RRGGBBAA

  • RR 代表红色分量
  • GG 代表绿色分量
  • BB 代表蓝色分量
  • AA 代表 Alpha 通道(透明度)分量

Alpha 值为 00 表示完全透明的颜色,Alpha 值为 FF 表示完全不透明的颜色

RGB

RGB(红绿蓝)是最常用的颜色模型。在显示器或屏幕上渲染的每种颜色都由不同数量的红、绿、蓝组成

RGB 值的语法如下:(red, green, blue, alpha)

  • 红色、绿色和蓝色值定义颜色的强度,取值范围为 0 到 255 的整数
  • Alpha 值定义不透明度,取值范围为 0.0(完全透明)到 1.0(完全不透明)之间的数字

HSB

HSB(色相、饱和度、明度)是 RGB 模型的另一种表示方式。它基于人眼感知颜色的方式,而非显示器(RGB 方式)的呈现方式

HSB 值的语法如下:(hue, saturation, brightness, alpha)

  • 色相值以度为单位,用 0 到 360 之间的整数表示
  • 饱和度值用 0 到 100 之间的整数表示,100 表示饱和度最高
  • 明度值用 0 到 100 之间的整数表示,100 表示最亮
  • Alpha 值定义不透明度,取值范围为 0.0(完全透明)到 1.0(完全不透明)之间的数字

HSL

HSL(色相、饱和度、亮度)是另一种基于人眼感知颜色的模型。与 HSB 一样,它也是 RGB 模型的另一种表示方式。HSB 和 HSL 的主要区别在于饱和度和亮度的处理方式不同

HSL 值的语法如下:(hue, saturation, luminance, alpha)

  • 色相值以度为单位,用 0 到 360 之间的整数表示
  • 饱和度值用 0 到 100 之间的整数表示,100 表示饱和度最高
  • 亮度值用 1 到 100 之间的整数表示,100 表示最亮
  • Alpha 值定义不透明度,取值范围为 0.0(完全透明)到 1.0(完全不透明)之间的数字

CSS

CSS 颜色模型允许您使用 CSS 语法查看或输入 RGBA 值

CSS 值的语法如下:rgba(red, green, blue, alpha)

  • 红色、绿色和蓝色值定义颜色的强度,取值范围为 0 到 255 的整数
  • Alpha 值定义不透明度,取值范围为 0.0(完全透明)到 1.0(完全不透明)之间的数字

想向开发人员或工程师传达颜色信息?CSS 模型允许您复制所选颜色的 CSS 友好表示法。您可以直接将其粘贴到样式表中,格式已包含在内

了解更多关于开发者交付的信息

查看和调整颜色模型值

您可以使用颜色选择器在不同颜色模型中查看和更新颜色

  1. 选择一个图层
  2. 点击右侧边栏“填充”或“描边”部分中的色板,打开颜色选择器
  3. 使用色相和不透明度滑块下方的下拉菜单查看当前颜色模型或选择新的颜色模型
  4. Figma 将以您选择的表示法显示值。您也可以直接在可用字段中输入值来调整颜色
    • RGB、HSL 和 HSB 颜色模型有独立的百分比字段用于 Alpha 值
    • CSS 模型必须包含 Alpha 值,取值范围为 0.0 到 1.0 之间的数字
    • 对于 Hex,您可以:
      • 输入 6 位十六进制代码,并使用独立的百分比字段调整 Alpha 值
      • 输入 8 位十六进制代码,将 Alpha 值作为最后两位

本文翻译自 Figma 官方帮助文档:About color models

查看案例 联系我们