Elysia Tools
导航
Design
· 最后更新：2025-01-13
将LCH颜色值转换为HSL用于屏幕显示
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
工具使用指南
LCH转HSL转换器是一款专为设计师和开发者打造的在线工具，用于将CIE LCH（感知均匀）色彩空间中的颜色值，快速、准确地转换为适用于屏幕显示的HSL（色相、饱和度、亮度）格式。
背景
设计师在Figma中使用LCH定义了品牌的主色调 `lch(65, 85, 250)`，现在需要将其应用到网站的CSS中。
问题
需要将LCH值转换为CSS可识别的HSL格式。
如何使用
在工具输入框中输入 `lch(65, 85, 250)`，输出格式选择 `hsl(0,100%,50%)`。
结果
获得转换后的HSL值 `hsl(250, 85%, 65%)`，可直接复制到CSS代码中使用。
背景
一个设计系统维护者需要将定义在LCH色彩空间中的一组基础色板（包含10个颜色）提供给前端团队。
问题
手动逐个转换效率低下且容易出错。
如何使用
将所有LCH颜色值（每行一个）粘贴到输入框，输出格式选择 `values` 以获得最简洁的数值列表。
结果
一次性获得所有颜色的HSL数值列表（如 `250,85,65`），便于前端团队批量导入和使用。
背景
开发者收到一个LCH颜色值 `lch(50, 60, 120)`，想直观地了解其对应的色相、饱和度和亮度具体数值。
问题
需要清晰地查看HSL三个分量的具体数值。
支持标准函数式语法（如 `lch(50 50 180)`）、逗号分隔数值（如 `50,50,180`）以及带标签的格式（如 `L:50 C:50 H:180`）。
提供四种格式：标准CSS函数 `hsl(0,100%,50%)`、带空格的CSS函数 `hsl(0, 100%, 50%)`、纯数值 `0,100,50` 以及带标签的 `H:0 S:100% L:50%`。
转换基于标准的色彩空间转换数学模型，能够确保颜色在感知上尽可能一致，结果精确可靠。
可以。您可以在输入框中每行输入一个LCH颜色值，工具会逐行进行转换并显示结果。
由于LCH是感知均匀的色彩空间，而HSL是基于设备的，转换旨在匹配视觉感知。在标准sRGB色域内，转换结果能高度还原LCH定义的颜色外观。
如何使用
输入LCH值，输出格式选择 `labeled`。
结果
获得带标签的结果 `H:120 S:60% L:50%`，可以清晰地看到色相为120度，饱和度为60%，亮度为50%。