关键信息
- 分类
- Design
- 输入类型
- textarea, select, color
- 输出类型
- text
- 样本覆盖
- 3
- 支持 API
- Yes
概览
HSL转LCH转换器是一款专业的色彩空间转换工具，能够将HSL（色相、饱和度、亮度）颜色值精确转换为LCH（亮度、色度、色相）颜色值。它支持多种HSL输入格式，并能妥善处理包含透明度的Alpha通道，适用于需要进行精确色彩管理和跨媒体色彩校准的专业场景。
适用场景
- •当您需要将设计稿或CSS中的HSL颜色转换为更符合人眼感知、便于进行色彩调整的LCH色彩空间时。
- •当处理带有透明度（Alpha通道）的颜色，并需要将其与特定背景色合成以获得准确的不透明LCH值时。
- •当您需要在不同色彩空间（如HSL与LCH）之间进行转换，以用于印刷、屏幕显示或色彩科学研究时。
工作原理
- •在输入框中粘贴或输入HSL颜色值，支持 `hsl()`、`hsla()`、纯数值或带标签等多种格式，每行一个。
- •选择所需的LCH输出格式，例如标准的 `lch()` 函数、CSS格式、纯数值或带标签的格式。
- •根据需要配置Alpha通道的处理方式，选择与白色、黑色或自定义背景色合成，或直接忽略透明度。
- •点击转换，工具将立即计算并输出对应的LCH颜色值。
使用场景
设计师在进行品牌视觉设计时，将定义好的HSL主题色转换为LCH，以便更直观地调整颜色的亮度和色度，确保跨媒介色彩一致性。
前端开发者在处理CSS颜色时，将HSLA格式的颜色转换为LCH，以利用LCH色彩空间在渐变和色彩调整上的优势。
印刷或影像专业人员将屏幕设计的HSL颜色转换为LCH，用于更精确地匹配印刷色域或进行专业的色彩校正。
用户案例
1. 转换品牌主色
UI设计师- 背景原因
- 设计师定义了一套基于HSL的品牌色板，但需要为印刷物料提供LCH值以确保色彩准确。
- 解决问题
- 需要将品牌主色 `hsl(210, 80%, 50%)` 转换为LCH值，并输出为便于记录的格式。
- 如何使用
- 在输入框中输入 `hsl(210, 80%, 50%)`，输出格式选择“L:50 C:50 H:180°”这种带标签的格式。
- 效果
- 获得清晰标注的LCH值 `L:55 C:45 H:265°`，可直接用于印刷色彩规范文档。
2. 处理带透明度的按钮颜色
前端开发者- 背景原因
- 开发中使用了一个半透明的按钮背景色 `hsla(160, 70%, 45%, 0.7)`，需要知道其叠加在白色页面背景上的实际LCH值，用于无障碍对比度检查。
- 解决问题
- 需要计算半透明颜色在白色背景上的最终不透明色值，并转换为LCH。
- 如何使用
- 输入 `hsla(160, 70%, 45%, 0.7)`，在“Alpha通道处理”中选择“与白色背景合成（推荐）”，输出格式选择“lch(50,50,180)”。
- 效果
- 得到合成后的LCH值 `lch(65 55 165)`，可用于精确计算文本与背景的对比度。
用 Samples 测试
design相关专题
常见问题
这个工具支持哪些HSL输入格式？
支持多种常见格式，包括：`hsl(0,100%,50%)`、`hsla(0,100%,50%,0.5)`、纯数值 `0,100,50` 或 `0,100,50,0.5`，以及带标签的格式如 `H:0 S:100% L:50%`。
Alpha通道处理中的“与白色背景合成”是什么意思？
这是指将带有透明度的颜色叠加在白色背景上，计算出最终的不透明颜色值，再进行HSL到LCH的转换。这是模拟颜色在白色背景上显示效果的推荐方式。
转换后的LCH值可以用于CSS吗？
可以。您可以选择“lch(50 50 180)”这种CSS语法格式的输出，直接用于现代CSS的 `color` 属性中。
转换的精度如何？
转换基于标准的色彩空间转换算法，能够保证色彩信息在HSL和LCH之间准确映射，满足专业设计需求。
可以批量转换多个颜色吗？
可以。您只需在输入框中每行输入一个HSL颜色值，工具会逐行进行转换并输出对应的LCH结果。