Loading…

关于 在线颜色选择器与转换器

上传图片、粘贴颜色或使用色轮获取精确颜色。该工具在客户端进行丰富分析：标准化 HEX，计算 RGB/HSL/HSV/CMYK，转换为 XYZ/LAB/LCH，计算亮度和 WCAG 对比度，并生成和谐调色板。然后，您可以复制任何格式作为 CSS 就绪标记，或使用和谐色构建一致的设计系统。

这款颜色拾取器的功能

  • 从图片中取样颜色*，或从精确色轮或HEX/RGB输入开始
  • 丰富的转换：HEX、HEX8、RGB/A、HSL/A、HSV、CMYK、XYZ、LAB、LCH
  • 使用相对亮度内置WCAG对比度检查器，对比#000000和#FFFFFF
  • 适用时提供网络安全色和简写HEX建议
  • 配色方案：互补色、三元色、四元色、类似色、单色调（通过色相旋转计算）
  • 亮度和感知亮度预览，预判对比度问题
  • 基于最近RGB距离的近似潘通色匹配（使用缓存数据集）
  • 分析在客户端运行；启用可选潘通查找时仅使用最少数据

🔧 如何使用颜色拾取器 for color-picker

1

1. 选择或拾取基础颜色

粘贴HEX值，输入RGB/HSL，或使用拾取器从图片或色轮中选取颜色。工具内部会将其标准化为安全的HEX值。

2

2. 微调色相和亮度

调整色相、饱和度和亮度，直到色板看起来合适。大预览区在浅色和深色背景上显示颜色以供参考。

3

3. 读取并复制所需格式

一键复制HEX、HEX8、RGB、RGBA、HSL、HSLA、HSV、CMYK、XYZ、LAB和LCH。用于CSS变量、设计令牌或交接文档。

4

4. 检查WCAG对比度

查看基于sRGB亮度的与#000000和#FFFFFF的对比度比率。使用结果快速判断颜色是否适用于正文文本、大标题或UI元素。

5

5. 生成配色方案并构建调色板

探索通过色相旋转生成的互补色、三元色、四元色、类似色和单色调。将您喜欢的颜色添加到调色板/历史记录中，并将其导出为令牌。

技术细节

输入处理与标准化

该工具接受十六进制颜色代码，并将其转换为标准化的6位HEX作为内部参考。

方面行为备注
HEX 标准化3位和6位 HEX，可选前导 #短 HEX（如 #0f8）扩展为 #00ff88；非十六进制字符被移除。
HEX8 支持通过 #RRGGBBAA 实现 RGBAAlpha 通道转换为 0–255 并作为第4个字节附加。
网页安全色建议每个通道对齐到最近的51步值四舍五入到最近的51的倍数（0, 51, 102, 153, 204, 255）。
简写 HEX 建议仅在可压缩时当每对 HEX 数字重复时显示（例如 #112233 → #123）。

色彩空间与转换

所有计算基于 sRGB，使用 D65 参考白点。

空间计算方式用途
RGB来自标准化的 HEX（每通道 0–255）转换的基础表示。
HSL / HSV从 sRGB 的标准柱面变换用于直观编辑和和谐度计算。
CMYK设备无关近似计算为 1−max(R,G,B)，组件为 0–100%；不绑定 ICC 配置文件。
XYZ使用 D65 矩阵将线性化 sRGB 转换为 XYZ用于 LAB/LCH 和深度分析的中间空间。
LAB从 XYZ 转换的 CIE L*a*b*感知上更均匀的度量空间。
LCH从 LAB 转换的 CIE L*C*h°适用于色调/色度/亮度调整和感知调色板设计。

亮度与 WCAG 对比度

对比度使用标准 WCAG 相对亮度公式计算。

方面详情备注
相对亮度基于线性化sRGB计算（Y分量）使用系数0.2126R + 0.7152G + 0.0722B
对比度(L1 + 0.05) / (L2 + 0.05)工具报告与#000000和#FFFFFF的对比度
WCAG阈值常规与大文本的AA/AAA标准典型阈值：4.5:1（AA常规）、3:1（AA大文本）、7:1（AAA常规）、4.5:1（AAA大文本）

和谐色与衍生色彩

和谐色通过HSL色相旋转生成，保持饱和度与明度不变

和谐类型规则示例
互补色+180°色相色轮上的对立点
三元色±120°色相三种等间距颜色
四元色+90°、+180°、+270°色相色轮上构成矩形的四种颜色
类似色−30° / +30°色相基色周围的相邻颜色
单色调调整L明度同一色相的明暗变体

Pantone近似匹配

当Pantone数据集可用时，工具会在RGB空间计算最接近的匹配色

方面行为备注
数据集加载通过getPantoneColors / getPantoneColorsCached缓存+异步加载缓存就绪时可立即显示匹配，或经短暂异步加载后显示
匹配度量RGB（0-255）上的平方欧几里得距离快速、简单的近似；非感知ΔE*度量。
输出类似潘通的ID和名称仅作为指导显示；非官方潘通映射。

性能与隐私

转换、亮度、对比度和和谐色完全在客户端计算。潘通查找可能根据配置查询本地或远程数据集，但原始颜色保持为简单的HEX字符串，除非您明确共享或导出它们。

热门使用场景

UI/UX与前端

  • 为按钮、链接和文本创建可访问的前景/背景对。
  • 直接从所选颜色导出CSS变量和设计令牌。
  • 在实现主题切换器前检查浅色/深色模式的对比度。
/* CSS颜色令牌 */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

品牌与视觉识别

  • 从单一主色衍生出主色/辅色/强调色板。
  • 为徽标或产品线探索互补色或三元色选项。
  • 在准备品牌指南前获取近似的潘通式命名。

数据可视化与仪表板

  • 定义在浅色和深色背景上均保持可区分的系列颜色。
  • 使用LAB/LCH设计具有受控感知步长的调色板。
  • 快速检查图表颜色在图例和标签中是否满足对比度预期。

❓ Frequently Asked Questions

HEX、RGB、HSL和HSV之间有什么区别？

HEX只是用十六进制编写RGB值的紧凑方式。RGB描述sRGB中的红/绿/蓝分量。HSL和HSV是更直观的柱面模型：H是色轮上的色调，S是饱和度，L/V控制亮度或明度。

为什么CMYK值看起来是近似的？

实际的CMYK输出取决于打印机配置文件、墨水、纸张和校准。此工具显示的是设备无关的近似值，对早期设计决策有用，但最终印刷工作应使用您的印刷提供商的ICC配置文件进行检查。

LAB和LCH有什么用处？

LAB和LCH比原始RGB更具感知均匀性。L或C中的相等数值步长在视觉上往往更一致，这使得它们非常适合生成色调、阴影和平衡调色板，或用于测量颜色之间的视觉距离。

对比度是如何计算的？

我们使用WCAG公式从sRGB计算相对亮度，然后推导对比度比率（L1 + 0.05）/（L2 + 0.05）。结果与常见阈值进行比较，如4.5:1（AA正常文本）和7:1（AAA正常文本）。

潘通名称是否精确？

不。任何类似潘通的标签都是RGB空间中的近似最近邻匹配，仅作为指导提供。对于生产关键工作，请始终使用官方潘通库和工具进行验证。

你们会存储我的图像或颜色吗？

颜色计算（格式、对比度、和谐色）在客户端执行。根据配置，图像上传和潘通数据集可能涉及服务器，但该工具设计用于瞬时处理，而非长期存储。对于高度机密的资产，建议使用本地/离线工具。

Pro Tips

Best Practice

始终在浅色和深色表面上预览颜色；感知饱和度和对比度会随环境发生显著变化。

Best Practice

生成色调和阴影时使用 LAB 或 LCH，使人眼感觉亮度变化更均匀。

Best Practice

检查所有交互状态（悬停、激活、禁用）的 AA/AAA 对比度，而不仅仅是默认按钮颜色。

Best Practice

从格式选项卡导出 CSS 变量或设计令牌，以保持组件间颜色一致。

Best Practice

从图像中取样时，对小块区域取平均值而非单个像素，以减少压缩和抗锯齿带来的噪点。

Additional Resources

WCAG 2.2 – 对比度（最低要求）
Documentation
CSS颜色模块第4级
Documentation
MDN – <color> 值
Documentation
CIE 色度学 (XYZ/LAB)
Documentation

Other Tools