关键信息
- 分类
- Design
- 输入类型
- textarea, select
- 输出类型
- text
- 样本覆盖
- 3
- 支持 API
- Yes
概览
LCH转HSL转换器是一款专为设计师和开发者打造的在线工具，用于将CIE LCH（感知均匀）色彩空间中的颜色值，快速、准确地转换为适用于屏幕显示的HSL（色相、饱和度、亮度）格式。
适用场景
- •当您需要在CSS代码中使用从设计软件（如Figma、Photoshop）导出的LCH颜色值时。
- •当您需要将基于LCH色彩空间定义的设计系统或调色板，转换为前端开发可直接使用的HSL格式时。
- •当您需要批量验证或转换多个LCH颜色值，以确保其在不同屏幕上的显示效果时。
工作原理
- •在输入框中粘贴或输入您的LCH颜色值，支持多种格式，如 `lch(50,50,180)`、`50,50,180` 或 `L:50 C:50 H:180`。
- •从下拉菜单中选择您需要的HSL输出格式，例如标准的 `hsl(0,100%,50%)` 或简洁的数值 `0,100,50`。
- •工具将自动执行色彩空间转换算法，计算并显示对应的HSL结果，您可以直接复制使用。
使用场景
网页设计：将设计稿中使用的LCH主题色转换为CSS变量，用于网站样式开发。
UI/UX设计：在构建跨平台设计系统时，统一将颜色定义从LCH转换为各平台（Web、iOS、Android）通用的HSL格式。
前端开发：快速获取颜色值，用于设置元素的背景色、文字颜色或阴影效果。
用户案例
1. 将品牌主色用于网页
网页设计师- 背景原因
- 设计师在Figma中使用LCH定义了品牌的主色调 `lch(65, 85, 250)`，现在需要将其应用到网站的CSS中。
- 解决问题
- 需要将LCH值转换为CSS可识别的HSL格式。
- 如何使用
- 在工具输入框中输入 `lch(65, 85, 250)`，输出格式选择 `hsl(0,100%,50%)`。
- 效果
- 获得转换后的HSL值 `hsl(250, 85%, 65%)`，可直接复制到CSS代码中使用。
2. 批量转换设计系统色板
- 背景原因
- 一个设计系统维护者需要将定义在LCH色彩空间中的一组基础色板（包含10个颜色）提供给前端团队。
- 解决问题
- 手动逐个转换效率低下且容易出错。
- 如何使用
- 将所有LCH颜色值（每行一个）粘贴到输入框，输出格式选择 `values` 以获得最简洁的数值列表。
- 效果
- 一次性获得所有颜色的HSL数值列表（如 `250,85,65`），便于前端团队批量导入和使用。
3. 验证颜色转换准确性
- 背景原因
- 开发者收到一个LCH颜色值 `lch(50, 60, 120)`，想直观地了解其对应的色相、饱和度和亮度具体数值。
- 解决问题
- 需要清晰地查看HSL三个分量的具体数值。
- 如何使用
- 输入LCH值，输出格式选择 `labeled`。
- 效果
- 获得带标签的结果 `H:120 S:60% L:50%`，可以清晰地看到色相为120度，饱和度为60%，亮度为50%。
用 Samples 测试
design相关专题
常见问题
支持哪些LCH输入格式？
支持标准函数式语法（如 `lch(50 50 180)`）、逗号分隔数值（如 `50,50,180`）以及带标签的格式（如 `L:50 C:50 H:180`）。
有哪些HSL输出格式可选？
提供四种格式：标准CSS函数 `hsl(0,100%,50%)`、带空格的CSS函数 `hsl(0, 100%, 50%)`、纯数值 `0,100,50` 以及带标签的 `H:0 S:100% L:50%`。
转换的精度如何？
转换基于标准的色彩空间转换数学模型，能够确保颜色在感知上尽可能一致，结果精确可靠。
可以一次转换多个颜色吗？
可以。您可以在输入框中每行输入一个LCH颜色值，工具会逐行进行转换并显示结果。
转换后的HSL颜色在屏幕上显示会和LCH定义的颜色完全一致吗？
由于LCH是感知均匀的色彩空间，而HSL是基于设备的，转换旨在匹配视觉感知。在标准sRGB色域内，转换结果能高度还原LCH定义的颜色外观。