PhotoRetrica

HSL 转 HEX

设置色相、饱和度和亮度,获得对应的六位 HEX 颜色代码,可直接复制。

文件始终保留在您的设备上完全免费
#FF3D77

hsl 输入

结果 · HEX

#FF3D77

RGB

rgb(255, 61, 119)

HSL

hsl(342, 100%, 62%)

HSV

hsv(342, 76%, 100%)

CMYK

cmyk(0%, 76%, 53%, 0%)

使用方法: HSL 转 HEX

  1. 1

    输入颜色

    输入颜色代码或使用取色器选择颜色,每个字段都接受其所显示的格式。

  2. 2

    查看转换结果

    结果会在您输入时即时更新,同时显示颜色的实时预览。

  3. 3

    复制代码

    一键复制所需的数值,并粘贴到您的设计、CSS 或印刷设置中。

为什么要把 HSL 转成 HEX

HSL 是构建色彩体系最直观的方式。先固定一个色相,比如紫色的 262°,然后主要通过改变亮度来生成一整套色阶:约 95% 用于背景,58% 用于按钮和强调色,30% 用于文字。设计师和开发者常用这种方法制作浅色、深色和深色主题。

然而,完成的色阶通常需要以 HEX 代码的形式交付:设计规范、设计令牌、Figma 组件库、品牌手册和许多内容管理系统都要求 #RRGGBB 值。输入 HSL 值并复制 HEX 结果——例如 hsl(262, 83%, 58%) 会变成 #7C3BED。工具还会显示同一颜色的 RGB、HSV 和 CMYK。由于 HEX 每个通道只能存储 256 个级别,HSL 的微小变化并不一定会改变 HEX 代码。

所有处理都在您的浏览器本地完成,您的图片绝不会上传到服务器。