为什么每个配色方案在生成色旁边还多显示一个色块？

每个方案都会先渲染基础色，再接上和谐色。互补色方案显示基础色加一个对角色，类似色方案显示基础色加两个邻色，三角色方案显示基础色加相隔 120 度和 240 度的两个颜色。

每种配色方案用的色相偏移是多少？

互补色加 180 度，类似色用减 30 度和加 30 度，三角色加 120 度和 240 度。饱和度和明度都从基础色原样复制，所以只有色相在移动。

可以粘贴 #f00 这样的三位 HEX 代码吗？

可以。输入接受三位和六位 HEX 值，并自动展开简写，所以 #f00 会变成 #ff0000。格式错误的输入会被直接忽略，而不会被强行转换。

为什么颜色转成 HSL 再转回来最后一位会变？

HSL 以色相整数度和百分比整数存储，会损失一点精度。#3b82f6 变成 hsl(217, 91%, 60%)，再转回来得到 #3c83f6，红绿两个通道各高了一格。

取色器处理透明度或 alpha 值吗？

不处理。它只在不透明的 HEX、RGB 和 HSL 中工作，没有 alpha 通道，所以半透明的 CSS 需要在别处用 rgba() 或 hsla() 设置。

怎么把颜色复制出工具？

HEX、RGB、HSL 三个面板各有自己的复制按钮。调色板色块也可以点击：点一下就把该色块的 HEX 复制到剪贴板，并短暂改变标签以示确认。

颜色选择器 & 转换器

这个取色器把三件事放在一处：让你可视化地挑选颜色，同时把同一种颜色显示为 HEX、RGB 和 HSL，并据此推导出三种经典配色。它面向写 CSS 的人、核对品牌色值的人，以及想在不靠猜的情况下把设计稿里的某个色号搬进代码的人。

使用方法

点击大色块并在浏览器原生取色器中拖动，或直接在 HEX 框中输入色码。
用 RGB 字段（每通道 0–255）或 HSL 字段（色相 0–360，饱和度和明度 0–100）微调。
观察预览条和三种读数同步更新，再用右侧的配色面板探索相关颜色。
点击复制按钮或调色板色块，把精确值放进剪贴板。

三种格式，同一种颜色

HEX 和 RGB 编码的是同样的三个数字。#3b82f6 拆成 3b 红、82 绿、f6 蓝，每个都是从 00 到 ff 的十六进制字节，也就是十进制的 59、130、246。这就是为什么 rgb(59, 130, 246) 和 #3b82f6 完全相同，也是工具能在两者之间无损转换的原因。

HSL 则用人们能推理的方式重新描述同一种颜色。色相是色轮上的角度，从 0 度的红，经 120 度的绿，到 240 度的蓝。饱和度表示颜色离灰色有多远。明度从 0% 的黑，经 50% 的纯色，到 100% 的白。要构造悬停状态，就保持色相和饱和度不变、只移动明度；背后的算术交给工具处理。

CSS 里该用哪种格式？

对于固定的品牌色和 UI 颜色，HEX 是默认选择：紧凑、普遍支持、在任何地方读起来都一样。当值来自设计工具或你需要 alpha 时，RGB 更方便，因为 rgba() 直接扩展了它。当颜色是生成或主题化的、而非固定的时候，HSL 才有用武之地。因为色相、饱和度、明度是彼此独立的数字，你可以让品牌色相保持不变、只改变明度做悬停态，或降低饱和度做禁用控件，不必手动重算任何东西。CSS 自定义属性让这套做法尤其干净：把三个 HSL 分量分开存储，再用 hsl(var(--h) var(--s) var(--l)) 组合回去。这个取色器把三种格式都给你，方便你粘贴进手头正在写的代码。

本工具的配色规则

每种配色都保留基础色的饱和度和明度，只旋转色相：

配色方案	色相变化	显示色块数
互补色	+180	基础色加 1
类似色	-30、+30	基础色加 2
三角色	+120、+240	基础色加 2

互补色对能提供强烈的图底对比，类似色组用于背景和细微点缀很安全，三角色方案则给出三个彼此不同却均衡的颜色。它们都只是起点：请对结果做无障碍检查，别只相信色轮。

如何解读这些配色

互补色在色轮上相对，产生最强烈的对比，适合在中性背景上做行动号召，但大面积正文配它过于刺眼。类似色落在 60 度以内，感觉统一，适合背景、插画和克制的状态变化。三角色均匀分布，给出均衡的三色方案：一种作主色，一种作次要色，第三种少量用作点缀。这些规则都不保证可读性。两个颜色可能在配色上完美，却依然通不过对比度检查，尤其当它们的明度接近时，所以任何文字与背景的组合上线前都要验证。

实操示例：#3B82F6

从默认的蓝色出发：

RGB：rgb(59, 130, 246)
HSL：hsl(217, 91%, 60%)
互补色：#f6af3c，与蓝色相对的暖琥珀色
类似色：#3ce0f6 和 #523cf6，两侧的青与靛
三角色：#f63c83 和 #83f63c，相隔 120 度的粉与绿

这些色块每一个都能直接复制。注意互补的琥珀色在观感上明暗不同，尽管 HSL 明度保持不变，因为人眼并不把每种色相感知为同等明亮。

精度注意事项

由于 HSL 以色相整数度、饱和度与明度整数百分比存储，往返转换是近似的。#3b82f6 转成 HSL 再转回来得到 #3c83f6，两个通道各差一格。这个差别肉眼无法察觉，但如果你要逐字节比较色值就会在意。

第二个边界情况是灰色。当红、绿、蓝相等时，转换无法计算有意义的色相，会报告 hsl(0, 0%, L)。所以 #808080 变成 hsl(0, 0%, 50%)，每一种灰色无论来源如何都落在色相 0 上。区分灰阶靠的是饱和度，而不是色相。

HSL 也不是感知均匀的。两个声明明度相同的颜色，看起来可能亮度差别很大：50% 明度的黄色看起来远比 50% 明度的蓝色亮。这就是为什么在整组配色中固定 HSL 明度会改变各色块的视觉重量，也是为什么会出现 OKLCH 这类更新的感知色彩空间。本工具坚持使用标准 HSL，与 CSS 直接接受的形式一致。

颜色选择器 & 转换器