1. CSS 现代色彩系统迁移
前端开发工程师背景
项目组决定将旧版 CSS 颜色定义迁移至支持更广色域的 LCH 格式。
问题
现有的设计规范文档中仅提供了 LAB 数值,无法直接写入 CSS。
如何使用
输入 LAB 数值,选择输出格式为 'css',直接复制生成的代码。
输入: lab(50, 40, 20)
输出格式: css结果
获得符合 CSS 标准的 lch(50 44.72 26.57) 代码,成功应用到样式表中。
Elysia Tools
导航
Design
将LAB颜色值转换为LCH以便更好地操作颜色
执行
填写表单、运行工具,并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
LAB转LCH转换器是一款专业的色彩空间转换工具,旨在帮助设计师和开发者将 CIELAB 颜色值精确转换为 CIELCH 格式,从而更直观地通过亮度、色度和色调参数来调整和管理颜色。
背景
项目组决定将旧版 CSS 颜色定义迁移至支持更广色域的 LCH 格式。
问题
现有的设计规范文档中仅提供了 LAB 数值,无法直接写入 CSS。
如何使用
输入 LAB 数值,选择输出格式为 'css',直接复制生成的代码。
输入: lab(50, 40, 20)
输出格式: css结果
获得符合 CSS 标准的 lch(50 44.72 26.57) 代码,成功应用到样式表中。
背景
设计师需要为品牌色创建一个同色系的辅助色板。
问题
在 LAB 空间下难以直观地保持亮度不变仅改变色相。
如何使用
将基准色转换为 LCH,通过手动微调 H(色调)值,再转换回所需格式。
输入: 70, 30, 10
输出格式: labeled结果
通过 LCH 格式清晰识别出亮度为 70,从而在保持视觉权重一致的前提下,轻松调整色调。
LAB 使用直角坐标系,而 LCH 使用极坐标系。LCH 将颜色分解为亮度 (L)、色度 (C) 和色调 (H),这使得调整颜色的饱和度和色相变得更加直观。
支持多种格式,包括标准的 lab() 函数语法、逗号分隔的数值(如 50,0,0)以及带有 L、A、B 标签的文本格式。
可以。您可以选择“css”输出格式,直接获取符合 CSS 规范的 lch() 语法代码。
该工具基于标准的色彩空间转换算法,在计算过程中保持高精度,确保转换后的颜色在视觉上与原 LAB 值保持一致。
是的,您可以每行输入一个 LAB 值,工具将一次性处理并输出所有对应的 LCH 数值。