Công Cụ Chọn Màu - Chuyển Đổi Mã Màu RGB, Hex, CMYK & HSV

Những Việc Bạn Có Thể Làm Với Trình Chọn Màu Này

Cần một sắc thái hoàn hảo cho dự án của bạn? Trình chọn màu này cho phép bạn chọn, xem trước và chuyển đổi màu giữa các định dạng RGB, Hex, CMYK và HSV một cách tức thời. Cho dù bạn đang viết mã cho một trang web, thiết kế logo, hay chuẩn bị tệp để in ấn, bạn sẽ tìm thấy các giá trị màu chính xác mà mình cần—không cần đoán mò, không cần chuyển đổi giữa các công cụ.

Nhấp vào bất kỳ đâu trên phổ màu để chọn một sắc thái, điều chỉnh độ sáng bằng thanh trượt, hoặc nhập các giá trị chính xác trực tiếp. Mọi định dạng đều được cập nhật theo thời gian thực, và bạn có thể sao chép bất kỳ mã màu nào chỉ bằng một cú nhấp chuột.

Hiểu về Mô Hình Màu

Các dự án khác nhau cần các định dạng màu khác nhau. Dưới đây là những gì mỗi mô hình làm và khi nào nên sử dụng:

RGB (Đỏ, Xanh Lá, Xanh Dương)

RGB hoạt động bằng cách trộn ánh sáng đỏ, xanh lá và xanh dương—giống cách màn hình của bạn hiển thị màu ngay bây giờ. Mỗi thành phần dao động từ 0 đến 255:

• RGB(255, 0, 0) = đỏ thuần
• RGB(0, 255, 0) = xanh lá thuần
• RGB(0, 0, 255) = xanh dương thuần
• RGB(255, 255, 255) = trắng
• RGB(0, 0, 0) = đen

Khi nào sử dụng RGB: Bất kỳ công việc kỹ thuật số nào—trang web, ứng dụng di động, chỉnh sửa video, hoặc đồ họa dựa trên màn hình. Đây là ngôn ngữ gốc của các màn hình, đó là lý do tại sao các công cụ như CSS hỗ trợ trực tiếp các hàm rgb() và rgba(). Theo thông số kỹ thuật Mô-đun Màu CSS của W3C, RGB là mô hình màu cơ bản cho các tiêu chuẩn web.

Hệ Thập Lục Phân (Hex)

Mã Hex chỉ là các giá trị RGB được viết ở hệ cơ số 16 thay vì hệ cơ số 10. Một màu hex trông như #FF5733, trong đó:

• Ký hiệu # đánh dấu nó là mã hex
• Hai ký tự đầu tiên = đỏ (00-FF)
• Hai ký tự ở giữa = xanh lá (00-FF)
• Hai ký tự cuối = xanh dương (00-FF)
• #FF0000 = đỏ, #00FF00 = xanh lá, #0000FF = xanh dương

Đôi khi bạn sẽ thấy ký hiệu viết tắt 3 ký tự như #F00 thay vì #FF0000—điều này hoạt động khi mỗi kênh màu lặp lại cùng một chữ số.

Khi nào sử dụng Hex: Phát triển web là trường hợp sử dụng chính. CSS luôn hỗ trợ ký hiệu hex, và hầu hết các nhà phát triển thấy việc gõ nhanh hơn so với rgb(). Một điểm cần chú ý: quên ký hiệu # sẽ làm hỏng các kiểu của bạn một cách âm thầm, vì các trình duyệt sẽ không nhận ra nó như một màu hợp lệ.

CMYK (Xanh Lơ, Đỏ Tươi, Vàng, Đen/Khóa)

CMYK là mô hình màu được sử dụng bởi các máy in. Không giống như RGB (thêm ánh sáng), CMYK loại bỏ ánh sáng—trộn mực trên giấy trắng để tạo màu:

• Mỗi thành phần dao động từ 0% đến 100%
• CMYK(0, 100, 100, 0) = đỏ
• CMYK(100, 0, 100, 0) = xanh lá
• CMYK(0, 0, 0, 100) = mực đen thuần
• CMYK(0, 0, 0, 0) = không có mực (giấy trắng hiện ra)

Khi nào sử dụng CMYK: Thiết kế cho in ấn—danh thiếp, tờ rơi, tạp chí, bao bì. Đây là sự thực: nhiều màu RGB sáng sẽ không thể tái tạo được bằng mực CMYK. Màu xanh dương điện sáng bạn thấy trên màn hình? Nó sẽ trông mờ hơn khi in. Các nhà thiết kế chuyên nghiệp luôn xem trước các chuyển đổi CMYK trước khi gửi tệp đến máy in để tránh những bất ngờ.

HSV (Sắc Độ, Độ Bão Hòa, Giá Trị)

HSV chia màu thành ba thành phần trực quan:

• Sắc Độ: Nhóm màu nào (0-360°)—0° là đỏ, 120° là xanh lá, 240° là xanh dương
• Độ Bão Hòa: Mức độ sống động hay xám (0-100%)—0% là thang độ xám, 100% là bão hòa hoàn toàn
• Giá Trị: Mức độ sáng hay tối (0-100%)—0% là đen, 100% là độ sáng tối đa

Tại sao HSV quan trọng: Nó phù hợp với cách con người tự nhiên nghĩ về màu. Muốn một màu xanh dương tối hơn? Giảm giá trị. Muốn một màu xanh dương ít sống động hơn? Giảm độ bão hòa. Điều này làm cho HSV lý tưởng cho các bộ chọn màu tương tác như thế này, nơi bạn chọn một sắc độ trên phổ và điều chỉnh độ sáng bằng một thanh trượt.

Công thức Chuyển đổi Màu

Trình chọn màu tự động chuyển đổi giữa các mô hình màu khác nhau bằng các công thức toán học này:

Chuyển đổi RGB sang Hex

Để chuyển đổi RGB sang thập lục phân:

1. Chuyển đổi từng thành phần RGB (0-255) thành số thập lục phân hai chữ số
2. Nối ba giá trị thập lục phân với tiền tố #

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Trong đó toHex() chuyển đổi một số thập phân thành biểu diễn thập lục phân của nó.

Chuyển đổi RGB sang CMYK

Việc chuyển đổi từ RGB sang CMYK bao gồm các bước sau:

1. Chuẩn hóa các giá trị RGB về phạm vi 0-1
2. Tính thành phần khóa đen (K)
3. Tính C, M và Y dựa trên K

$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\%$

Chuyển đổi RGB sang HSV

Chuyển đổi RGB sang 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}$

Đối với Hue (H):

undefined

1// Chuyển đổi RGB sang 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// Chuyển đổi Hex sang RGB
12function hexToRgb(hex) {
13  // Loại bỏ # nếu có
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Xử lý hex 3 và 6 chữ số
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// Chuyển đổi RGB sang CMYK
29function rgbToCmyk(r, g, b) {
30  // Chuẩn hóa giá trị RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Tính K (đen)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Xử lý màu đen thuần
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Tính 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// Ví dụ sử dụng
57const rgb = { r: 255, g: 0, b: 0 }; // Đỏ thuần
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Chuyển đổi RGB sang Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Chuyển đổi Hex sang RGB
6def hex_to_rgb(hex_color):
7    # Loại bỏ # nếu có
8    hex_color = hex_color.lstrip('#')
9    
10    # Xử lý hex 3 và 6 chữ số
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# Chuyển đổi RGB sang CMYK
21def rgb_to_cmyk(r, g, b):
22    # Chuẩn hóa giá trị RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Tính K (đen)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Xử lý màu đen thuần
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Tính 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# Ví dụ sử dụng
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Xanh dương
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    // Chuyển đổi RGB sang 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    // Chuyển đổi Hex sang RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Loại bỏ # nếu có
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Xử lý hex 3 và 6 chữ số
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    // Chuyển đổi RGB sang CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Chuẩn hóa giá trị RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Tính K (đen)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Xử lý màu đen thuần
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Tính 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        // Ví dụ sử dụng
60        int r = 75, g = 0, b = 130;  // Tím
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

Tài liệu tham khảo và Đọc thêm

• Mô-đun Màu CSS W3C Cấp 4 - Thông số kỹ thuật màu web chính thức
• Hướng dẫn Độ tương phản WCAG 2.1 - Tiêu chuẩn khả năng truy cập cho độ tương phản màu
• Trình kiểm tra Độ tương phản WebAIM - Kiểm tra tỷ lệ độ tương phản màu
• Tiêu chuẩn Hồ sơ Màu ICC - Thông số kỹ thuật chuyển đổi màu
• Tài liệu Web MDN: Giá trị Màu CSS - Hướng dẫn toàn diện về định dạng màu web