颜色反转器

颜色反转器

欢迎使用颜色反转器，这是一款专为设计师、开发人員和无障碍设计专业人士打造的强大免费线上工具。立即以 HEX、RGB、HSL 和 CMYK 格式反转颜色，并提供即时预览、互动式色轮视觉化以及符合 WCAG 标准的对比度检查。无论您需要建立深色模式设计、寻找互补色，还是确保符合无障碍合规性，此工具都能提供您所需的一切。

什么是颜色反转？

颜色反转透过对其 RGB 值进行数学转换来建立颜色的负片或相反色。标准的 RGB 反转公式是从 255 中减去每个颜色分量：

例如，反转纯红色（#FF0000）会产生青色（#00FFFF），而反转白色（#FFFFFF）则会产生黑色（#000000）。这种数学关系意味著每种颜色都恰好有一个反转对应项。

RGB 反转 vs 互补色

此工具提供两种反转模式，产生的结果不同：

• RGB 反转：从 255 中减去每个 RGB 值，建立精确的数学负片。最适合照片负片、深色模式转换和最大对比度。
• 互补色：透过在色轮上旋转 180 度（在色相值上加 180），同时保持饱和度和亮度。更适合和谐的配色方案和设计调色盘。

支持的颜色格式

HEX（十六进位）

最常见的网页颜色格式，HEX 使用六位十六进位数字（0-9, A-F）来表示 RGB 值。格式为 #RRGGBB，其中 RR 是红色，GG 是绿色，BB 是蓝色。每对范围从 00 (0) 到 FF (255)。

RGB（红、绿、蓝）

螢幕和显示器使用的加法混色模型。每个分量范围从 0 到 255，(0,0,0) 为黑色，(255,255,255) 为白色。RGB 对于理解光线混合颜色非常直觀。

HSL（色相、饱和度、亮度）

对设计师而言更直觀的颜色模型。色相是色轮上的一个角度（0-360），饱和度是颜色強度（0-100%），亮度是明暗度（0-100%）。HSL 让建立颜色变化变得容易。

CMYK（青、洋红、黄、黑）

印刷中使用的减法混色模型。每个分量范围从 0-100%，代表每种油墨的含量。在准备印刷设计时，CMYK 值非常有用。

如何使用此工具

1. 选择输入格式：根据您想要输入颜色的方式，选择偏好的颜色格式标签（HEX、RGB、HSL 或 CMYK）。
2. 输入您的颜色：使用文字欄位输入您的颜色值，或使用颜色选取器进行视觉化选取。点击示例色块进行快速测试。
3. 选择反转模式：选择「RGB 反转」以獲得数学上的颜色负片（255 减去每个 RGB 值），或选择「互补色」以獲得色轮对面的颜色（180 度色相旋转）。
4. 查看结果：查看即时预览，显示您的原始颜色及其反转版本。色轮视觉化会显示两种颜色及其位置。
5. 检查无障碍性：查看 WCAG 对比度，确保您的颜色组合符合文字可读性的无障碍标准。
6. 复制颜色代码：点击任何颜色代码格式（HEX、RGB、HSL、CMYK）将其复制到剪贴簿，以便在您的设计项目中使用。

了解 WCAG 对比度

网页内容无障碍设计指引 (WCAG) 定义了文字可读性的最低对比度：

WCAG AA（最低要求）

• 普通文字：需要 4.5:1 的对比度
• 大文字（18pt+ 或 14pt+ 粗体）：需要 3:1 的对比度

WCAG AAA（增强要求）

• 普通文字：需要 7:1 的对比度
• 大文字：需要 4.5:1 的对比度

此工具会自动计算原始颜色与反转颜色之间的对比度，显示它們是否符合 WCAG AA 和 AAA 标准。这对于确保视觉障碍使用者能夠存取您的设计至关重要。

实际应用

深色模式设计

颜色反转是深色模式界面的基础。透过反转浅色背景和深色文字，您可以建立具备无障碍性的深色主题。然而，纯数学反转通常需要调整以獲得舒适的觀看体验。

无障碍性

对于低视力或色盲使用者而言，寻找高对比度的颜色组合至关重要。WCAG 对比度检查器有助于确保您的文字对所有使用者保持可读性。

照片编辑

反转颜色会建立照片负片，这是一种经典的艺术效果。了解颜色反转有助于影像处理和特效制作。

品牌与设计

互补色（色轮上 180 度相对的颜色）可为标志、行銷素材和 UI 设计建立充满活力且引人注目的组合。

印刷准备

在准备印刷设计时，在 RGB 和 CMYK 之间进行转换至关重要。此工具显示原始颜色和反转颜色的 CMYK 值。

色轮与互补色

互动式色轮视觉化显示了您的颜色在光谱中的位置。互补色在色轮上直接相对，在保持颜色和谐的同时建立最大的视觉对比。

色轮上的关键颜色关系：

• 互补色（180度）：高对比度、充满活力的组合（例如：红色-青色、蓝色-橙色）
• 近似色（相邻）：和谐、相似且融合良好的颜色
• 三等分颜色（相隔120度）：平衡且充满活力的三色方案
• 补色分割：比直接互补色強度低，层次更豐富

常见问题

什么是颜色反转？

颜色反转是透过从 255 中减去每个 RGB 分量来建立颜色的负片过程。例如，反转白色（#FFFFFF，RGB 为 255,255,255）会产生黑色（#000000，RGB 为 0,0,0）。这会在 RGB 光谱上建立完全相反的颜色，对于建立高对比度设计和无障碍功能非常有用。

反转色和互补色有什么不同？

反转色（RGB 反转）是透过从 255 中减去每个 RGB 值计算出来的，建立数学上的负片。互补色则是透过在色轮上旋转 180 度（在 HSL 中将色相值加 180）找到的。虽然两者都能建立对比色，但互补色保持相同的饱和度和亮度，使其在设计用途上更趋于和谐。

如何检查无障碍设计的颜色对比度？

WCAG（网页内容无障碍设计指引）定义了无障碍设计的对比度。普通文字至少需要 4.5:1 的对比度（AA 级），而大文字则需要 3:1。为了增强无障碍性（AAA 级），普通文字需要 7:1，大文字需要 4.5:1。此工具会自动计算原始颜色与反转颜色之间的对比度，并显示 WCAG 合规状态。

此工具支持哪些颜色格式？

此颜色反转器支持四种主要的颜色格式：HEX（十六进位，如 #FF5733）、RGB（红、绿、蓝，值为 0-255）、HSL（色相 0-360、饱和度 0-100%、亮度 0-100%）和 CMYK（青、洋红、黄、黑，0-100%）。所有格式都会自动转换并显示，方便复制。

为什么我需要反转颜色？

颜色反转对于以下情况非常有用：建立设计的深色模式版本、为无障碍设计产生高对比度配色方案、设计照片负片和艺术效果、在背景中寻找可读的文字颜色、建立品牌互补色调色盘，以及开发需要切换亮色/深色主题的使用者界面。

技术细节

色彩空间转换

此工具使用标准算法在色彩空间之间執行精确转换。RGB 到 HSL 的转换保留了知觉颜色关系，而 CMYK 转换使用适用于螢幕预览的简化公式（专业印刷工作可能需要 ICC 色彩设定檔）。

对比度计算

WCAG 对比度是使用相对亮度值计算的：

其中 L1 是较淺颜色的相对亮度，L2 是较深颜色的相对亮度。相对亮度考量了人类对不同颜色波长的感知。

其他资源

• 色彩理论 - 维基百科
• WCAG 对比度指南 - W3C
• CSS 颜色值 - MDN Web Docs

其他相关工具:

颜色工具:

• CMYK 转换为十六进制转换器
• 颜色对比检查器
• 颜色反转器
• 配色方案生成器
• 渐变生成器
• 十六进制转CMYK转换器
• 十六进制到rgb转换器
• 图片颜色选择器
• 调色板生成器
• 随机颜色生成器
• RGB到十六进制转换器
• 随机调色板生成器 新