HSL/HSV转HEX工具 - 色彩空间快速换算

HSL色彩空间

HSL代表色相（Hue）、饱和度（Saturation）和亮度（Lightness），是一种更符合人类感知的颜色模型。色相H用角度表示（0度到360度），0度为红色，120度为绿色，240度为蓝色。饱和度S表示颜色的纯度，0%为灰色，100%为最鲜艳。亮度L表示明暗程度，0%为黑色，100%为白色，50%为正常亮度。HSL比RGB更直观，特别适合需要系统性调整颜色的场景。

HSV/HSB色彩空间

HSV代表色相（Hue）、饱和度（Saturation）和明度（Value），也称为HSB（Brightness）。与HSL类似，H是色相角。但V明度表示颜色的最大分量值，0%为黑色，100%为最亮状态。HSV更接近画家调色的思维：从纯色开始，添加白色降低饱和度，添加黑色降低明度。Photoshop等设计软件通常使用HSB模式。

HEX十六进制颜色码

HEX颜色码以#开头，后接6位十六进制数字（0-9, A-F），每两位分别代表红、绿、蓝通道的强度（0-255）。例如#FF0000表示纯红色。也支持3位简写（如#F00等同于#FF0000）。HEX是Web开发中最常用的颜色格式，CSS原生支持。字母不区分大小写。

RGB色彩模型

RGB代表红（Red）、绿（Green）、蓝（Blue），是基于加色混合原理的色彩模型。每个通道的值范围为0-255，通过不同强度的混合产生各种颜色。RGB是计算机显示器的原生色彩模型，但对人类来说不够直观。RGB与HEX可以互相转换，每两位十六进制数对应一个RGB通道。

色相（Hue）

色相是颜色的基本属性，表示颜色在色相环上的位置，用角度（0度到360度）表示。0度和360度为红色，120度为绿色，240度为蓝色。色相是区分不同颜色的主要依据，如红、橙、黄、绿、蓝、紫等。在HSL和HSV中，色相的定义完全一致。

饱和度（Saturation）

饱和度表示颜色的纯度或鲜艳程度。在HSL和HSV中，饱和度的定义略有不同：HSL的饱和度0%为完全不饱和（灰色），100%为最鲜艳；HSV的饱和度0%为灰色，100%为纯色（在最大明度下最鲜艳）。降低饱和度会使颜色趋向灰色，增加饱和度会使颜色更加鲜艳。

亮度/明度（Lightness/Value）

亮度（HSL中的L）和明度（HSV中的V）都表示颜色的明暗程度，但定义不同。HSL的L：0%为黑色，50%为正常亮度，100%为白色。HSV的V：0%为黑色，100%为最亮状态。主要区别在于：HSL中L=50%时颜色最鲜艳，而HSV中S=100%且V=100%时颜色最鲜艳。

色相环

色相环是将色相组织成环状的可视化表示，展示颜色之间的关系。标准色相环包含12个基本色相，每30度一个。色相环上的相对位置（180度）为互补色，相邻位置（约30度）为类似色。理解色相环有助于创建和谐的配色方案。

色彩空间转换

色彩空间转换是将颜色从一种表示格式转换为另一种的过程。由于不同色彩空间使用不同的数学模型描述颜色，转换需要特定的公式。例如，HSL到HEX的转换需要先计算RGB，再转换为十六进制。转换过程中应尽量保持颜色的视觉一致性。

互补色

互补色是色相环上相对位置（相差180度）的两种颜色，如红色和青色、蓝色和黄色。互补色组合能产生强烈的视觉对比，常用于需要突出重点的设计。在HSL中，将色相增加或减少180度即可得到互补色。

类似色

类似色是色相环上相邻位置（通常相差30度以内）的颜色，如蓝色、蓝绿色和绿色。类似色组合能产生和谐、统一的视觉效果，常用于需要营造平静氛围的设计。在HSL中，固定饱和度和亮度，只微调色相即可生成类似色系列。

CSS颜色函数

CSS支持多种颜色函数格式，包括rgb()、hsl()等。例如：color: rgb(74, 144, 217) 或 color: hsl(210, 55%, 57%)。这些函数可以直接在CSS中使用，提供比HEX更灵活的颜色定义方式。现代浏览器还支持带透明度的格式，如hsla()和rgba()。