RGB和CMYK有什么区别？

RGB用于屏幕，CMYK用于印刷。屏幕通过发射红、绿、蓝光来创建颜色（加色混合），而打印机通过在纸上叠加青色、品红色、黄色和黑色墨水来创建颜色（减色混合）。由于光的色域比墨水更广，RGB可以产生比CMYK更明亮、更鲜艳的颜色。这就是为什么屏幕上的颜色打印出来时常常看起来更暗淡。

为什么打印时颜色看起来不同？

屏幕发光，纸张反射光——这是根本不同的过程。此外，RGB可以处理数百万种颜色，而CMYK墨水根本无法再现。屏幕校准、纸张质量和墨水变化会增加更多变数。打印前务必检查CMYK值，并为关键色彩匹配工作索取实物样稿。

如何获取在线颜色的十六进制代码？

使用浏览器的开发者工具。在Chrome或Firefox中，右键单击任何元素，选择"检查"，然后点击样式面板中的小颜色方块。这将打开一个颜色选择器，显示十六进制代码。像ColorZilla这样的浏览器扩展可以让这个过程更快——它们允许你在页面上的任何位置点击以获取其颜色值。

十六进制代码中的#符号是什么意思？

这只是一个前缀，告诉浏览器"这是一个十六进制颜色代码"。这个标准来自早期的HTML和CSS规范。#后面的六个字符表示RGB值的十六进制（基数-16）：两位数表示红色，两位数表示绿色，两位数表示蓝色。没有#，浏览器就无法识别它是一种颜色。

为什么3位数的十六进制代码可以使用？

这是一种简写，用于每个颜色通道重复的情况。#F00扩展为#FF0000（红色），#C9C变成#CC99CC（浅紫色）。这种简写是在1990年代带宽昂贵时创建的，用于减少文件大小。对于简单颜色来说，今天仍然很方便。

颜色转换是否准确？

RGB到十六进制的转换在数学上是精确的——它们只是不同数字进制的相同值。RGB到CMYK的转换是近似值，因为你在根本不同的色彩空间（光与墨水）之间进行转换。该工具使用ICC颜色配置文件标准进行这些转换，这与专业设计软件使用的方法相同。

如何创建无障碍的颜色组合？

在这里选择颜色后，使用像WebAIM的工具这样的对比度检查器。普通文本需要4.5:1的比率，大文本需要3:1。避免红绿组合（对色盲用户最困难）。如有疑问，深色文字配浅色背景，反之亦然——重要的是要有足够的亮度差异。

我可以从图像中选择颜色吗？

在此工具中不能直接选择。使用像ColorZilla这样的浏览器扩展，或对图像进行截图，并使用操作系统的颜色选择器（macOS上的数字颜色仪，Windows上的PowerToys颜色选择器）。获得颜色值后，在此处输入以在不同格式之间转换。

为什么某些RGB颜色无法很好地转换为CMYK？

CMYK的"色域"（可再现颜色的范围）比RGB更窄。明亮的蓝色、鲜艳的绿色和电光橙色通常超出CMYK墨水可以物理创建的范围。发生这种情况时，打印机会替换最接近的可能匹配，这通常看起来不那么饱和。专业印刷设计师通常从CMYK安全颜色开始，以避免这个问题。

颜色选择器工具 - 转换RGB、十六进制、CMYK和HSV颜色代码

使用这个颜色选择器可以做什么

需要为你的项目找到完美的色调吗？这个颜色选择器让你可以即时选择、预览并在RGB、十六进制、CMYK和HSV格式之间转换颜色。无论你是在编写网站、设计标志还是准备打印文件，你都能找到所需的精确颜色值——不需要猜测，也不需要在多个工具之间切换。

点击颜色光谱的任何位置选择色调，通过滑块调整亮度，或直接输入精确的数值。每种格式都能实时更新，并且你可以通过一次点击复制任何颜色代码。

理解颜色模型

不同的项目需要不同的颜色格式。以下是每种颜色模型的作用和使用场景：

RGB（红、绿、蓝）

RGB 通过混合红、绿、蓝光来工作——就像你的屏幕现在显示颜色的方式。每个分量的范围从 0 到 255：

RGB(255, 0, 0) = 纯红色
RGB(0, 255, 0) = 纯绿色
RGB(0, 0, 255) = 纯蓝色
RGB(255, 255, 255) = 白色
RGB(0, 0, 0) = 黑色

何时使用 RGB： 任何数字作品——网站、移动应用、视频编辑或屏幕图形。它是显示设备的原生语言，这就是为什么像 CSS 这样的工具直接支持 rgb() 和 rgba() 函数。根据 W3C CSS 颜色模块规范，RGB 是 Web 标准的基础颜色模型。

十六进制（Hex）

Hex 代码只是用 16 进制而不是 10 进制写的 RGB 值。Hex 颜色看起来像 #FF5733，其中：

# 符号标记它为 Hex 代码
前两个字符 = 红色（00-FF）
中间两个 = 绿色（00-FF）
最后两个 = 蓝色（00-FF）
#FF0000 = 红色，#00FF00 = 绿色，#0000FF = 蓝色

有时你会看到 3 个字符的简写，如 #F00 代替 #FF0000——当每个颜色通道重复相同的数字时，这种写法是有效的。

何时使用 Hex： Web 开发是主要用例。CSS 一直支持 Hex 表示法，大多数开发者发现比 rgb() 输入更快。一个常见的陷阱：忘记 # 符号会悄悄地破坏你的样式，因为浏览器不会将其识别为有效颜色。

CMYK（青色、品红、黄色、键/黑色）

CMYK 是打印机使用的颜色模型。与 RGB（添加光）不同，CMYK 减去光——在白纸上混合油墨来创建颜色：

每个分量范围从 0% 到 100%
CMYK(0, 100, 100, 0) = 红色
CMYK(100, 0, 100, 0) = 绿色
CMYK(0, 0, 0, 100) = 纯黑油墨
CMYK(0, 0, 0, 0) = 无油墨（白纸显示）

何时使用 CMYK： 为印刷设计——名片、宣传册、杂志、包装。现实情况是：许多鲜艳的 RGB 颜色在 CMYK 油墨中simply无法重现。你在屏幕上看到的明亮电蓝色？打印时会显得更暗淡。专业设计师在将文件发送到打印机之前总是预览 CMYK 转换，以避免意外。

HSV（色相、饱和度、明度）

HSV 将颜色分解为三个直观的分量：

色相： 哪个颜色家族（0-360°）——0° 是红色，120° 是绿色，240° 是蓝色
饱和度： 有多鲜艳或灰暗（0-100%）——0% 是灰度，100% 是完全饱和
明度： 有多亮或暗（0-100%）——0% 是黑色，100% 是全亮度

为什么 HSV 很重要： 它符合人类自然思考颜色的方式。想要更深的蓝色？降低明度。想要不那么强烈的蓝色？降低饱和度。这使得 HSV 非常适合交互式颜色选择器，在那里你可以在光谱上选择色相，并用滑块调整亮度。

颜色转换公式

颜色选择器使用这些数学公式自动在不同的颜色模型之间进行转换：

RGB 到十六进制转换

要将 RGB 转换为十六进制：

将每个 RGB 分量（0-255）转换为两位十六进制数
将三个十六进制值与 # 前缀连接

$\text{十六进制} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

其中 toHex() 将十进制数转换为其十六进制表示。

RGB 到 CMYK 转换

从 RGB 到 CMYK 的转换涉及以下步骤：

将 RGB 值归一化到 0-1 范围
计算黑色键（K）分量
根据 K 计算 C、M 和 Y

$R' = R/255, G' = G/255, B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{(1-R'-K)}{(1-K)} \times 100\%$ $M = \frac{(1-G'-K)}{(1-K)} \times 100\%$ $Y = \frac{(1-B'-K)}{(1-K)} \times 100\%$

RGB 到 HSV 转换

将 RGB 转换为 HSV：

$R' = R/255, G' = G/255, B' = B/255$ $C_{max} = \max(R', G', B')$ $C_{min} = \min(R', G', B')$ $\Delta = C_{max} - C_{min}$

对于色相（H）：

1// RGB 转 Hex 转换
2function rgbToHex(r, g, b) {
3  const toHex = (c) => {
4    const hex = Math.round(c).toString(16);
5    return hex.length === 1 ? '0' + hex : hex;
6  };
7  
8  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
9}
10
11// Hex 转 RGB 转换
12function hexToRgb(hex) {
13  // 如果存在 # 则移除
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // 处理 3 位和 6 位十六进制
17  const expandedHex = cleanHex.length === 3 
18    ? cleanHex.split('').map(char => char + char).join('')
19    : cleanHex;
20    
21  const r = parseInt(expandedHex.substring(0, 2), 16);
22  const g = parseInt(expandedHex.substring(2, 4), 16);
23  const b = parseInt(expandedHex.substring(4, 6), 16);
24  
25  return { r, g, b };
26}
27
28// RGB 转 CMYK 转换
29function rgbToCmyk(r, g, b) {
30  // 标准化 RGB 值
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // 计算 K（黑色）
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // 处理纯黑色
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // 计算 C、M、Y
44  const c = ((1 - normalizedR - k) / (1 - k)) * 100;
45  const m = ((1 - normalizedG - k) / (1 - k)) * 100;
46  const y = ((1 - normalizedB - k) / (1 - k)) * 100;
47  
48  return {
49    c: Math.round(c),
50    m: Math.round(m),
51    y: Math.round(y),
52    k: Math.round(k * 100)
53  };
54}
55
56// 示例用法
57const rgb = { r: 255, g: 0, b: 0 }; // 纯红色
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB 转 Hex 转换
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex 转 RGB 转换
6def hex_to_rgb(hex_color):
7    # 如果存在 # 则移除
8    hex_color = hex_color.lstrip('#')
9    
10    # 处理 3 位和 6 位十六进制
11    if len(hex_color) == 3:
12        hex_color = ''.join([c*2 for c in hex_color])
13    
14    return {
15        'r': int(hex_color[0:2], 16),
16        'g': int(hex_color[2:4], 16),
17        'b': int(hex_color[4:6], 16)
18    }
19
20# RGB 转 CMYK 转换
21def rgb_to_cmyk(r, g, b):
22    # 标准化 RGB 值
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # 计算 K（黑色）
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # 处理纯黑色
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # 计算 C、M、Y
35    c = ((1 - r_norm - k) / (1 - k)) * 100
36    m = ((1 - g_norm - k) / (1 - k)) * 100
37    y = ((1 - b_norm - k) / (1 - k)) * 100
38    
39    return {
40        'c': round(c),
41        'm': round(m),
42        'y': round(y),
43        'k': round(k * 100)
44    }
45
46# 示例用法
47rgb = {'r': 0, 'g': 128, 'b': 255}  # 天蓝色
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Hex: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
53

1public class ColorConverter {
2    // RGB 转 Hex 转换
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // Hex 转 RGB 转换
8    public static int[] hexToRgb(String hexColor) {
9        // 如果存在 # 则移除
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // 处理 3 位和 6 位十六进制
15        if (hexColor.length() == 3) {
16            String expandedHex = "";
17            for (char c : hexColor.toCharArray()) {
18                expandedHex += c + String.valueOf(c);
19            }
20            hexColor = expandedHex;
21        }
22        
23        int r = Integer.parseInt(hexColor.substring(0, 2), 16);
24        int g = Integer.parseInt(hexColor.substring(2, 4), 16);
25        int b = Integer.parseInt(hexColor.substring(4, 6), 16);
26        
27        return new int[]{r, g, b};
28    }
29    
30    // RGB 转 CMYK 转换
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // 标准化 RGB 值
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // 计算 K（黑色）
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // 处理纯黑色
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // 计算 C、M、Y
46        double c = ((1 - normalizedR - k) / (1 - k)) * 100;
47        double m = ((1 - normalizedG - k) / (1 - k)) * 100;
48        double y = ((1 - normalizedB - k) / (1 - k)) * 100;
49        
50        return new double[]{
51            Math.round(c),
52            Math.round(m),
53            Math.round(y),
54            Math.round(k * 100)
55        };
56    }
57    
58    public static void main(String[] args) {
59        // 示例用法
60        int r = 75, g = 0, b = 130;  // 紫色
61        String hexColor = rgbToHex(r, g, b);
62        double[] cmyk = rgbToCmyk(r, g, b);
63        
64        System.out.println("Hex: " + hexColor);
65        System.out.printf("CMYK: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n", 
66                          cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67    }
68}
69

参考资料和延伸阅读

W3C CSS 颜色模块 4 级 - 官方网页颜色规范
WCAG 2.1 对比度指南 - 颜色对比度的无障碍标准
WebAIM 对比度检查器 - 测试颜色对比度比率
ICC 颜色配置文件标准 - 颜色转换的技术规范
MDN Web 文档：CSS 颜色值 - 网页颜色格式的综合指南

颜色选择器工具 - 转换RGB、十六进制、CMYK和HSV颜色代码