颜色格式转换工具

HEX：十六进制颜色表示，网页最常用，如 #2b6cff，每两位表示红绿蓝（0-FF）； RGB：红绿蓝加色模型，三值各 0-255，CSS 与设计软件通用； HSL：色相（Hue，0-360°）/ 饱和度（Saturation，0-100%）/ 亮度（Lightness，0-100%）， 人眼直觉接近「这是什么颜色 / 多鲜艳 / 多亮」，CSS 标准支持； HSV：与 HSL 类似但 V（Value，明度）≠ L（亮度），Photoshop 取色器使用 HSV； CMYK：青 / 品红 / 黄 / 黑，印刷四色，对应油墨比例，与屏幕 RGB 加色模型相反。

两者都基于色相（H）+ 饱和度（S），但第三维不同： HSL 的 L（亮度）：0% 是纯黑，100% 是纯白，50% 是纯色； HSV 的 V（明度）：0% 是纯黑，100% 是纯色（不是白色）。 关键差异：在 HSL 中纯白与纯色明度差 50%，在 HSV 中纯白 V=100 但饱和度 S=0，纯色 V=100、S=100。 因此 纯色 → 加白在 HSL 中是 L↑，在 HSV 中是 S↓。 Photoshop 取色器用 HSV 因为它对应画家「选色 → 加白变亮」的直觉；CSS 用 HSL 因为它对网页设计 「明度均匀」更友好（同样的 L 值，不同色相看起来亮度一致）。

RGB 是加色模型（光叠加，三色相加为白），色域较大；CMYK 是减色模型 （油墨吸收光，三色相加为黑），色域较小。许多亮色（如纯蓝 rgb(0, 0, 255)） 在印刷中无法精确呈现，转换到 CMYK 会出现颜色失真（变暗变浊）。本工具的 RGB → CMYK 转换 是数学上的等价转换，未做色域映射，实际印刷前应使用专业软件（如 Photoshop） 做色彩管理与 ICC 配置文件转换。同理 CMYK → RGB 显示也只是近似值。

基于色彩理论的标准和谐方案，对当前颜色的 HSL 色相做旋转： 互补色（±180°，2 色）对比强烈，适合强调； 类似色（±30°，3 色）邻近色和谐柔顺，适合统一氛围； 三角色（±120°，3 色）平衡活泼，适合多区域划分； 分割互补（180°±30°，3 色）比互补色柔和，对比但不刺眼； 四角色（±90°/±180°，4 色）丰富多样，适合多主题配色。 所有方案保持当前颜色的饱和度与亮度，仅旋转色相。

支持以下输入： #rgb、#rrggbb（带或不带 #）、 rgb(r, g, b)、hsl(h, s%, l%)、hsv(h, s%, v%)、 cmyk(c%, m%, y%, k%)。 也可省略前缀只写数字：3 个数字（0-255）按 RGB 解析，4 个数字（0-100）按 CMYK 解析。 建议加前缀以避免歧义，例如 220, 100%, 58% 可能是 HSL 也可能是 HSV，加上 hsl(...) 才能确保正确。也可点击左侧色块用拾色器直接选色。

可能原因：1) 色彩空间不同：本工具使用 sRGB（网页标准），设计软件可能用 Display P3 或 Adobe RGB，色域更宽，亮色更鲜艳；2) 浏览器未开启色彩管理： 部分老浏览器不渲染 ICC 配置文件；3) HSL 与 HSV 混淆：Photoshop 取色器 显示 HSV，但 CSS 用 HSL，数值相同但实际颜色不同（HSL 的 50% 亮度 ≠ HSV 的 100% 明度）。 本工具明确标注每种的格式，避免混淆。

基础原则：互补色用于 CTA 按钮（高对比强调，如蓝色背景 + 橙色按钮）； 类似色用于背景渐变或图表系列（和谐统一）； 三角色用于品牌识别或三栏布局（活泼平衡）； 分割互补用于需要对比但不想太刺眼的场景（如插画配色）； 四角色用于需要丰富多样的配色（如数据可视化多系列）。 选定主色后用本工具生成配色，再复制 HEX 到 CSS / Figma 即可。建议先选 1 个主色， 再加 1 个强调色（互补或分割互补），最后用类似色或灰色填充背景。

不会。本工具完全在浏览器内运行，所有颜色解析、格式转换、配色生成逻辑由 JavaScript 在你本地执行， 输入的颜色值不会发送到任何服务器。这对于处理品牌色、商业设计稿配色尤其重要， 可避免配色方案提前泄露。但请注意：浏览器历史记录、屏幕截图、共享设备可能留下痕迹， 如需彻底保密请在隐私模式中使用。