简单易用的颜色选择工具

介绍

颜色选择工具是一款直观、易于使用的应用程序，旨在帮助用户选择、可视化并在多种颜色格式之间转换颜色。无论您是创建配色方案的网页设计师、寻找完美色调的数字艺术家，还是实施用户界面的开发人员，这款颜色选择器都提供了一种简单的方法来处理RGB、十六进制、CMYK和HSV格式的颜色。凭借其互动的颜色光谱、亮度滑块和精确的输入选项，您可以快速找到、调整并复制项目所需的颜色值。

理解颜色模型

在深入了解如何使用颜色选择器之前，了解它支持的不同颜色模型是有帮助的：

RGB（红、绿、蓝）

RGB是一种加法颜色模型，其中红、绿和蓝光以不同方式组合以重现广泛的颜色。在数字应用中：

每个组件（R、G、B）的范围为0到255
RGB(255, 0, 0)表示纯红色
RGB(0, 255, 0)表示纯绿色
RGB(0, 0, 255)表示纯蓝色
RGB(255, 255, 255)表示白色
RGB(0, 0, 0)表示黑色

RGB模型与颜色在屏幕上的显示方式直接相关，使其成为数字设计的主要选择。

十六进制（Hex）

十六进制颜色代码是一种使用基数16数字系统表示RGB颜色的方法：

十六进制颜色以井号（#）开头，后跟六个字符
第一对表示红色，第二对表示绿色，第三对表示蓝色
每对的范围从00到FF（十进制的0-255）
#FF0000表示纯红色
#00FF00表示纯绿色
#0000FF表示纯蓝色
某些颜色可以使用简写表示（例如，#F00表示红色）

十六进制代码在网页开发（CSS、HTML）和数字设计应用程序中被广泛使用。

CMYK（青、品红、黄、黑）

CMYK是一种主要用于彩色打印的减法颜色模型：

每个组件的范围为0%到100%
CMYK(0, 100, 100, 0)表示纯红色
CMYK(100, 0, 100, 0)表示纯绿色
CMYK(100, 100, 0, 0)表示纯蓝色
CMYK(0, 0, 0, 100)表示黑色
CMYK(0, 0, 0, 0)表示白色（纸张颜色）

虽然主要用于打印，但理解CMYK值在设计最终将被打印的内容时是有帮助的。

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

HSV以以下方式表示颜色：

色相：颜色类型（红色、黄色、绿色等），以度数（0-360°）为单位测量
饱和度：颜色的强度或纯度（0-100%）
明度：颜色的亮度（0-100%）

HSV特别适合颜色选择，因为它将颜色选择（色相）与其强度（饱和度）和亮度（明度）分开，使调整颜色更加直观。

颜色转换公式

颜色选择器通过以下数学公式自动在不同颜色模型之间进行转换：

RGB到Hex转换

要将RGB转换为十六进制：

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

$\text{Hex} = \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.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
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

参考文献

Agoston, M. K. (2013). 计算机图形学与几何建模：实现与算法. Springer Science & Business Media.
Adobe Systems. (2000). Adobe RGB（1998）颜色图像编码. Adobe Systems Incorporated.
Fairchild, M. D. (2013). 颜色外观模型. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). 测量颜色. John Wiley & Sons.
Poynton, C. (2012). 数字视频与高清：算法与接口. Elsevier.
W3C. (2018). CSS颜色模块第4版. W3C工作草案。检索自 https://www.w3.org/TR/css-color-4/
Web内容无障碍指南（WCAG）2.1. (2018). 检索自 https://www.w3.org/TR/WCAG21/
国际颜色委员会。 (2004). 规范ICC.1:2004-10（配置文件版本4.2.0.0）。检索自 http://www.color.org/specification/ICC1v42_2006-05.pdf

今天就试试我们的颜色选择器吧！

准备好为您的项目找到完美的颜色了吗？我们的用户友好颜色选择器使选择、调整和在不同格式之间转换颜色变得简单。无论您是在设计网站、创建数字艺术还是规划打印材料，我们的工具都提供了您所需的精确度和灵活性。

立即开始尝试颜色，将您的设计提升到一个新的水平！

Whiz Tools

简单的颜色选择器：选择并复制 RGB、Hex、CMYK 颜色值

颜色选择器

RGB (0-255)

CMYK (0-100)