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
输入颜色
输入颜色代码或使用取色器选择颜色,每个字段都接受其所显示的格式。
- 2
查看转换结果
结果会在您输入时即时更新,同时显示颜色的实时预览。
- 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 代码。
所有处理都在您的浏览器本地完成,您的图片绝不会上传到服务器。