前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载本文以 microsoft/fast-components 1.x API 参考文档中的SwatchRGB变量页为骨架系统讲解 FAST 设计系统中颜色的底层表示方式SwatchRGB的create/from工厂方法、r/g/b三通道属性、与Swatch接口、Palette/PaletteRGB色板体系以及RelativeLuminance相对亮度的协作关系。读完本文你将掌握如何用SwatchRGB构造与拷贝颜色、如何理解并调用contrast()对比度与toColorString()颜色字符串方法以及如何把这一颜色模型接入accentPalette、neutralPalette等设计令牌为组件定制主题色提供可落地的操作路径。一、SwatchRGB 在 FAST 设计系统中的定位在 fast-components 1.x 的 API 索引页中SwatchRGB被列在Variables变量分区与accentPalette、neutralPalette、baseLayerLuminance、StandardLuminance、accentFillRest、neutralForegroundRest等一大批设计令牌并列。它同时也是Interfaces接口分区中Swatch、Palette、InteractiveSwatchSet等类型的基础载体。从这一索引结构可以推断FAST 1.x 的整个设计系统Design System把颜色建模为「色板Palette 色样Swatch 配方Recipe」而SwatchRGB就是承载具体 RGB 色值的最小单元——所有强调色accent、中性色neutral、前景/填充/描边等颜色令牌最终都以它或由它构成的色板为数据底座。二、SwatchRGB 变量签名与工厂方法SwatchRGB 变量页给出的完整签名如下SwatchRGB: Readonly{ create(r: number, g: number, b: number): SwatchRGB; from(obj: { r: number; g: number; b: number; }): SwatchRGB; }它对外暴露两个工厂方法这也是使用该类型仅有的两个入口2.1 create(r, g, b)按三个通道直接构造参数r、g、b均为number类型分别对应红、绿、蓝通道。返回一个SwatchRGB实例。适用场景从「数字形态」的颜色源例如品牌色0, 119, 242快速建立色样是最常用的构造方式。2.2 from(obj)从对象拷贝构造参数一个包含r、g、b三个number字段的对象。返回一个SwatchRGB实例。适用场景当你手里已经有一个结构为{ r, g, b }的颜色对象例如从配置或数据接口读入的颜色from可以将其规范化为标准SwatchRGB便于继续参与对比度计算、色板构建等后续流程。值得注意的是整个变量被Readonly包裹意味着create/from这两个工厂方法本身只读、不可被覆盖保证颜色构造入口在运行时稳定。三、r、g、b三个可读通道属性SwatchRGB实例上挂载三个number类型属性分别对应三个通道属性类型文档位置rnumberSwatchRGB.r 属性页gnumberSwatchRGB.g 属性页bnumberSwatchRGB.b 属性页三者均为标准数值通道可以直接读取参与运算。结合create/from一个完整的最小使用示例是import { SwatchRGB } from microsoft/fast-components; // 1. 用数值构造品牌蓝 const brand SwatchRGB.create(0, 119, 242); // 2. 从 { r, g, b } 对象构造一份副本 const brandCopy SwatchRGB.from({ r: 0, g: 119, b: 242 }); // 3. 三个通道可独立读取 console.log(brand.r, brand.g, brand.b); // 0 119 242四、从 Swatch 接口看颜色语义对比度与字符串输出Swatch 接口页明确指出Swatch 表示 Palette色板中的一种颜色并且export interface Swatch extends RelativeLuminance即Swatch继承了RelativeLuminance天然携带「相对亮度」这一可用于对比度计算的度量。接口还声明了两个方法4.1 contrast(target)计算与目标色的对比度contrast(target: RelativeLuminance): number;参数target一个实现了RelativeLuminance的对象Swatch自身即满足该约束。返回number即当前色与目标色之间的对比度数值。语义该方法用于回答「当前颜色相对于另一个颜色的对比度是多少」这正是组件在 hover/focus 等状态下选择前景色的依据。从接口命名与用法可以推断RelativeLuminance约定了一个可被比较的亮度度量contrast()基于两个亮度值计算对比度比率。4.2 toColorString()输出可用的颜色字符串toColorString(): string;参数无。返回string即该颜色可被直接用于 CSS 的颜色字符串形态如rgb(...)或#rrggbb。该方法是「颜色模型 → 浏览器可消费形态」的出口设计令牌计算出的SwatchRGB最终正是通过toColorString()落到组件的 CSS 自定义属性或样式值上。示例const colorString: string brand.toColorString(); // 可在 CSS 中直接使用的字符串五、相对亮度与 WCAG 对比度的底层原理Swatch继承的RelativeLuminance与对比度计算并非凭空而来而是由同仓库的microsoft/fast-colors1.x 提供数学支撑。相关文档 rgbToRelativeLuminance() 函数页说明了关键细节Get the relative luminance of a color. Adjusts the color to sRGB space, which is necessary for the WCAG contrast spec. The alpha channel of the input is ignored.要点有三计算相对亮度前会把颜色调整到sRGB 空间这是WCAG 对比度规范的前提输入的alpha 通道被忽略透明度不参与亮度计算该函数接收ColorRGBA64类型输入返回number亮度值——说明颜色数学集中在fast-colors而fast-components的SwatchRGB/Swatch在此之上做设计系统层面的封装。与之配套的还有 isDark(color) 函数页描述为 Determines if a color should be considered Dark Mode用于判断一个颜色是否应视为深色模式是明暗主题判定配合baseLayerLuminance、StandardLuminance等令牌的基础能力。六、SwatchRGB 与色板体系Palette、PaletteRGB、closestIndexOfSwatchRGB不是孤立存在它与色板体系紧密耦合6.1 PaletteRGBRGB 色板工厂PaletteRGB 变量页给出了与SwatchRGB对称的签名PaletteRGB: Readonly{ create: typeof create; from: typeof from; }它同样提供create与from两个工厂方法其底层函数类型与各自实现一致用于基于某个源颜色生成一条连续的色板。6.2 Palette 接口色样集合与最近索引Palette 接口被描述为A collection of Swatch instances一组 Swatch 实例的集合其两个核心成员为swatches: ReadonlyArrayT见 Palette.swatches 属性页只读的色样数组T为色样类型对应SwatchRGB。closestIndexOf(reference: RelativeLuminance): number见 Palette.closestIndexOf() 方法页返回色板中相对亮度与给定参考最接近的色样索引。closestIndexOf的语义可以从文档原文确认——Returns the index of the palette that most closely matches the relativeLuminance of the provided swatch。这解释了色板如何按亮度定位颜色设计令牌如accentFillRest本质上是在色板上按亮度索引选取某一档色样。6.3 典型链路综合上述接口一条完整的「颜色 → 色板 → 令牌」链路可以表述为用SwatchRGB.create(r, g, b)建立品牌色色样用PaletteRGB.create(...)由该色样生成Palette色板通过palette.closestIndexOf(reference)按亮度定位档位色板中的每个Swatch通过contrast()做对比度校验、通过toColorString()输出为可用的 CSS 颜色。七、实战视角SwatchRGB 与交互色集合 InteractiveSwatchSet在真实组件按钮、输入框等中颜色令牌通常不只有一个静态色而是覆盖 rest / hover / focus / active 四种状态。InteractiveSwatchSet 接口页对此给出了明确定义属性类型描述activeSwatch应用于active按下状态的色样focusSwatch应用于focus聚焦状态的色样hoverSwatch应用于hover悬停状态的色样restSwatch应用于rest静止状态的色样从 fast-components.md 索引可以看到accentFillActive、accentFillHover、accentFillFocus、accentFillRest以及neutralFill*、neutralStroke*等一系列变量正是这种「按状态展开」的颜色令牌。它们输出的色样类型最终都能落到Swatch/SwatchRGB这一模型上——也就是说SwatchRGB是理解这些令牌输出形态的钥匙每个令牌解析出来的最终值都可以通过toColorString()变成可写进 CSS 的颜色字符串。八、在仓库中继续深入本主题的权威 API 参考全部位于 sites/website/src/docs/1.x/api/ 目录可直接阅读以下页面SwatchRGB 变量本文主体Swatch 接口 与 contrast()、toColorString()Palette 接口 与 PaletteRGB 变量InteractiveSwatchSet 接口颜色数学基础rgbToRelativeLuminance()更完整的设计令牌清单accentPalette、neutralPalette、accentFill*、neutralForeground*、baseLayerLuminance、StandardLuminance等见 fast-components 1.x API 总索引。需要说明的是上述 API 文档由 API Documenter 自动生成描述的是microsoft/fast-components1.x 公开 API 的事实签名SwatchRGB的create/from内部算法实现细节未包含在仓库文档中如确需深入实现可依据本文给出的接口契约在类型层面继续推演。九、小结SwatchRGB是 FAST 1.x 设计系统的颜色基石create(r, g, b)与from({ r, g, b })提供了统一、只读的颜色构造入口r/g/b三通道是全部色板与令牌运算的原始数据而通过Swatch接口继承的RelativeLuminance与contrast()/toColorString()方法则把「颜色」与「可计算的亮度、可输出的 CSS 字符串」连接起来。掌握这一模型就掌握了阅读和理解accentFillRest、neutralLayer1等全部设计令牌输出形态的基础。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐FAST 1.x microsoft/fast-colorstemperatureToRGB() 色温转 RGB 颜色函数详解FAST 1.x microsoft/fast colorstemperatureToRGB 色温转 RGB 颜色函数详解 在 FAST 1.x 的 mi前端UI组件FAST 1.x microsoft/fast-colors 的 quantizeHistogram() 函数详解直方图量化与调色板提取的核心 APIFAST 1.x microsoft/fast colors 的 quantizeHistogram 函数详解直方图量化与调色板提取的核心 API quan前端UI组件FAST 颜色量化核心深入解析 microsoft/fast-colors 的 PixelBox.averageColor 代表色FAST 颜色量化核心深入解析 microsoft/fast colors 的 PixelBox.averageColor 代表色 PixelBox.ave前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
深入 FAST 1.x 设计系统：SwatchRGB 颜色模型与色板核心 API 详解
前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载本文以 microsoft/fast-components 1.x API 参考文档中的SwatchRGB变量页为骨架系统讲解 FAST 设计系统中颜色的底层表示方式SwatchRGB的create/from工厂方法、r/g/b三通道属性、与Swatch接口、Palette/PaletteRGB色板体系以及RelativeLuminance相对亮度的协作关系。读完本文你将掌握如何用SwatchRGB构造与拷贝颜色、如何理解并调用contrast()对比度与toColorString()颜色字符串方法以及如何把这一颜色模型接入accentPalette、neutralPalette等设计令牌为组件定制主题色提供可落地的操作路径。一、SwatchRGB 在 FAST 设计系统中的定位在 fast-components 1.x 的 API 索引页中SwatchRGB被列在Variables变量分区与accentPalette、neutralPalette、baseLayerLuminance、StandardLuminance、accentFillRest、neutralForegroundRest等一大批设计令牌并列。它同时也是Interfaces接口分区中Swatch、Palette、InteractiveSwatchSet等类型的基础载体。从这一索引结构可以推断FAST 1.x 的整个设计系统Design System把颜色建模为「色板Palette 色样Swatch 配方Recipe」而SwatchRGB就是承载具体 RGB 色值的最小单元——所有强调色accent、中性色neutral、前景/填充/描边等颜色令牌最终都以它或由它构成的色板为数据底座。二、SwatchRGB 变量签名与工厂方法SwatchRGB 变量页给出的完整签名如下SwatchRGB: Readonly{ create(r: number, g: number, b: number): SwatchRGB; from(obj: { r: number; g: number; b: number; }): SwatchRGB; }它对外暴露两个工厂方法这也是使用该类型仅有的两个入口2.1 create(r, g, b)按三个通道直接构造参数r、g、b均为number类型分别对应红、绿、蓝通道。返回一个SwatchRGB实例。适用场景从「数字形态」的颜色源例如品牌色0, 119, 242快速建立色样是最常用的构造方式。2.2 from(obj)从对象拷贝构造参数一个包含r、g、b三个number字段的对象。返回一个SwatchRGB实例。适用场景当你手里已经有一个结构为{ r, g, b }的颜色对象例如从配置或数据接口读入的颜色from可以将其规范化为标准SwatchRGB便于继续参与对比度计算、色板构建等后续流程。值得注意的是整个变量被Readonly包裹意味着create/from这两个工厂方法本身只读、不可被覆盖保证颜色构造入口在运行时稳定。三、r、g、b三个可读通道属性SwatchRGB实例上挂载三个number类型属性分别对应三个通道属性类型文档位置rnumberSwatchRGB.r 属性页gnumberSwatchRGB.g 属性页bnumberSwatchRGB.b 属性页三者均为标准数值通道可以直接读取参与运算。结合create/from一个完整的最小使用示例是import { SwatchRGB } from microsoft/fast-components; // 1. 用数值构造品牌蓝 const brand SwatchRGB.create(0, 119, 242); // 2. 从 { r, g, b } 对象构造一份副本 const brandCopy SwatchRGB.from({ r: 0, g: 119, b: 242 }); // 3. 三个通道可独立读取 console.log(brand.r, brand.g, brand.b); // 0 119 242四、从 Swatch 接口看颜色语义对比度与字符串输出Swatch 接口页明确指出Swatch 表示 Palette色板中的一种颜色并且export interface Swatch extends RelativeLuminance即Swatch继承了RelativeLuminance天然携带「相对亮度」这一可用于对比度计算的度量。接口还声明了两个方法4.1 contrast(target)计算与目标色的对比度contrast(target: RelativeLuminance): number;参数target一个实现了RelativeLuminance的对象Swatch自身即满足该约束。返回number即当前色与目标色之间的对比度数值。语义该方法用于回答「当前颜色相对于另一个颜色的对比度是多少」这正是组件在 hover/focus 等状态下选择前景色的依据。从接口命名与用法可以推断RelativeLuminance约定了一个可被比较的亮度度量contrast()基于两个亮度值计算对比度比率。4.2 toColorString()输出可用的颜色字符串toColorString(): string;参数无。返回string即该颜色可被直接用于 CSS 的颜色字符串形态如rgb(...)或#rrggbb。该方法是「颜色模型 → 浏览器可消费形态」的出口设计令牌计算出的SwatchRGB最终正是通过toColorString()落到组件的 CSS 自定义属性或样式值上。示例const colorString: string brand.toColorString(); // 可在 CSS 中直接使用的字符串五、相对亮度与 WCAG 对比度的底层原理Swatch继承的RelativeLuminance与对比度计算并非凭空而来而是由同仓库的microsoft/fast-colors1.x 提供数学支撑。相关文档 rgbToRelativeLuminance() 函数页说明了关键细节Get the relative luminance of a color. Adjusts the color to sRGB space, which is necessary for the WCAG contrast spec. The alpha channel of the input is ignored.要点有三计算相对亮度前会把颜色调整到sRGB 空间这是WCAG 对比度规范的前提输入的alpha 通道被忽略透明度不参与亮度计算该函数接收ColorRGBA64类型输入返回number亮度值——说明颜色数学集中在fast-colors而fast-components的SwatchRGB/Swatch在此之上做设计系统层面的封装。与之配套的还有 isDark(color) 函数页描述为 Determines if a color should be considered Dark Mode用于判断一个颜色是否应视为深色模式是明暗主题判定配合baseLayerLuminance、StandardLuminance等令牌的基础能力。六、SwatchRGB 与色板体系Palette、PaletteRGB、closestIndexOfSwatchRGB不是孤立存在它与色板体系紧密耦合6.1 PaletteRGBRGB 色板工厂PaletteRGB 变量页给出了与SwatchRGB对称的签名PaletteRGB: Readonly{ create: typeof create; from: typeof from; }它同样提供create与from两个工厂方法其底层函数类型与各自实现一致用于基于某个源颜色生成一条连续的色板。6.2 Palette 接口色样集合与最近索引Palette 接口被描述为A collection of Swatch instances一组 Swatch 实例的集合其两个核心成员为swatches: ReadonlyArrayT见 Palette.swatches 属性页只读的色样数组T为色样类型对应SwatchRGB。closestIndexOf(reference: RelativeLuminance): number见 Palette.closestIndexOf() 方法页返回色板中相对亮度与给定参考最接近的色样索引。closestIndexOf的语义可以从文档原文确认——Returns the index of the palette that most closely matches the relativeLuminance of the provided swatch。这解释了色板如何按亮度定位颜色设计令牌如accentFillRest本质上是在色板上按亮度索引选取某一档色样。6.3 典型链路综合上述接口一条完整的「颜色 → 色板 → 令牌」链路可以表述为用SwatchRGB.create(r, g, b)建立品牌色色样用PaletteRGB.create(...)由该色样生成Palette色板通过palette.closestIndexOf(reference)按亮度定位档位色板中的每个Swatch通过contrast()做对比度校验、通过toColorString()输出为可用的 CSS 颜色。七、实战视角SwatchRGB 与交互色集合 InteractiveSwatchSet在真实组件按钮、输入框等中颜色令牌通常不只有一个静态色而是覆盖 rest / hover / focus / active 四种状态。InteractiveSwatchSet 接口页对此给出了明确定义属性类型描述activeSwatch应用于active按下状态的色样focusSwatch应用于focus聚焦状态的色样hoverSwatch应用于hover悬停状态的色样restSwatch应用于rest静止状态的色样从 fast-components.md 索引可以看到accentFillActive、accentFillHover、accentFillFocus、accentFillRest以及neutralFill*、neutralStroke*等一系列变量正是这种「按状态展开」的颜色令牌。它们输出的色样类型最终都能落到Swatch/SwatchRGB这一模型上——也就是说SwatchRGB是理解这些令牌输出形态的钥匙每个令牌解析出来的最终值都可以通过toColorString()变成可写进 CSS 的颜色字符串。八、在仓库中继续深入本主题的权威 API 参考全部位于 sites/website/src/docs/1.x/api/ 目录可直接阅读以下页面SwatchRGB 变量本文主体Swatch 接口 与 contrast()、toColorString()Palette 接口 与 PaletteRGB 变量InteractiveSwatchSet 接口颜色数学基础rgbToRelativeLuminance()更完整的设计令牌清单accentPalette、neutralPalette、accentFill*、neutralForeground*、baseLayerLuminance、StandardLuminance等见 fast-components 1.x API 总索引。需要说明的是上述 API 文档由 API Documenter 自动生成描述的是microsoft/fast-components1.x 公开 API 的事实签名SwatchRGB的create/from内部算法实现细节未包含在仓库文档中如确需深入实现可依据本文给出的接口契约在类型层面继续推演。九、小结SwatchRGB是 FAST 1.x 设计系统的颜色基石create(r, g, b)与from({ r, g, b })提供了统一、只读的颜色构造入口r/g/b三通道是全部色板与令牌运算的原始数据而通过Swatch接口继承的RelativeLuminance与contrast()/toColorString()方法则把「颜色」与「可计算的亮度、可输出的 CSS 字符串」连接起来。掌握这一模型就掌握了阅读和理解accentFillRest、neutralLayer1等全部设计令牌输出形态的基础。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐FAST 1.x microsoft/fast-colorstemperatureToRGB() 色温转 RGB 颜色函数详解FAST 1.x microsoft/fast colorstemperatureToRGB 色温转 RGB 颜色函数详解 在 FAST 1.x 的 mi前端UI组件FAST 1.x microsoft/fast-colors 的 quantizeHistogram() 函数详解直方图量化与调色板提取的核心 APIFAST 1.x microsoft/fast colors 的 quantizeHistogram 函数详解直方图量化与调色板提取的核心 API quan前端UI组件FAST 颜色量化核心深入解析 microsoft/fast-colors 的 PixelBox.averageColor 代表色FAST 颜色量化核心深入解析 microsoft/fast colors 的 PixelBox.averageColor 代表色 PixelBox.ave前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
