Color Converter：HEX、RGB、HSL、CMYK

什么是 Color Converter？

Color Converter 是一款免费在线工具，可在五种最常用的颜色格式之间即时转换任意颜色：HEX、RGB、HSL、HSB（HSV）和 CMYK。粘贴或输入任意支持格式的颜色值，工具会自动检测您输入的内容，并实时同步显示所有其他表示形式。它解决了在 Figma 的 HEX 值与 CSS HSL 函数之间切换，或将屏幕 RGB 值转换为印刷 CMYK 百分比的日常繁琐——无需通过计算器逐一复制值。所有转换均在浏览器本地完成，无需服务器。

主要功能

• 在 HEX、RGB、HSL、HSB 和 CMYK 之间转换 — 输入有效颜色后，五种格式同时显示。源码使用 useColorConversion 钩子，将 hex、rgb、hsl、hsb 和 cmyk 状态对象保持同步。
• 自动检测输入格式 — 文本区域自动检测 HEX（以 # 开头或匹配 /^[0-9a-f]{3,8}$/i 的值）、RGB（rgb 前缀）和 HSL（hsl 前缀），并显示标注"Detected: HEX"（或 RGB/HSL/Auto）的徽章。
• 输入时实时转换 — 每次产生可解析值的按键都会立即触发所有五种输出格式的重新渲染，无需点击任何按钮。
• 将任意格式复制到剪贴板 — 每个格式行都有一个复制按钮，成功复制后显示绿色对勾 2 秒。Toast 通知确认操作已完成。
• 可视颜色预览 — 大型预览框填充为当前颜色，并根据亮度以自动对比文本（黑色或白色）显示十六进制值。
• RGB、HSL、HSB 和 CMYK 的数值输入 — 手动调整面板可精细调节各个通道：R、G、B（0–255），H（0–360）、S（0–100）、L（0–100）（HSL 用），H（0–360）、S（0–100）、B（0–100）（HSB 用），以及 C、M、Y、K（0–100）（CMYK 用），均限制在有效范围内。
• 可分享 URL — 工具使用 useShareableState 钩子将当前颜色编码到 URL 中，支持直接链接到特定颜色转换结果。
• 加载后离线可用 — 转换期间无需网络请求；完整转换库已随页面打包。

使用方法

步骤 1：输入颜色

打开 Color Converter。输入卡片左半部分是文本输入框。粘贴以下任一格式：

• 十六进制值：#3B82F6
• RGB 函数：rgb(59, 130, 246)
• HSL 函数：hsl(217, 91%, 60%)
• 纯十六进制字符串：3b82f6（不带 #）

输入或粘贴可识别的值后，输入框右上角会出现小徽章，例如"Detected: HEX"。卡片右半部分显示实时颜色预览框，立即填充为检测到的颜色。

也可以使用预览框下方的原生颜色选择器。点击色板方块打开浏览器颜色选择器；选择颜色后，输入框随之更新，所有格式同时刷新。

步骤 2：查看所有格式

输入卡片下方的"All Formats"卡片列出五行：

每行显示格式标签、等宽字体的格式化值和复制图标按钮。点击任意复制按钮，可将该值放入剪贴板。

步骤 3：通过数值输入精细调节

文本输入框下方提供四种可调颜色模型的直接数值输入：

• RGB：标记为 R、G、B 的三个数值输入框，各接受 0 到 255 的值，并限制在有效范围内。
• HSL：标记为 H（0–360）、S（0–100）、L（0–100）的三个数值输入框。
• HSB：标记为 H（0–360）、S（0–100）、B（0–100）的三个数值输入框。
• CMYK：标记为 C、M、Y、K 的四个数值输入框，各接受 0 到 100 的值。

更改任意输入框会更新十六进制状态，并即时传播至所有五种输出格式。当您知道目标色相角、饱和度百分比或 CMYK 值，需要对应的 CSS 十六进制值时，这一功能尤为实用。

步骤 4：复制并使用转换后的值

点击所需格式旁的复制按钮。按钮图标从剪贴板图标切换为绿色对勾，持续 2 秒。屏幕底部显示成功 Toast。

工具还会在 HistoryPanel（高级功能）中追踪转换历史。恢复历史记录时，输入框将设置为已存储的十六进制值，并重新执行所有转换。

步骤 5：分享特定颜色

更改颜色时 URL 自动更新（通过 useShareableState）。复制浏览器 URL 即可分享指向特定颜色的直接链接。收到链接的人打开后会看到"Loaded from shared link"Toast，以及预加载到所有格式中的共享颜色。

实际示例

将 Figma 设计令牌转换为 CSS

设计师提供品牌紫色 #8467C7，开发者需要 CSS color-mix() 函数的 HSL 值。打开 Color Converter 并输入 #8467C7，HSL 行立即显示 hsl(261, 40%, 59%)，可直接粘贴使用。

将印刷颜色转换为网页颜色

印刷厂将企业蓝指定为 cmyk(76%, 47%, 0%, 4%)。文本输入的自动检测无法识别原始 CMYK 记法，但可通过 CMYK 数值输入面板直接输入：将 C 设为 76、M 设为 47、Y 设为 0、K 设为 4。HEX、RGB 和 HSL 输出实时更新，立即给出适用于网页的颜色值。

构建深色模式调色板

开发者正在构建深色主题，需要将浅色转换为更深的变体。输入 #E2E8F0（浅灰蓝），记下 HSL 为 hsl(214, 32%, 91%)，然后手动将 L 通道输入从 91 调低到 25，得到深色等价色。HEX 输出更新为 #253443，直接复制即可。

使用技巧与最佳实践

不带 # 输入，输入更快。 自动检测正则表达式会将 3b82f6 这样的纯十六进制字符串识别为 HEX 格式，可直接从去掉井号的设计工具中粘贴。

使用 RGB 输入精确控制通道。 需要红色值精确为 200 的颜色时，直接在 R 输入框中填写，无需寻找正确的十六进制前缀。最小/最大限制可防止意外输入超出范围的值。

通过可分享 URL 收藏颜色。 由于颜色通过 useShareableState 编码到 URL 中，您可以将常用品牌颜色加入书签，随时无需重新输入即可打开。

检测徽章是快速有效性验证。 输入后若未出现徽章，说明输入未被识别为有效颜色，请检查是否有拼写错误——常见问题包括缺少 #、使用带 Alpha 通道的 rgba（当前不支持解析），或输入基于百分比的 RGB 值。

四种颜色模型均有可编辑输入框。 RGB、HSL、HSB 和 CMYK 各有专用数值输入面板。可从任意模型开始，直接调整其值，其他格式实时更新。

常见问题与故障排查

输入后输出行不显示任何内容。 输入文本未被识别为有效颜色。parseColorToHex 函数处理带 # 的十六进制、纯十六进制、rgb() 和 hsl() 字符串。若输入了其他格式（如 CSS 颜色名称 cornflowerblue），自动检测返回 null，不触发任何转换。请改用十六进制值。

RGB 输入接受超过 255 的值。 代码在更改时将值限制为 Math.min(255, Math.max(0, val))，因此输入 300 后，输入框处理时会自动调整为 255，这是预期行为。

HSL 色相输入在 360 处截止。 色相字段限制为 Math.min(360, Math.max(0, val))。输入 361 会设为 360；输入 -1 会设为 0。

复制按钮无响应。 若 navigator.clipboard.writeText 失败（例如在不安全或受限的环境中），工具会回退到使用临时 textarea 元素的 document.execCommand('copy') 方法。若两者均失败，请检查浏览器是否已授予该网站剪贴板权限。

"Loaded from shared link" Toast 意外出现。 此 Toast 在 isFromUrl 为 true 时显示一次，表示 URL 查询字符串中编码了颜色。若您打开的是已收藏的 URL，此为预期行为。由于 hasShownShareToast 引用守卫，每次页面加载只显示一次。

隐私与安全

Color Converter 使用 JavaScript 数学运算在本地处理所有转换。任何颜色值、输入文本或转换结果均不会传输到任何服务器。可分享 URL 仅将颜色编码在浏览器 URL 中——除非您选择分享链接，否则不会发送到任何地方。工具使用 Web Clipboard API 进行复制操作，同样完全在本地执行。首次页面加载后完全支持离线使用。

常见问题

Color Converter 免费吗？

是的，完全免费，无需账户。五种转换格式、可视颜色选择器、RGB 和 HSL 手动输入、剪贴板复制和可分享 URL 对所有用户均免费开放。PresetsPanel 和 HistoryPanel 等 Supporter 功能需要 $5 Ko-fi 激活码，可使用 30 天。

Color Converter 支持离线使用吗？

支持。页面加载完成后，所有转换逻辑均在 JavaScript 中运行，无需外部请求。断开网络连接后仍可继续转换颜色，不受影响。

我的数据在 Color Converter 中安全吗？

安全。颜色值仅在浏览器内存中处理，不会发送到任何服务器。可分享 URL 在客户端编码颜色——Glyph Widgets 服务器从不记录您使用的具体颜色。

Color Converter 支持哪些格式？

工具支持五种格式：HEX（带或不带 # 的 3 位或 6 位十六进制字符串）、RGB（rgb(R, G, B) 记法）、HSL（hsl(H, S%, L%) 记法）、HSB/HSV 和 CMYK。五种格式均有专用数值输入面板，可直接调整值。

HSL 和 HSB 有什么区别？

两者均使用色相（0–360 度）和饱和度（0–100%），但第三个通道不同。HSL 使用亮度，50% 为完全饱和的颜色，100% 始终为白色。HSB（又称 HSV）使用明度/值，100% 为色相的最纯版本，0% 始终为黑色。Figma 和大多数设计工具显示 HSB；CSS 使用 HSL。

能将 CMYK 转换为 HEX 吗？

文本输入的自动检测不解析原始 CMYK 记法，但可使用 CMYK 数值输入面板直接输入 C、M、Y 和 K 值。调整任意 CMYK 值后，包括 HEX 在内的所有其他格式均实时更新。

为什么 CMYK 转换结果与我的印刷值略有偏差？

屏幕到印刷的转换取决于颜色配置文件。工具使用标准 sRGB 到 CMYK 数学公式，不进行 ICC 配置文件校正。用于印刷生产时，请使用能为您的打印机和纸张应用正确 ICC 配置文件的色彩管理工具。

可以输入 3 位简写十六进制值如 #F0F 吗？

可以。parseColorToHex 函数检测与 /^[0-9a-f]{3,8}$/i 匹配的十六进制字符串，其中包含 3 位简写形式。#F0F 被视为等同于 #FF00FF。

如何与同事分享特定颜色？

在工具中更改颜色后复制浏览器 URL。当前十六进制值通过 useShareableState 编码在 URL 查询字符串中。同事打开链接后，将看到预加载了该颜色的页面，并显示"Loaded from shared link"通知。

Color Converter 支持 Alpha 通道（RGBA / HSLA）吗？

当前版本不支持。输入解析器处理 rgb() 和 hsl()，但不处理 rgba() 或 hsla()。Alpha 通道值不会在转换管道中保留。如需完整的 Alpha 支持，请手动提取 RGB 或 HSL 值并单独处理 Alpha。

相关工具

• Color Picker — 直接从上传的图片或屏幕取色，并将结果发送至转换器。
• Contrast Checker — 验证两种转换后的颜色是否满足 WCAG AA 或 AAA 对比度要求。
• 即将推出: Palette Generator — 从基础颜色生成和谐调色板，并将每个色板转换为您偏好的格式。

立即试用 Color Converter：Glyph Widgets Color Converter