Elysia Tools
导航
Design
将HSL颜色值转换为HEX用于屏幕显示
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
HSL转HEX转换器是一个在线工具，用于将HSL（色相、饱和度、亮度）颜色值快速转换为适用于屏幕显示的HEX（十六进制）格式。它支持多种输入和输出格式，是网页设计、前端开发和数字艺术创作的实用助手。
背景
设计师在Figma中定义了一个品牌主色，其HSL值为hsl(210, 70%, 50%)，需要提供给开发人员用于网页按钮。
问题
开发环境需要HEX格式的颜色值，而设计稿提供的是HSL格式。
如何使用
在HSL输入框中输入 `hsl(210, 70%, 50%)`，输出格式选择默认的“#FF0000 / #FF000080”。
结果
工具立即输出转换结果 `#2680C2`，开发人员可直接复制此值用于CSS代码。
背景
公司的设计系统文档以HSL格式列出了10个基础色板，工程师需要将它们全部转换为小写、不带#号的HEX格式，以便在JavaScript配置文件中使用。
问题
手动逐个转换效率低下且容易出错。
如何使用
将10个HSL值（每行一个）粘贴到输入框中，例如： hsl(0, 80%, 60%) hsl(30, 90%, 50%) ... 然后在输出格式中选择“FF0000 / FF000080 (no hash)”和“#ff0000 / #ff000080 (lowercase)”。
结果
工具一次性输出10行对应的HEX代码（如`ff4d4d`、`ff8c1a`），工程师可直接复制到配置文件中。
支持标准CSS格式（如hsl(0,100%,50%)）、逗号分隔值（0,100,50）、以及带标签的格式（H:0 S:100% L:50%），并可选包含透明度（Alpha）通道。
如果输入的HSL值包含Alpha通道（透明度），转换后的HEX码将是8位格式（如#FF000080），后两位代表透明度。
可以。您可以在输入框中每行输入一个HSL值，工具会逐行转换并输出对应的HEX结果。
此选项会尝试将HEX码缩写为3位或4位格式（如#F00），但仅当颜色值允许时（即每两位字符相同）才会生效，否则仍输出完整6位或8位格式。
转换基于标准的颜色空间计算公式，将HSL的浮点数值精确映射到0-255的RGB整数范围，再转换为HEX，确保颜色准确还原。