十六进制转HSL颜色转换工具

请输入十六进制颜色值,如: #42b983 或 42b983 (支持3位或6位十六进制)

转换结果

颜色预览

点击复制按钮将HSL颜色值复制到剪贴板

工具简介

十六进制转HSL颜色转换工具是一个简单实用的在线工具,可以帮助您快速将十六进制颜色值转换为HSL格式。

无论您是前端开发者、UI/UX设计师还是网页设计师,这个工具都能帮助您更高效地进行颜色转换工作,特别是在网页开发、UI设计时。

主要功能

  • 支持十六进制颜色输入
  • 实时颜色预览
  • 一键复制HSL结果
  • 响应式设计,适配各种设备
  • 支持3位和6位十六进制格式

使用教程

  1. 在"十六进制颜色输入"框中输入十六进制颜色值,如: #42b983 或 42b983 (支持3位简写如: #f00)
  2. 点击"转换"按钮或直接按回车键进行转换
  3. 查看转换结果和颜色预览
  4. 点击"复制"按钮将HSL颜色值复制到剪贴板

注意事项

  • 十六进制值可以是3位(如#f00)或6位(如#ff0000),支持带#或不带#
  • HSL结果以标准格式显示,如: HSL(153, 47%, 49%)
  • 转换后可以实时预览颜色效果

颜色知识

十六进制颜色表示

十六进制颜色表示法是一种在网页设计和开发中广泛使用的颜色表示方法,通过6位十六进制数字表示颜色,前两位表示红色,中间两位表示绿色,最后两位表示蓝色。

例如:#FF0000 表示红色,#00FF00 表示绿色,#0000FF 表示蓝色。也可以使用3位简写,如 #F00 等同于 #FF0000。

HSL颜色模式

HSL颜色模式是一种更直观的颜色表示方式,通过色相(Hue)、饱和度(Saturation)和明度(Lightness)三个维度来定义颜色。

色相(H)表示颜色的类型,取值范围为0-360度(0和360表示红色,120表示绿色,240表示蓝色)。

饱和度(S)表示颜色的纯度,取值范围为0%-100%(0%表示灰色,100%表示完全饱和的颜色)。

明度(L)表示颜色的亮度,取值范围为0%-100%(0%表示黑色,100%表示白色,50%表示标准颜色)。

转换示例

红色: #FF0000 → HSL(0, 100%, 50%)
绿色: #00FF00 → HSL(120, 100%, 50%)
蓝色: #0000FF → HSL(240, 100%, 50%)
黄色: #FFFF00 → HSL(60, 100%, 50%)
紫色: #800080 → HSL(300, 100%, 25%)
白色: #FFFFFF → HSL(0, 0%, 100%)
黑色: #000000 → HSL(0, 0%, 0%)

推荐工具

快速获取颜色RGB、HEX或HSL值