拓冰网站定制  函数详解：RGB 到 HSL 色彩空间转换的完整指南)
前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载本文以 FAST 官网 1.x API 文档中 rgbToHSL() 函数 为讲解主体说明该函数的签名、参数、返回类型与注意事项并结合 fast-colors 模块总览 与 ColorHSL 类 的文档细节把RGB 转 HSL这一能力放回 FAST 设计系统调色板生成palette generation的完整调用链中。读完后你将能够正确使用rgbToHSL()做色彩空间转换并掌握其返回的ColorHSL对象在各属性、方法与下游插值、亮度匹配函数中的用法。函数签名与参数说明rgbToHSL()是microsoft/fast-colors包导出的一个纯转换函数其职责单一把一种 RGB 颜色ColorRGBA64转换为 HSL 颜色ColorHSL。官方文档给出的 TypeScript 签名如下export declare function rgbToHSL(rgb: ColorRGBA64): ColorHSL;参数与返回值说明继承自 rgbToHSL() 文档参数类型说明rgbColorRGBA64the rgb color to convert要转换的 RGB 颜色返回值ColorHSL重要备注RemarksThe alpha channel of the input is ignored—— 输入颜色的 alpha 通道会被忽略。也就是说即使传入的ColorRGBA64带有透明度转换出的ColorHSL也不保留任何 alpha 信息如果需要不透明度需要在 HSL 结果之上自行维护。输入类型 ColorRGBA64 在模块总览中被描述为 A RGBA color with 64 bit channels带 64 位通道的 RGBA 颜色即各通道以浮点精度存储而非压缩到 0–255 的整数字节。对使用者来说这意味着rgbToHSL()可以接受任意精度包括带 alpha的 RGBA 值而不仅仅是一组 8 位整数字节。返回类型 ColorHSL 的约定与成员要正确使用rgbToHSL()的返回值必须先理解 ColorHSL 类 的约定。文档中对这一类有一条非常关键的提示This uses Hue values in degree format. So expect a range of [0,360]. Some other implementations instead uses radians or a normalized Hue with range [0,1]. Be aware of this when checking values or using other libraries.即hHue采用度格式取值范围为 [0, 360]。这一点与其他一些色彩库使用弧度制或归一化到 [0, 1] 的色相不同。从文档表述可以推断如果你在断言转换结果、或者把ColorHSL与第三方库互相传递时务必先确认双方的色相单位约定否则同一颜色会得到看似差 6.28 倍或 360 倍的数值。ColorHSL 文档 列出的完整成员如下构造函数(constructor)(hue, sat, lum)constructor(hue: number, sat: number, lum: number);注意参数顺序是hue, sat, lum而非h, l, s的 CSShsl()书写顺序。手动构造ColorHSL时按此顺序传参即可而通过rgbToHSL()转换得到的实例则无需关心构造细节。只读属性属性类型说明hnumberreadonlyHue度格式[0, 360]snumberreadonlySaturation饱和度lnumberreadonlyLightness亮度从h.md文档给出的签名readonly h: number;可以确认三个通道均为只读属性——ColorHSL实例一经创建或经rgbToHSL()产出其分量不可原地修改。需要修改后的颜色时应通过转换/插值函数生成新实例这与整个 fast-colors 模块大量使用不可变对象各toObject()/roundToPrecision()方法都返回新值的设计风格一致。实例方法与静态方法ColorHSL 文档 中列出的方法方法说明equalValue(rhs)Determines if a color is equal to another判断两个颜色是否相等fromObject(data)staticConstruct a ColorHSL from a config object从配置对象构造roundToPrecision(precision)Returns a new ColorHSL rounded to the provided precision返回按精度舍入后的新 ColorHSLtoObject()Returns the ColorHSL formatted as an object以普通对象形式返回其中两个与rgbToHSL()使用场景直接相关fromObject的签名来自 fromObject 文档static fromObject(data: { h: number; s: number; l: number; }): ColorHSL | null;它接受{ h, s, l }结构的配置对象并返回ColorHSL | null。从返回类型可以推断当输入数据不合法例如缺少分量时会返回null而非抛错调用方应对null分支做防御。rgbToHSL()的返回值与fromObject()的返回值是同一类型二者可与toObject()互转便于序列化和持久化。roundToPrecision(precision)由于ColorRGBA64使用 64 位浮点通道rgbToHSL()产出的h/s/l是高精度浮点数例如色相可能是 217.391304…。若后续要把结果用于 CSS 字符串或比对用roundToPrecision()生成舍入后的新实例是文档化的标准做法。rgbToHSL() 在 fast-colors 转换函数族中的位置fast-colors 模块总览 列出了完整的函数清单从中可以看清rgbToHSL()所属的RGB 向外围色彩空间发散的转换族函数文档说明rgbToHSL(rgb)rgbToHSL本文主体RGB → HSLrgbToHSV(rgb)rgbToHSVRGB → HSVrgbToLAB(rgb)rgbToLABRGB → CIELABrgbToLCH(rgb)rgbToLCHRGB → CIELCHrgbToXYZ(rgb)rgbToXYZRGB → CIE XYZrgbToTemperature(rgb)rgbToTemperatureRGB → 色温rgbToLinearLuminance(rgb)rgbToLinearLuminance线性 RGB 空间亮度非 WCAG 相对亮度rgbToRelativeLuminance(rgb)rgbToRelativeLuminanceWCAG 对比度计算所需的 sRGB 相对亮度同样忽略 alphaHSL 与 HSV 是两种不同的圆柱坐标系HSL 的l是感知上更直观的明暗纯黑 0、纯白 1、灰色中间HSV 的v是最亮通道值。选择 HSL 的典型理由是它便于围绕亮度做操作——这一点从下文下游函数可以看出。逆函数 hslToRGB() 与转换往返与rgbToHSL()配对的逆函数是 hslToRGB()export declare function hslToRGB(hsl: ColorHSL, alpha?: number): ColorRGBA64;参数类型说明hslColorHSLthe hsl color to convertalphanumber可选the alpha value返回 ColorRGBA64。注意两个不对称点rgbToHSL()忽略输入的 alpha而hslToRGB()提供了可选的alpha参数来指定输出透明度——这意味着丢弃 alpha → 修改 HSL → 重建 RGB 并显式指定 alpha的往返模式是这套 API 设计的默认假设由于 HSL 分量是浮点数rgbToHSL()与hslToRGB()组成的往返转换在数值上会有极小的精度损失文档化场景下可用ColorRGBA64侧的 equalValue() / roundToPrecision() 做舍入与容差比较。一个典型用法示例仅使用文档中已声明的 APIimport { ColorRGBA64, rgbToHSL, hslToRGB } from microsoft/fast-colors; // 输入任意 RGBAalpha 将被 rgbToHSL 忽略 const rgb new ColorRGBA64(0.2, 0.4, 0.8, 1); // RGB - HSLh 为度[0, 360] const hsl rgbToHSL(rgb); console.log(hsl.h, hsl.s, hsl.l); // 只读属性度格式色相 // 在 HSL 空间修改亮度生成新的 ColorHSL度格式色相 const lighter new ColorHSL(hsl.h, hsl.s, Math.min(1, hsl.l 0.1)); // HSL - RGB并显式指定输出 alpha const rgb2 hslToRGB(lighter, 1);下游能力HSL 空间插值与亮度匹配rgbToHSL()的真正价值在于为在 HSL 空间中做运算提供入口。模块总览中与 HSL 直接相关的两个下游函数都依赖 HSL 的 Lightness 分量interpolateHSL()interpolateHSL 在两个 HSL 颜色之间按位置做线性插值export declare function interpolateHSL( position: number, left: ColorHSL, right: ColorHSL ): ColorHSL;参数为插值位置position以及左右两个ColorHSL返回ColorHSL。它是 ColorInterpolationSpacecolor interpolation spaces枚举体系的一部分——模块中同时提供interpolateRGB、interpolateHSV、interpolateLAB、interpolateLCH、interpolateXYZ等多种色彩空间插值以及统一入口 interpolateByColorSpace。调色板生成如 ColorPalette 的 GeneratePaletteColorScale与 ColorScale 的线性标度都建立在这组插值能力之上rgbToHSL()则是把任意 RGB 输入拉进 HSL 插值域的第一步。matchLightnessIndex()matchLightnessIndex 展示了 HSL 亮度分量的另一类应用export declare function matchLightnessIndex( input: ColorRGBA64, reference: ColorRGBA64[] ): number;文档描述为Takes the input color and compares it to each color in the reference array to find the index with the closest Lightness value in HSL color space将输入颜色与参考数组逐个比较找出HSL 色彩空间中 Lightness 最接近的索引。它的输入是ColorRGBA64[]从文档描述推断内部会对各颜色做 RGB → HSL 转换后比较l分量——这正是rgbToHSL()所支撑的典型场景把任意颜色映射到参考灰度/亮度序列上的对应档位常用于 generateOffCenterPalette 一类按输入色亮度决定其在调色板中的位置的算法。使用注意事项小结结合 rgbToHSL() 原文档 的 Remarks 与 ColorHSL 类文档 的约定使用rgbToHSL()时应注意alpha 被忽略输入ColorRGBA64的透明度不会进入ColorHSL重建 RGB 时用hslToRGB(hsl, alpha)的可选参数显式补回。色相单位是度h ∈ [0, 360]不是弧度也不是 [0,1] 归一化值与外部库互操作前先对齐单位。分量只读h/s/l均为 readonly修改颜色要构造新ColorHSL或使用roundToPrecision()等返回新实例的方法。浮点精度ColorRGBA64为 64 位通道转换结果为高精度浮点需要展示或比对时用roundToPrecision(precision)或toObject()处理。防御fromObject的 null从配置对象反向构造时fromObject 可能返回null。相关文档索引rgbToHSL() 函数文档本文主体fast-colors 模块 API 总览全部类、函数、枚举、接口清单ColorHSL 类、构造函数、h 属性ColorRGBA64 类hslToRGB() 函数interpolateHSL() 函数、matchLightnessIndex() 函数赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐Polybar颜色管理终极指南RGB与HSL色彩空间转换详解Polybar颜色管理终极指南RGB与HSL色彩空间转换详解 Polybar作为一款快速易用的状态栏工具其强大的颜色管理系统让用户能够创建个性化的桌面环境。桌面应用FAST 1.x microsoft/fast-colors 的 quantizeHistogram() 函数详解直方图量化与调色板提取的核心 APIFAST 1.x microsoft/fast colors 的 quantizeHistogram 函数详解直方图量化与调色板提取的核心 API quan前端UI组件FAST 颜色系统详解microsoft/fast-colors 中 QuantizedColor.color 属性与图像调色板量化FAST 颜色系统详解microsoft/fast colors 中 QuantizedColor.color 属性与图像调色板量化 本文围绕 micro前端UI组件上一篇免费解锁Windows远程桌面完整功能RDP Wrapper快速配置指南下一篇三月七小助手解放星穹铁道玩家的自动化神器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Microsoft FAST 中 @microsoft/fast-colors 的 rgbToHSL() 函数详解：RGB 到 HSL 色彩空间转换的完整指南
前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载本文以 FAST 官网 1.x API 文档中 rgbToHSL() 函数 为讲解主体说明该函数的签名、参数、返回类型与注意事项并结合 fast-colors 模块总览 与 ColorHSL 类 的文档细节把RGB 转 HSL这一能力放回 FAST 设计系统调色板生成palette generation的完整调用链中。读完后你将能够正确使用rgbToHSL()做色彩空间转换并掌握其返回的ColorHSL对象在各属性、方法与下游插值、亮度匹配函数中的用法。函数签名与参数说明rgbToHSL()是microsoft/fast-colors包导出的一个纯转换函数其职责单一把一种 RGB 颜色ColorRGBA64转换为 HSL 颜色ColorHSL。官方文档给出的 TypeScript 签名如下export declare function rgbToHSL(rgb: ColorRGBA64): ColorHSL;参数与返回值说明继承自 rgbToHSL() 文档参数类型说明rgbColorRGBA64the rgb color to convert要转换的 RGB 颜色返回值ColorHSL重要备注RemarksThe alpha channel of the input is ignored—— 输入颜色的 alpha 通道会被忽略。也就是说即使传入的ColorRGBA64带有透明度转换出的ColorHSL也不保留任何 alpha 信息如果需要不透明度需要在 HSL 结果之上自行维护。输入类型 ColorRGBA64 在模块总览中被描述为 A RGBA color with 64 bit channels带 64 位通道的 RGBA 颜色即各通道以浮点精度存储而非压缩到 0–255 的整数字节。对使用者来说这意味着rgbToHSL()可以接受任意精度包括带 alpha的 RGBA 值而不仅仅是一组 8 位整数字节。返回类型 ColorHSL 的约定与成员要正确使用rgbToHSL()的返回值必须先理解 ColorHSL 类 的约定。文档中对这一类有一条非常关键的提示This uses Hue values in degree format. So expect a range of [0,360]. Some other implementations instead uses radians or a normalized Hue with range [0,1]. Be aware of this when checking values or using other libraries.即hHue采用度格式取值范围为 [0, 360]。这一点与其他一些色彩库使用弧度制或归一化到 [0, 1] 的色相不同。从文档表述可以推断如果你在断言转换结果、或者把ColorHSL与第三方库互相传递时务必先确认双方的色相单位约定否则同一颜色会得到看似差 6.28 倍或 360 倍的数值。ColorHSL 文档 列出的完整成员如下构造函数(constructor)(hue, sat, lum)constructor(hue: number, sat: number, lum: number);注意参数顺序是hue, sat, lum而非h, l, s的 CSShsl()书写顺序。手动构造ColorHSL时按此顺序传参即可而通过rgbToHSL()转换得到的实例则无需关心构造细节。只读属性属性类型说明hnumberreadonlyHue度格式[0, 360]snumberreadonlySaturation饱和度lnumberreadonlyLightness亮度从h.md文档给出的签名readonly h: number;可以确认三个通道均为只读属性——ColorHSL实例一经创建或经rgbToHSL()产出其分量不可原地修改。需要修改后的颜色时应通过转换/插值函数生成新实例这与整个 fast-colors 模块大量使用不可变对象各toObject()/roundToPrecision()方法都返回新值的设计风格一致。实例方法与静态方法ColorHSL 文档 中列出的方法方法说明equalValue(rhs)Determines if a color is equal to another判断两个颜色是否相等fromObject(data)staticConstruct a ColorHSL from a config object从配置对象构造roundToPrecision(precision)Returns a new ColorHSL rounded to the provided precision返回按精度舍入后的新 ColorHSLtoObject()Returns the ColorHSL formatted as an object以普通对象形式返回其中两个与rgbToHSL()使用场景直接相关fromObject的签名来自 fromObject 文档static fromObject(data: { h: number; s: number; l: number; }): ColorHSL | null;它接受{ h, s, l }结构的配置对象并返回ColorHSL | null。从返回类型可以推断当输入数据不合法例如缺少分量时会返回null而非抛错调用方应对null分支做防御。rgbToHSL()的返回值与fromObject()的返回值是同一类型二者可与toObject()互转便于序列化和持久化。roundToPrecision(precision)由于ColorRGBA64使用 64 位浮点通道rgbToHSL()产出的h/s/l是高精度浮点数例如色相可能是 217.391304…。若后续要把结果用于 CSS 字符串或比对用roundToPrecision()生成舍入后的新实例是文档化的标准做法。rgbToHSL() 在 fast-colors 转换函数族中的位置fast-colors 模块总览 列出了完整的函数清单从中可以看清rgbToHSL()所属的RGB 向外围色彩空间发散的转换族函数文档说明rgbToHSL(rgb)rgbToHSL本文主体RGB → HSLrgbToHSV(rgb)rgbToHSVRGB → HSVrgbToLAB(rgb)rgbToLABRGB → CIELABrgbToLCH(rgb)rgbToLCHRGB → CIELCHrgbToXYZ(rgb)rgbToXYZRGB → CIE XYZrgbToTemperature(rgb)rgbToTemperatureRGB → 色温rgbToLinearLuminance(rgb)rgbToLinearLuminance线性 RGB 空间亮度非 WCAG 相对亮度rgbToRelativeLuminance(rgb)rgbToRelativeLuminanceWCAG 对比度计算所需的 sRGB 相对亮度同样忽略 alphaHSL 与 HSV 是两种不同的圆柱坐标系HSL 的l是感知上更直观的明暗纯黑 0、纯白 1、灰色中间HSV 的v是最亮通道值。选择 HSL 的典型理由是它便于围绕亮度做操作——这一点从下文下游函数可以看出。逆函数 hslToRGB() 与转换往返与rgbToHSL()配对的逆函数是 hslToRGB()export declare function hslToRGB(hsl: ColorHSL, alpha?: number): ColorRGBA64;参数类型说明hslColorHSLthe hsl color to convertalphanumber可选the alpha value返回 ColorRGBA64。注意两个不对称点rgbToHSL()忽略输入的 alpha而hslToRGB()提供了可选的alpha参数来指定输出透明度——这意味着丢弃 alpha → 修改 HSL → 重建 RGB 并显式指定 alpha的往返模式是这套 API 设计的默认假设由于 HSL 分量是浮点数rgbToHSL()与hslToRGB()组成的往返转换在数值上会有极小的精度损失文档化场景下可用ColorRGBA64侧的 equalValue() / roundToPrecision() 做舍入与容差比较。一个典型用法示例仅使用文档中已声明的 APIimport { ColorRGBA64, rgbToHSL, hslToRGB } from microsoft/fast-colors; // 输入任意 RGBAalpha 将被 rgbToHSL 忽略 const rgb new ColorRGBA64(0.2, 0.4, 0.8, 1); // RGB - HSLh 为度[0, 360] const hsl rgbToHSL(rgb); console.log(hsl.h, hsl.s, hsl.l); // 只读属性度格式色相 // 在 HSL 空间修改亮度生成新的 ColorHSL度格式色相 const lighter new ColorHSL(hsl.h, hsl.s, Math.min(1, hsl.l 0.1)); // HSL - RGB并显式指定输出 alpha const rgb2 hslToRGB(lighter, 1);下游能力HSL 空间插值与亮度匹配rgbToHSL()的真正价值在于为在 HSL 空间中做运算提供入口。模块总览中与 HSL 直接相关的两个下游函数都依赖 HSL 的 Lightness 分量interpolateHSL()interpolateHSL 在两个 HSL 颜色之间按位置做线性插值export declare function interpolateHSL( position: number, left: ColorHSL, right: ColorHSL ): ColorHSL;参数为插值位置position以及左右两个ColorHSL返回ColorHSL。它是 ColorInterpolationSpacecolor interpolation spaces枚举体系的一部分——模块中同时提供interpolateRGB、interpolateHSV、interpolateLAB、interpolateLCH、interpolateXYZ等多种色彩空间插值以及统一入口 interpolateByColorSpace。调色板生成如 ColorPalette 的 GeneratePaletteColorScale与 ColorScale 的线性标度都建立在这组插值能力之上rgbToHSL()则是把任意 RGB 输入拉进 HSL 插值域的第一步。matchLightnessIndex()matchLightnessIndex 展示了 HSL 亮度分量的另一类应用export declare function matchLightnessIndex( input: ColorRGBA64, reference: ColorRGBA64[] ): number;文档描述为Takes the input color and compares it to each color in the reference array to find the index with the closest Lightness value in HSL color space将输入颜色与参考数组逐个比较找出HSL 色彩空间中 Lightness 最接近的索引。它的输入是ColorRGBA64[]从文档描述推断内部会对各颜色做 RGB → HSL 转换后比较l分量——这正是rgbToHSL()所支撑的典型场景把任意颜色映射到参考灰度/亮度序列上的对应档位常用于 generateOffCenterPalette 一类按输入色亮度决定其在调色板中的位置的算法。使用注意事项小结结合 rgbToHSL() 原文档 的 Remarks 与 ColorHSL 类文档 的约定使用rgbToHSL()时应注意alpha 被忽略输入ColorRGBA64的透明度不会进入ColorHSL重建 RGB 时用hslToRGB(hsl, alpha)的可选参数显式补回。色相单位是度h ∈ [0, 360]不是弧度也不是 [0,1] 归一化值与外部库互操作前先对齐单位。分量只读h/s/l均为 readonly修改颜色要构造新ColorHSL或使用roundToPrecision()等返回新实例的方法。浮点精度ColorRGBA64为 64 位通道转换结果为高精度浮点需要展示或比对时用roundToPrecision(precision)或toObject()处理。防御fromObject的 null从配置对象反向构造时fromObject 可能返回null。相关文档索引rgbToHSL() 函数文档本文主体fast-colors 模块 API 总览全部类、函数、枚举、接口清单ColorHSL 类、构造函数、h 属性ColorRGBA64 类hslToRGB() 函数interpolateHSL() 函数、matchLightnessIndex() 函数赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐Polybar颜色管理终极指南RGB与HSL色彩空间转换详解Polybar颜色管理终极指南RGB与HSL色彩空间转换详解 Polybar作为一款快速易用的状态栏工具其强大的颜色管理系统让用户能够创建个性化的桌面环境。桌面应用FAST 1.x microsoft/fast-colors 的 quantizeHistogram() 函数详解直方图量化与调色板提取的核心 APIFAST 1.x microsoft/fast colors 的 quantizeHistogram 函数详解直方图量化与调色板提取的核心 API quan前端UI组件FAST 颜色系统详解microsoft/fast-colors 中 QuantizedColor.color 属性与图像调色板量化FAST 颜色系统详解microsoft/fast colors 中 QuantizedColor.color 属性与图像调色板量化 本文围绕 micro前端UI组件上一篇免费解锁Windows远程桌面完整功能RDP Wrapper快速配置指南下一篇三月七小助手解放星穹铁道玩家的自动化神器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考