跳到主内容

颜色转换

开发者工具

HEX/RGB/HSL/CMYK

答案速览

颜色转换——HEX/RGB/HSL/CMYK。HEX ↔ RGB：十六进制按两位分段解析。

HEX#3b82f6
RGB59, 130, 246
HSL217°, 91%, 60%
就近 Tailwindblue-500

换算步骤

  1. 1HEX #3b82f6 → RGB(59, 130, 246)
  2. 2HSL = (217.2°, 91.2%, 59.8%)——色相 217° 落在蓝色系
  3. 3就近 Tailwind 色板：blue-500（色差² 0）
  4. 4下方梯度按黑白混合生成——生产级色板建议用 OKLCH 色彩空间工具获得感知均匀梯度。

CSS 代码片段

--color-primary: #3b82f6;
--color-primary-rgb: 59 130 246;
color: #3b82f6;
color: rgb(59 130 246);
color: hsl(217 91% 60%);
background-color: color-mix(in srgb, #3b82f6 50%, white);

明暗梯度（浅 → 深）

需要 WCAG 对比度校验请用「颜色对比度检查器」；需要 CMYK/HSV/印刷格式请用生活分类的「颜色转换器」（五制式）。本工具偏开发者代码输出。

这个工具对你有帮助吗？

怎么用

  1. 确认输入格式：在 颜色转换 中按提示格式粘贴数据（十六进制带不带 0x 前缀均可），HEX/RGB/HSL/CMYK。
  2. 选对进制/位宽：涉及位运算或整数溢出的场景，先确认位宽（8/16/32/64 位）与符号性。
  3. 读结果：结果区同时给出多种表示（十进制/十六进制/二进制），便于交叉核对。
  4. 边界自查：接近位宽上限的值注意溢出回绕；颜色转换 会在溢出时给出标注。

核心要点

  • 位宽与符号性决定边界：32 位有符号整数范围 −2147483648–2147483647，无符号 0–4294967295；超界发生回绕而非报错。
  • 进制只是表示法：同一数值在不同进制下字面量不同但值相等；颜色转换 的多进制联显可直观验证这一点。
  • 浮点的二进制本质：0.1+0.2 ≠ 0.3 源于 IEEE 754 双精度无法精确表示 0.1，涉及金额请转为"分"的整数运算。
  • 编码与字节序：文本按 UTF-8 处理（变长 1–4 字节），中文常见汉字占 3 字节；字节序（大小端）影响多字节整数的内存表示。

原理与公式

颜色模型换算：

HEX ↔ RGB：十六进制按两位分段解析
RGB → CMYK：K = 1 − max(R,G,B)/255；C/M/Y 按 (1−分量−K)÷(1−K) 计算
RGB ↔ HSL：基于 max/min 分量求 H/S/L

应用场景：CMYK 用于印刷四色，HSL 便于调整明暗与饱和度，HEX/RGB 用于屏幕显示。

注意：屏幕色域(sRGB)与印刷色域(CMYK)不完全重合，亮色印刷会偏灰。

常见问题

支持多大的数值？
整数支持到 JavaScript 安全整数 2^53−1（9007199254740991）；更大数值精度受限，结果会标注。
0.1 + 0.2 为什么不等于 0.3？
IEEE 754 双精度浮点的二进制表示误差，是所有语言共有的现象；显示层 颜色转换 会按精度规则圆整到可读位数。
十六进制要带 0x 前缀吗？
可不带。颜色转换 按选定进制解析输入；混用多进制输入时前缀（0x/0b/0o）优先于选择器。
UTF-8 下一个汉字几个字节？
常见汉字（基本区）3 字节，生僻字（扩展区）4 字节，ASCII 字符 1 字节——与 GBK 的固定双字节不同。
位运算结果是负数怎么回事？
有符号整数的位模式按补码解释，最高位为 1 时表示负数；查看二进制表示即可理解符号位的来源。

相关工具

相关指南

来源与更新

开发者工具领域的标准计算公式。所有计算逻辑经过验证。最近更新：2025-07

最近更新：

本页公式与内容经一键算团队复核，仅供学习参考，实际业务请以官方口径为准。

内容由一键算编辑团队维护并定期复核，更新与审核流程见编辑规范。

引用本页：一键算. 颜色转换[EB/OL]. https://www.yijiansuan.com/c/dev/dev-color

本工具提供的结果仅供参考，不构成任何专业建议，请以官方核算为准。