TingYu Tools

HSL/HSV 转换

在 HEX、RGB、HSL、HSV 间转换,可应用 HSL/HSV 更新 RGB。

颜色输入

调整 HSL

调整 HSV

💡 使用说明

什么是 HSL/HSV?

HSL 和 HSV 是两种基于色相的颜色表示模型,比 RGB 更符合人类对颜色的感知方式。

HSL 模型

HSL(色相、饱和度、明度)通过三个参数描述颜色:色相(0-360°)表示颜色种类,饱和度(0-100%)表示颜色纯度,明度(0-100%)表示颜色亮度。

HSV 模型

HSV(色相、饱和度、明度)与 HSL 类似,但明度参数不同。V(Value)表示颜色的最大亮度值。

功能特点

  • 支持 HEX、RGB、HSL、HSV 互转
  • 可视化滑块调节
  • 实时颜色预览
  • 独立调整 HSL/HSV 参数
  • 一键复制各种格式

应用场景

  • 设计系统颜色调整
  • 颜色明度和饱和度微调
  • 颜色空间转换
  • 色相保持的颜色变体

使用技巧

  • 调整色相可快速切换颜色种类
  • 降低饱和度可得到灰度颜色
  • HSL 的明度 50% 是最鲜艳的颜色
  • HSV 更适合选择器实现

颜色预览

#3B82F6

格式值

HEX
#3B82F6
RGB
rgb(59, 130, 246)59, 130, 246
HSL
hsl(217, 91%, 60%)217, 91%, 60%
HSV
hsv(217, 76%, 96%)217, 76%, 96%

HSL vs HSV

HSL 明度 (L)
60%
HSV 明度 (V)
96%