HSL 代表色相（Hue）、饱和度（Saturation）和亮度（Lightness），是一种更符合人类直觉的色彩描述方式。
• 色相（H）：0°-360°，对应颜色在色相环上的位置（0°红、120°绿、240°蓝等）
• 饱和度（S）：0%-100%，颜色的纯度，0%为灰色，100%为最鲜艳
• 亮度（L）：0%-100%，0%为纯黑，100%为纯白，50%为最纯的颜色

相比RGB用红绿蓝三通道描述颜色，HSL更便于设计师直观调整颜色——"想让颜色更鲜艳？提高饱和度。想让颜色更亮？提高亮度。"这种思维方式更自然。

单色调色板是指在同一色相下，通过改变饱和度和亮度来生成的一组颜色。它包含从浅到深的一系列色调，形成统一和谐的配色方案。

单色调色板的优势在于：天然和谐——因为所有颜色共享同一色相，无论如何搭配都不会产生冲突。这种配色方案广泛应用于UI设计、品牌设计、数据可视化和网页设计，营造简洁、专业、统一的视觉感受。

• UI界面设计：按钮的不同状态（常态、hover、active、disabled）非常适合用单色调色板表现
• 数据可视化：热力图、渐变图表中，同一色相的不同深度能清晰表达数据密度
• 品牌视觉：许多知名品牌使用单色系建立统一视觉识别（如Twitter蓝、Spotify绿）
• 背景与卡片：页面背景、卡片底色、边框等使用单色系能保持整体协调
• 文字层级：标题、正文、辅助文字使用同色相不同亮度，层次分明

选择色相时，可以从以下几个角度考虑：
• 品牌色：如果您已有品牌色，直接使用其色相值生成配套的单色调色板
• 情感传达：蓝色传递信任与专业（适合企业级产品），绿色传递自然与健康，红色传递激情与紧迫感
• 行业习惯：金融常用深蓝，环保常用绿色，科技常用蓝紫
• 对比度需求：深色相（如深蓝、深紫）的单色调色板在浅色背景下对比度更好
建议使用本工具快速预览不同色相的效果，找到最合适的色调。

饱和度决定了颜色的"鲜艳程度"：
• 高饱和度（70%-100%）：颜色鲜明、有活力，适合需要吸引注意力的场景
• 中等饱和度（30%-70%）：颜色柔和、舒适，适合大面积使用和长时间阅读
• 低饱和度（0%-30%）：接近灰色调，低调优雅，适合背景和辅助元素

亮度决定了颜色的"明暗程度"：
• 高亮度（70%-95%）：浅色、轻盈，适合背景、卡片底色
• 中等亮度（35%-65%）：颜色最纯正饱满，适合主要元素
• 低亮度（5%-30%）：深色、沉稳，适合文字、强调元素和深色模式

通过调整饱和度，您可以控制整个调色板的"情绪强度"——高饱和活泼，低饱和沉稳。

本工具提供多种导出方式：
• 点击单个色块：复制该颜色的HEX值（如 #3B7DD8）
• 复制全部HEX：将所有颜色以逗号分隔的HEX列表复制，可直接粘贴到设计工具中
• 复制CSS变量：生成CSS自定义属性代码，直接粘贴到样式表中使用

在CSS中使用CSS变量示例：
background: var(--mono-1); /* 最浅色 */
color: var(--mono-10); /* 最深色 */

也支持导入Figma、Sketch等设计工具，只需粘贴HEX值即可。

在HSL色彩模型中，0°和360°都代表红色，它们是完全相同的颜色。色相环是一个闭合的圆圈——从红色(0°)出发，依次经过橙色(30°)、黄色(60°)、绿色(120°)、青色(180°)、蓝色(240°)、紫色(270°)、品红(300°)，最终回到红色(360°)。

这种循环特性意味着：色相值359°和1°的颜色非常接近（都是接近红色的颜色），而180°（青色）则是红色的互补色。理解这一点有助于在色相环上快速定位想要的颜色。

• 单色调色板：同一色相，不同饱和度/亮度。最和谐、最安全，但可能缺乏对比
• 邻近色配色：色相环上相邻的2-3个色相（如蓝、蓝绿、绿）。和谐中带有微妙变化
• 互补色配色：色相环上相对的2个色相（如蓝与橙）。对比强烈，富有冲击力
• 三角色配色：色相环上均匀分布的3个色相（间隔120°）。丰富而平衡

单色调色板是最安全、最容易上手的配色方案，特别适合需要统一感和专业感的设计场景。掌握单色配色是学习色彩理论的第一步。