HEX、RGB、HSL 实时互转，支持配色方案与 CSS 渐变色生成
HEX（十六进制）：网页开发最常用的颜色表示法，以 # 开头，后跟 6 位十六进制数（RRGGBB），例如 #2563EB。兼容所有浏览器，简洁高效。
RGB（红绿蓝）：通过红、绿、蓝三个通道的数值（0-255）定义颜色，例如 rgb(37, 99, 235)。直观易懂，适合图像处理与前端开发。
HSL（色相/饱和度/亮度）：以 hsl(217, 83%, 53%) 表示，H 为色相（0-360°），S 为饱和度（0-100%），L 为亮度（0-100%）。更符合人类直觉，调整色调时非常方便。
| 模式 | 格式 | 适用场景 |
|---|---|---|
| HEX | #RRGGBB | CSS 样式、设计稿标注 |
| RGB | rgb(r, g, b) | 图像处理、透明度叠加（rgba） |
| HSL | hsl(h, s%, l%) | 动态主题、亮度调整、配色生成 |
它们都以 HSL 的色相（Hue）为基准，在 0-360° 的色相环上按固定夹角取色：互补色是当前色相加 180°，类似色取减 30° 和加 30°，三角色间隔 120°，分裂互补取加 150° 和加 210°，四角色则每 90° 取一个。同一套 H 值下，饱和度（S）和亮度（L）保持不变，保证整体协调。换一种主色，所有方案会自动同步重算。
RGB 的三个通道相互耦合，想让颜色"变亮一点"得同时推算 R、G、B 三个值；而 HSL 把色相、饱和度、亮度拆成三个独立维度，想调亮只改 L 通道即可。所以需要连续微调亮度、做深浅变体、生成主题色时优先用 HSL；需要精确复现某个具体数值（如设计稿标注 rgb(37, 99, 235)）时用 RGB 或 HEX 更直接。三种格式数学上完全等价，可随时互转。
最少保留 2 个、最多 5 个色标，每个色标可单独设置颜色和位置（0-100%），角度支持 0-360° 任意旋转。调整后右侧会实时生成标准 CSS 代码，例如 background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%)，点"复制 CSS 代码"可直接粘进样式表。多色标渐变更适合做品牌横幅、按钮背景等场景。
这是对比度自适应：工具用亮度公式 L = R×0.299 + G×0.587 + B×0.114 计算当前颜色的感知亮度，当亮度大于 186 时使用深色文字，否则使用白色文字，保证任何背景色上的文字都清晰可读。这个阈值与 WCAG 的对比度思路一致，可以在选色时顺便预览该颜色作为背景的实际可读性，配色方案里的每个色块点击后也会执行同样的判断。
本工具的色板按钮打开的是浏览器原生取色器，具体能力取决于系统：Chrome 等桌面浏览器会弹出拾色对话框，多数支持屏幕吸色；手机端则只能从调色盘选。如果取不到想要的像素，建议先用截图工具或设计软件的吸管获取 HEX 值，再粘贴到本工具的 HEX 输入框，即可自动算出 RGB、HSL 和整套配色方案。不同屏幕的色域和亮度校准也可能让同一颜色观感有差异。