อะไรคือความแตกต่างระหว่าง RGB และ CMYK?

RGB ใช้สำหรับหน้าจอ CMYK ใช้สำหรับการพิมพ์ หน้าจอสร้างสีโดยการปล่อยแสงสีแดง เขียว และน้ำเงิน (การผสมแบบบวก) ในขณะที่เครื่องพิมพ์สร้างสีโดยการซ้อนทับหมึกสีฟ้า แดง เหลือง และดำบนกระดาษ (การผสมแบบลบ) RGB สามารถสร้างสีที่สดใสและสดมากกว่า CMYK เนื่องจากแสงมีช่วงสีที่กว้างกว่าหมึก นั่นเป็นเหตุผลว่าทำไมสีบนหน้าจอของคุณจึงดูซีดจางเมื่อพิมพ์ออกมา

ทำไมสีของฉันจึงดูแตกต่างเมื่อพิมพ์?

หน้าจอปล่อยแสง กระดาษสะท้อนแสง—เป็นกระบวนการที่แตกต่างกันโดยพื้นฐาน นอกจากนี้ RGB รองรับสีหลายล้านสีที่หมึก CMYK ไม่สามารถทำซ้ำได้ การปรับเทียบหน้าจอ คุณภาพกระดาษ และความแตกต่างของหมึกยังเพิ่มความแปรปรวนมากขึ้น ตรวจสอบค่า CMYK ก่อนการพิมพ์เสมอ และขอหลักฐานทางกายภาพสำหรับงานที่ต้องจับคู่สีอย่างแม่นยำ

ฉันจะได้รหัสเลขฐานสิบหกจากสีที่เห็นออนไลน์ได้อย่างไร?

ใช้เครื่องมือนักพัฒนาของเบราว์เซอร์ ใน Chrome หรือ Firefox คลิกขวาที่องค์ประกอบใดๆ เลือก "ตรวจสอบ" แล้วคลิกที่สี่เหลี่ยมเล็กๆ ในแผงสไตล์ นี่จะเปิดตัวเลือกสีที่แสดงรหัสเลขฐานสิบหก ส่วนขยายเบราว์เซอร์เช่น ColorZilla ทำให้กระบวนการนี้เร็วยิ่งขึ้น—พวกมันให้คุณคลิกที่ใดก็ได้บนหน้าเพื่อดึงค่าสี

สัญลักษณ์ # หมายถึงอะไรในรหัสเลขฐานสิบหก?

เป็นเพียงคำนำหน้าที่บอกเบราว์เซอร์ว่า "นี่คือรหัสสีเลขฐานสิบหก" มาตรฐานนี้มาจากข้อกำหนด HTML และ CSS ในยุคแรก อักขระ 6 ตัวหลัง # แสดงถึงค่า RGB ในฐาน 16: สองหลักสำหรับแดง สองสำหรับเขียว สองสำหรับน้ำเงิน หากไม่มี # เบราว์เซอร์จะไม่รู้จักว่าเป็นสี

ทำไมรหัสเลขฐานสิบหก 3 หลักจึงใช้งานได้?

เป็นทางลัดสำหรับเมื่อแต่ละช่องสีซ้ำกัน #F00 ขยายเป็น #FF0000 (แดง) #C9C กลายเป็น #CC99CC (ม่วงอ่อน) ทางลัดนี้ถูกสร้างขึ้นในทศวรรษ 1990 เพื่อลดขนาดไฟล์เมื่อแบนด์วิดท์มีราคาแพง ปัจจุบันยังคงสะดวกสำหรับสีง่ายๆ

การแปลงสีแม่นยำหรือไม่?

การแปลง RGB เป็นเลขฐานสิบหกมีความแม่นยำทางคณิตศาสตร์—เป็นค่าเดียวกันในฐานตัวเลขที่ต่างกัน การแปลง RGB เป็น CMYK เป็นเพียงการประมาณเนื่องจากคุณกำลังแปลงระหว่างพื้นที่สีที่แตกต่างกันโดยพื้นฐาน (แสงกับหมึก) เครื่องมือใช้มาตรฐาน ICC color profile สำหรับการแปลงเหล่านี้ ซึ่งเป็นวิธีเดียวกับซอฟต์แวร์การออกแบบมืออาชีพ

ฉันจะสร้างการผสมสีที่เข้าถึงได้อย่างไร?

ใช้เครื่องตรวจสอบความคมชัดเช่น เครื่องมือของ WebAIM หลังจากเลือกสี คุณต้องการอัตราส่วน 4.5:1 สำหรับข้อความปกติ 3:1 สำหรับข้อความขนาดใหญ่ หลีกเลี่ยงการผสมสีแดง-เขียว (ยากที่สุดสำหรับผู้ที่มีความบกพร่องทางสี) เมื่อไม่แน่ใจ ให้ใช้ข้อความสีเข้มบนพื้นหลังสีอ่อนหรือในทางกลับกัน—ความแตกต่างของความสว่างที่เพียงพอเป็นสิ่งสำคัญที่สุด

ฉันสามารถเลือกสีจากรูปภาพได้หรือไม่?

ไม่สามารถทำได้โดยตรงในเครื่องมือนี้ ใช้ส่วนขยายเบราว์เซอร์เช่น ColorZilla หรือจับภาพหน้าจอแล้วใช้เครื่องมือเลือกสีของระบบปฏิบัติการ (Digital Color Meter บน macOS, PowerToys Color Picker บน Windows) เมื่อคุณได้ค่าสีแล้ว ให้ป้อนที่นี่เพื่อแปลงระหว่างรูปแบบ

ทำไมสี RGB บางสีไม่สามารถแปลงเป็น CMYK ได้ดี?

CMYK มี "แกมมัท" (ช่วงของสีที่สามารถทำซ้ำได้) แคบกว่า RGB สีน้ำเงินสดใส สีเขียวสดใส และสีส้มไฟฟ้ามักจะอยู่นอกเหนือสิ่งที่หมึก CMYK สามารถสร้างได้ทางกายภาพ เมื่อเกิดเหตุการณ์นี้ เครื่องพิมพ์จะแทนที่ด้วยสีที่ใกล้เคียงที่สุด ซึ่งมักจะดูซีดจาง นักออกแบบการพิมพ์มืออาชีพมักเริ่มต้นด้วยสีที่ปลอดภัยสำหรับ CMYK เพื่อหลีกเลี่ยงปัญหานี้

เครื่องมือเลือกสี - แปลงรหัสสี RGB, เลขฐานสิบหก, CMYK และ HSV

สิ่งที่คุณสามารถทำได้กับเครื่องมือเลือกสี

ต้องการเฉดสีที่สมบูรณ์แบบสำหรับโปรเจ็กต์ของคุณหรือไม่? เครื่องมือเลือกสี นี้ช่วยให้คุณสามารถเลือก แสดงตัวอย่าง และแปลงสีระหว่างรูปแบบ RGB, Hex, 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 เป็นโมเดลสีพื้นฐานสำหรับมาตรฐานเว็บ

เลขฐานสิบหก (Hex)

รหัสเลขฐานสิบหก เป็นเพียงค่า RGB ที่เขียนในฐาน 16 แทนฐาน 10 สีเลขฐานสิบหกจะมีลักษณะเช่น #FF5733 โดยที่:

สัญลักษณ์ # บ่งบอกว่าเป็นรหัสเลขฐานสิบหก
สองตัวอักษรแรก = แดง (00-FF)
สองตัวอักษรตรงกลาง = เขียว (00-FF)
สองตัวอักษรสุดท้าย = น้ำเงิน (00-FF)
#FF0000 = แดง, #00FF00 = เขียว, #0000FF = น้ำเงิน

บางครั้งคุณจะเห็นรูปแบบย่อ 3 ตัวอักษรเช่น #F00 แทน #FF0000—นี่ใช้ได้เมื่อแต่ละช่องสีซ้ำตัวอักษรเดียวกัน

เมื่อไรควรใช้ Hex: การพัฒนาเว็บเป็นกรณีการใช้งานหลัก CSS รองรับสัญกรณ์เลขฐานสิบหกมาโดยตลอด และนักพัฒนาส่วนใหญ่พบว่าพิมพ์ได้เร็วกว่า rgb() ข้อควรระวังทั่วไป: การลืมสัญลักษณ์ # จะทำให้สไตล์ของคุณเสียโดยไม่มีเสียง เนื่องจากเบราว์เซอร์ไม่รู้จักสีนั้นเป็นสีที่ถูกต้อง

CMYK (ฟ้าเข้ม, ม่วงแดง, เหลือง, Key/ดำ)

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 สีน้ำเงินสดใสที่คุณเห็นบนหน้าจอ? มันจะดูจางลงเมื่อพิมพ์ นักออกแบบมืออาชีพมักจะแสดงตัวอย่างการแปลง CMYK ก่อนส่งไฟล์ไปยังเครื่องพิมพ์เพื่อหลีกเลี่ยงความประหลาดใจ

HSV (เฉดสี, ความอิ่มตัว, ค่า)

HSV แบ่งสีออกเป็นสามส่วนประกอบที่เข้าใจง่าย:

เฉดสี: กลุ่มสีใด (0-360°)—0° คือแดง, 120° คือเขียว, 240° คือน้ำเงิน
ความอิ่มตัว: มีชีวิตชีวาหรือเทา (0-100%)—0% คือระดับเทา, 100% คือความอิ่มตัวเต็มที่
ค่า: สว่างหรือมืด (0-100%)—0% คือดำ, 100% คือความสว่างเต็มที่

ทำไม HSV จึงสำคัญ: มันตรงกับวิธีที่มนุษย์คิดเกี่ยวกับสีตามธรรมชาติ ต้องการน้ำเงินที่มืดลง? ลดค่าลง ต้องการน้ำเงินที่น้อยลง? ลดความอิ่มตัวลง นี่ทำให้ 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)
คำนวณ C, M, และ Y ตามค่า 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\%$

การแปลง 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}$

สำหรับ Hue (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  // จัดการ hex ทั้ง 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    # จัดการ hex ทั้ง 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        // จัดการ hex ทั้ง 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 Color Module Level 4 - ข้อกำหนดสีเว็บอย่างเป็นทางการ
WCAG 2.1 Contrast Guidelines - มาตรฐานการเข้าถึงสำหรับความคมชัดของสี
WebAIM Contrast Checker - ตรวจสอบอัตราส่วนความคมชัดของสี
ICC Color Profile Standards - ข้อกำหนดทางเทคนิคสำหรับการแปลงสี
MDN Web Docs: CSS Color Values - คู่มือครอบคลุมสำหรับรูปแบบสีเว็บ

เครื่องมือเลือกสี - แปลงรหัสสี RGB, เลขฐานสิบหก, CMYK และ HSV

เครื่องเลือกสี

RGB (0-255)

CMYK (0-100)

เครื่องเลือกสี

เอกสารประกอบการใช้งาน

สิ่งที่คุณสามารถทำได้กับเครื่องมือเลือกสี

ทำความเข้าใจโมเดลสี

RGB (แดง, เขียว, น้ำเงิน)

เลขฐานสิบหก (Hex)

CMYK (ฟ้าเข้ม, ม่วงแดง, เหลือง, Key/ดำ)

HSV (เฉดสี, ความอิ่มตัว, ค่า)

การแปลงสีสูตร

การแปลง RGB เป็น Hex

การแปลง RGB เป็น CMYK

การแปลง RGB เป็น HSV

การอ้างอิงและการอ่านเพิ่มเติม

เครื่องมือสร้างพาเลตสี - สร้างชุดสีที่กลมกลืน

เครื่องมือสร้าง CSS คุณสมบัติ - เกรเดียนต์, เงา & เส้นขอบ

เครื่องมือสร้าง QR โค้ดฟรี - สร้าง QR โค้ดที่สแกนได้ทันที

เครื่องมือแปลงฐานเลข: ฐานสอง เลขฐานสิบหก เลขฐานสิบ และเลขฐานแปด

เครื่องทำนายสีขนกระต่าย – คำนวณสีขนลูกกระต่าย

เครื่องมือแปลงเลขฐานสองเป็นเลขฐานสิบ | เครื่องมือออนไลน์ฟรี

เครื่องมือแปลงหน่วย PX เป็น REM เป็น EM – เครื่องคำนวณหน่วย CSS ฟรี

เครื่องถอดรหัสภาพ Base64 | ถอดรหัสและแสดงภาพออนไลน์

เครื่องคำนวณการเจือจางน้ำยาฟอกขาว: อัตราส่วนที่แม่นยำสำหรับการทำความสะอาดอย่างปลอดภัย

เครื่องมือแปลงพิกเซลเป็นนิ้ว - เครื่องคำนวณ DPI ฟรี (2025)

เครื่องคำนวณความยาวบิตและไบต์ - เครื่องมือขนาดข้อมูลฟรี

เครื่องมือจัดรูปแบบโค้ดฟรี: ทำให้โค้ด JavaScript, Python, HTML และอื่นๆ สวยงาม