HEX 转 HSL 转换器 – CSS 颜色 | My-DevTools
用这个 HEX 转 HSL 转换器在输入时即时查看颜色的 HSL 值，或编辑任一侧，另一侧实时更新。它还接受 #abc、rgb(1 2 3 / 50%) 和命名颜色等宽松颜色输入。查看色板，复制可直接粘贴的 CSS 行，颜色超出 sRGB 时查看色域外警告。
HEX 转 HSL 是基于浏览器的颜色转换器，供需要在十六进制和 HSL 值之间切换的开发者使用。输入 HEX 颜色查看其 HSL 等值，或编辑任一侧，另一侧实时更新。工具还接受 #abc、rgb(1 2 3 / 50%) 和命名颜色等宽松输入，并显示色板、可直接粘贴的 CSS 行，以及颜色超出 sRGB 时的色域外警告。
转换用两种不同记法表示同一颜色。HEX 用十六进制分量表示颜色，HSL 用色相、饱和度和明度描述。实时双向编辑让您更改任一表示并在另一侧查看更新值。色板帮助您直观检查颜色，CSS 行可直接复制到代码中。
当项目、系统或文档要求一种格式而非另一种时，在 HEX 和 HSL 之间转换很有用。例如，您可以将十六进制值转为 HSL 用于接受 HSL 的工作流，或将 HSL 值与其十六进制对应值比较。工具还帮助您为文档、工单和代码评审准备颜色值。
HEX 转 HSL 完全在浏览器中运行：您的输入在您的设备上处理，不会上传、存储或发送到服务器。无需注册，页面加载后转换可离线工作。这方便想快速、私密地检查或转换颜色，而不依赖服务器连接的开发者和 DevOps 工程师。
步骤 1：在输入框中输入或粘贴颜色。十六进制是预期格式，解析也识别 #abc、rgb(1 2 3 / 50%) 和命名颜色等示例。
步骤 2：编辑 HEX 或 HSL 任一值。另一侧实时更新，让您在工作时比较两种表示。
步骤 3：查看色板直观检查颜色。若超出 sRGB，工具显示色域外警告。
步骤 4：当需要在代码中使用转换后的颜色时，复制可直接粘贴的 CSS 行。
步骤 5：按需调整可用选项，复制前检查显示的结果。
使用场景：将十六进制颜色转入只接受 HSL 的系统。实时转换为您提供可复制的值，无需自己计算。
使用场景：检查 HSL 值是否与得到的十六进制原值匹配。编辑任一侧都会更新另一侧，方便比较。
使用场景：为文档、工单或提交信息准备十六进制或 HSL 颜色片段。可直接粘贴的 CSS 行让数值在代码中可用。
使用场景：在将结果粘贴到样式表前做一次颜色转换的完整性检查。色板在颜色值之外提供视觉检查。
使用场景：在使用转换值前检查可能超出 sRGB 的颜色。色域外警告提醒注意该情况。
使用场景：处理以其他支持形式复制的颜色输入，如 rgb() 值或命名颜色。当输入不是十六进制写法时，宽松解析可以节省时间。