颜色选择器
在线颜色选择工具，HEX、RGB、HSL 格式互转，生成配色方案
什么是颜色选择器？
颜色选择器用于选择、查看和转换设计与前端开发中的颜色。同一个颜色可以用多种格式表示：HEX 写法紧凑，常用于 CSS；RGB 描述红、绿、蓝三个通道；HSL 用色相、饱和度和亮度表达，更适合做明暗、饱和度和配色调整。这个工具适合把品牌色转换成代码、比较不同颜色模型、围绕一个主色生成小型配色，或检查互补色、邻近色等相关色板。颜色选择不只是好不好看，还关系到对比度、可读性、无障碍、印刷效果和屏幕校准。重要界面颜色应放到最终背景上测试，并检查是否满足可访问性要求。
使用方法
使用方法
- 点击颜色选择器选取颜色，或在输入框中输入颜色值
- 查看 HEX、RGB 和 HSL 格式的转换结果
- 点击对应格式旁的复制按钮即可复制颜色值
- 参考配色方案获取互补色、类似色等搭配建议
- 查看同色系的深浅变体
颜色提示
- 在将颜色用于文字、图标或控件前请检查对比度，视觉上美观的颜色可能无法满足无障碍要求。
- 调整明度或饱和度时使用 HSL，复制到 CSS 或设计规范时使用 HEX 或 RGB。
使用场景
技术原理
本工具中所有值均使用 IEC 61966-2-1 定义的 sRGB 色彩空间，这也是 CSS 十六进制字面量、rgb() 函数和任何 <canvas> 读回的默认色彩空间。HEX #RRGGBB 是一个紧凑的 24 位整数（每通道 8 位，0-255）；HEX #RRGGBBAA 增加了一个 alpha 字节；rgb()/rgba() 以整数或百分比形式呈现相同的通道；hsl()/hsla() 切换为柱坐标系，色相以角度表示 [0, 360)，饱和度和亮度为 [0%, 100%]。RGB 转 HSL 的公式为 L = (max + min) / 2，S = (max - min) / (1 - |2L - 1|)（非零色度时），H 由一个基于最大通道的六段分段公式确定。HSL 转 RGB 的逆向过程使用标准的 t = L < 0.5 ? L(1+S) : L+S-LS 算法，然后将每个通道缩放回 0-255。 实时取色器使用原生 <input type="color"> 元素，在支持的浏览器上还可调用 EyeDropper API（Chrome 95+、Edge 95+；截至 2026 年 Safari/Firefox 尚不支持）。EyeDropper 触发操作系统级的屏幕采样并返回 sRGB 十六进制字符串，但无法在跨域 iframe 或受 DRM 保护的表面上采样。配色方案生成通过旋转 HSL 色相实现：互补色为 +180°，三等分色为 ±120°，类似色为 ±30°，分裂互补色为 +150° 和 +210°。浅色调和深色调在保持色相和饱和度不变的情况下，以固定增量调整亮度（通常浅色调向白色方向 +10%，深色调向黑色方向 -10%）。 对比度遵循 WCAG 2.1 SC 1.4.3/1.4.6：每个通道通过分段 sRGB 传递函数进行 gamma 解码（0.03928 以下为线性段，以上为 2.4 次幂），然后使用亮度权重 0.2126R + 0.7152G + 0.0722B 计算相对亮度，比率公式为 (L_较亮 + 0.05) / (L_较暗 + 0.05)。阈值为：AA 级普通文本 4.5:1，AA 级大文本和 UI 组件 3:1，AAA 级 7:1。需要注意的是，sRGB 是每通道 8 位的色彩空间，因此使用 Display P3（Apple）或 Rec. 2020 的广色域显示器可能会以明显更高的饱和度渲染相同的十六进制代码；对于跨设备的色彩关键工作，应为颜色标注配置文件而非依赖原始 RGB 三元组。
- 基于 IEC 61966-2-1 的 sRGB 色彩空间；每通道 8 位，共可表示 16,777,216 种颜色。
- HSL 转 RGB 使用 t = L<0.5 ? L(1+S) : L+S-LS，然后按通道进行 hue2rgb() 查找。
- EyeDropper API 需要 Chrome/Edge 95+ 和用户手势；跨域 iframe 表面会被阻止。
- WCAG 对比度：对 sRGB 进行 gamma 解码，按 0.2126R + 0.7152G + 0.0722B 加权亮度，然后计算 (L1+0.05)/(L2+0.05)。
- 互补色 = 色相 +180°，三等分色 = ±120°，类似色 = ±30°，分裂互补色 = +150°/+210°。
- canvas.getImageData 返回 Uint8ClampedArray RGBA 像素，但要求画布为同源（不能使用受污染的图像）。
- Display P3 / Rec. 2020 广色域显示器渲染相同十六进制值时原色更饱和——色彩关键工作请标注配置文件。
示例
选取品牌主色，并以三种格式复制
已选： Tailwind blue-600
HEX: #2563eb
RGB: rgb(37, 99, 235)
HSL: hsl(217, 91%, 53%)
按你周围代码的写法挑一种格式复制。三个值表示的是
同一个 sRGB 颜色（IEC 61966-2-1，每通道 8 位），
页面通过标准的 RGB <-> HSL 公式在三者之间转换。生成互补配色方案
基色： #2563eb（蓝）
互补色： #eb7a25（橙） 色相 +180 度
类似色 1： #5a25eb（紫） 色相 +60 度
类似色 2： #256beb（天蓝） 色相 -30 度
三等分 1： #25eb56（绿） 色相 +120 度
三等分 2： #eb2525（红） 色相 -120 度
互补色适合做高对比的强调色，类似色适合做协调的背景，
三等分色适合用在色彩鲜明的插画里。明度和饱和度保持
不变，只旋转色相。上线前检查 WCAG 对比度
前景：#1f2937（gray-800，相对亮度 0.022）
背景：#ffffff（白色， 相对亮度 1.000）
对比度：(1.000 + 0.05) / (0.022 + 0.05) = 14.5:1
通过 WCAG AAA 对正文（>= 7:1）和大字号（>= 4.5:1）的要求，
也满足 UI 组件 3:1 的阈值。每一组将上线的文字/背景配色
都建议跑一遍这个检查；页面采用分段式 sRGB 传输函数计算
相对亮度（先做 gamma 解码，再按 0.2126R + 0.7152G + 0.0722B
加权求和）。常见问题
支持哪些颜色格式？
支持 HEX (#RRGGBB)、RGB (rgb(R, G, B)) 和 HSL (hsl(H, S%, L%))。页面还会基于所选颜色展示互补色、相邻色、三角色、分裂互补色配色方案，以及亮调（tints）和暗调（shades）。
HSL 和 HSV 有什么区别？
两者都把颜色分解为色相（0-360°）、饱和度和一个类似亮度的分量。HSL 的第三维是 lightness（50% 时饱和度最高，0% 是黑色，100% 是白色）。HSV 的第三维是 value（100% 时饱和度最高，0% 是黑色，没有白色）。HSL 在调亮调暗上更直观；HSV 更接近画家调色的方式。
颜色转换的精度如何？
HEX、RGB、HSL 之间是精确的数学转换——它们描述的是同一个 sRGB 颜色。页面使用标准公式在三者之间互转，没有精度损失。
同一个十六进制颜色在所有屏幕上看起来都一样吗？
不一定。sRGB 是 Web 默认的颜色空间；广色域显示器（P3、Adobe RGB）若没有色彩管理，可能把同样的 hex 渲染得更鲜艳。屏幕校准也会带来差异。涉及关键颜色（特别是品牌色）时，请在目标设备上实际验证。
配色方案是怎么生成的？
通过在 HSL 中保持饱和度和亮度不变、仅旋转色相来生成。互补色为 +180°，三角色为 +120° / +240°，相邻色为 ±30°，分裂互补色为 +150° / +210°。亮调（Tints）将亮度逐步推向 100%（白色），暗调（Shades）则推向 0%（黑色）。
这个取色器只适用于屏幕颜色吗？
它工作在 sRGB 颜色空间下，对应 Web 和大多数消费级显示器的颜色模型。其转换基于标准公式，在 CSS 和 UI 设计场景下经过了充分验证。
有任何数据会被上传吗？
不会。页面是纯浏览器端 JavaScript，颜色值不会被保存或传输。