颜色格式转换

颜色格式转换工具 - 在线 HEX / RGB / HSL / HSV / CMYK 互转

颜色格式转换工具是一款完全在线运行的免费颜色处理工具，无需安装任何软件，打开即用。它支持网页开发与平面设计中最常见的多种颜色格式——HEX（十六进制）、RGB、HSL、RGBA、HSV、HSVA、CMYK、CMYKA——可在这几种格式之间实时互转，并同步更新所有字段，极大提升前端开发与设计工作的效率。

核心功能

• 可视化取色器：内置交互式拾色盘，点击即可从色谱中精确选取颜色，实时同步到所有格式输出。
• 预设色板：提供 18 个常用颜色的快捷色板，覆盖常见 UI 主色，点击即可一键切换。
• 多格式同步转换：任意修改 HEX、R/G/B 通道、H/S/L 通道或 H/S/V 通道，其余格式自动同步更新，无需手动计算。
• 透明度（Alpha）控制：通过滑块调节 Alpha 值（0–1），HEX 字段随之输出 8 位格式（#RRGGBBAA），RGBA、HSVA、CMYKA 字段同步更新。
• 实时颜色预览：顶部色块实时展示当前颜色（含透明度），棋盘格背景直观反映透明效果。
• 一键复制：每种格式旁均有独立复制按钮，点击即可将对应格式的颜色值复制到剪贴板。

颜色格式说明

在网页和应用开发中，颜色通常用以下几种格式表示：

• HEX（十六进制）：如 #16baaa，是 CSS 中最常见的颜色写法，由 # 加上 6 位或 8 位十六进制数字组成。8 位时最后两位表示透明度（Alpha），如 #16baaa80 表示 50% 透明。
• RGB：如 rgb(22, 186, 170)，分别指定红（R）、绿（G）、蓝（B）三个通道的值，范围 0–255。
• RGBA：在 RGB 基础上增加 Alpha 透明度通道，如 rgba(22, 186, 170, 0.5)，Alpha 值范围 0（完全透明）到 1（完全不透明）。
• HSL：如 hsl(174, 79%, 41%)，用色相（Hue，0–360°）、饱和度（Saturation，0–100%）、亮度（Lightness，0–100%）来描述颜色，更符合人类对颜色的直觉认知，常用于动态调色场景。
• HSV（也称 HSB）：如 hsv(174, 88%, 73%)，用色相（Hue）、饱和度（Saturation）、明度（Value/Brightness）描述颜色。与 HSL 的亮度概念不同，HSV 的明度更贴近绘画中"颜料浓淡"的直觉，是 Photoshop 等设计软件中常用的拾色模型。
• HSVA：在 HSV 基础上增加 Alpha 透明度通道，如 hsva(174, 88%, 73%, 1)。
• CMYK：如 cmyk(88, 0, 9, 27)，用青（Cyan）、品红（Magenta）、黄（Yellow）、黑（Key/Black）四色描述颜色，是印刷行业的标准色彩模型，适合对接打印输出场景。
• CMYKA：在 CMYK 基础上增加 Alpha 透明度通道，如 cmyka(88, 0, 9, 27, 1)，方便在支持透明度的印刷或数字场景中使用。

适用场景

• 前端开发者在 CSS/SCSS 中查找或验证颜色值
• UI/UX 设计师在设计稿中核对颜色规范
• 需要在不同设计工具（Figma、Sketch、Photoshop）之间转换颜色格式
• 平面/印刷设计师将屏幕颜色转换为 CMYK 印刷色值
• 开发小程序、App 时统一颜色变量
• 调整界面元素透明度时快速生成 RGBA / HSVA / CMYKA / 8 位 HEX

使用方法

1. 点击左侧色块，弹出可视化拾色盘，拖动选取目标颜色；或直接点击预设色板中的常用色。
2. 右侧各格式字段（HEX、RGB、HSL、RGBA、HSL str、HSV、HSVA、CMYK、CMYKA）将自动同步更新。
3. 也可以直接在 HEX 输入框粘贴已知的颜色值，或手动修改 R/G/B、H/S/L 各通道数值，其余字段实时联动。
4. 拖动底部透明度滑块调节 Alpha 值，HEX 将切换为 8 位格式，RGBA、HSVA、CMYKA 预览同步更新。
5. 点击每行右侧的复制按钮，将对应格式的颜色值复制到剪贴板，直接粘贴到代码或设计工具中使用。

常见问题（FAQ）

Q：HEX 8位格式（#RRGGBBAA）所有浏览器都支持吗？
A：现代主流浏览器（Chrome、Firefox、Safari、Edge 最新版）均已支持 8 位 HEX，IE 不支持。如需兼容旧版浏览器，建议使用 rgba() 格式。

Q：HSL 和 HSV 有什么区别？
A：两者都用色相和饱和度描述颜色，但第三个维度不同。HSL 的"亮度"（Lightness）以 50% 为纯色中间值，趋向 100% 变白、趋向 0% 变黑；HSV 的"明度"（Value）以 100% 为纯色最亮值，趋向 0% 变黑，更接近 Photoshop 等工具的拾色逻辑，设计师会更熟悉。

Q：CMYK 和 RGB 有什么区别？应该用哪个？
A：RGB 是屏幕显示的加色模型，适用于数字设计；CMYK 是印刷的减色模型，适用于对接印刷厂或打印输出。如果你的设计最终要印刷，建议参考 CMYK 值与印刷厂沟通确认色值。

Q：这个工具支持复制哪些格式？
A：支持一键复制 HEX（含 alpha 时为 8 位）、rgb()、hsl()、rgba()、hsl() 字符串、hsv()、hsva()、cmyk()、cmyka() 共九种格式，每种格式旁均有独立复制按钮。

Q：颜色数据会上传到服务器吗？
A：不会。本工具完全在浏览器本地运行，所有颜色计算均在前端完成，不会向服务器发送任何数据，保护您的隐私。