เครื่องเลือกสีที่ง่าย: เลือกและคัดลอกค่า RGB, Hex, CMYK

เครื่องเลือกสีที่ใช้งานง่ายพร้อมการแสดงสเปกตรัมแบบโต้ตอบและแถบปรับความสว่าง เลือกสีแบบเห็นภาพหรือป้อนค่าที่แน่นอนในรูปแบบ RGB, Hex หรือ CMYK คัดลอกโค้ดสีด้วยการคลิกเพียงครั้งเดียวสำหรับโครงการออกแบบของคุณ

ตัวเลือกสี

สี Hex

RGB (0-255)

แดง (R)

เขียว (G)

น้ำเงิน (B)

CMYK (0-100)

ฟ้า (C)

ม่วง (M)

เหลือง (Y)

ดำ (K)

ตัวเลือกสี

100%

📚

เอกสารประกอบ

เรียบง่ายและใช้งานง่าย เครื่องมือเลือกสี

บทนำ

เครื่องมือเลือกสี เป็นแอปพลิเคชันที่ใช้งานง่ายและเข้าใจได้ง่าย ซึ่งออกแบบมาเพื่อช่วยให้ผู้ใช้เลือก สี, แสดงผล และแปลงสีในหลายรูปแบบ ไม่ว่าคุณจะเป็นนักออกแบบเว็บที่สร้างชุดสี, ศิลปินดิจิทัลที่กำลังมองหาสีที่สมบูรณ์แบบ, หรือ นักพัฒนาที่นำไปใช้ในส่วนติดต่อผู้ใช้ เครื่องมือเลือกสีนี้ให้วิธีการที่ตรงไปตรงมาในการทำงานกับสีในรูปแบบ 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)

รหัสสีเฮกซาเดซิมัลเป็นวิธีการแทนสี RGB โดยใช้ระบบการนับฐาน 16:

สีเฮกซาเดซิมัลเริ่มต้นด้วยเครื่องหมายปอนด์ (#) ตามด้วยตัวอักษรหกตัว
คู่แรกแทนสีแดง, คู่ที่สองแทนสีเขียว, และคู่ที่สามแทนสีน้ำเงิน
แต่ละคู่มีค่าตั้งแต่ 00 ถึง FF (0-255 ในฐานสิบ)
#FF0000 แสดงถึงสีแดงบริสุทธิ์
#00FF00 แสดงถึงสีเขียวบริสุทธิ์
#0000FF แสดงถึงสีน้ำเงินบริสุทธิ์
มีการใช้รูปแบบย่อสำหรับสีบางสี (เช่น #F00 สำหรับสีแดง)

รหัส Hex เป็นที่นิยมใช้ในพัฒนาเว็บ (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)
คำนวณ 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 to Hex conversion
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 to RGB conversion
12function hexToRgb(hex) {
13  // Remove # if present
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Handle both 3-digit and 6-digit hex
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 to CMYK conversion
29function rgbToCmyk(r, g, b) {
30  // Normalize RGB values
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Calculate K (black)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Handle pure black
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Calculate 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// Example usage
57const rgb = { r: 255, g: 0, b: 0 }; // Pure red
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB to Hex conversion
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex to RGB conversion
6def hex_to_rgb(hex_color):
7    # Remove # if present
8    hex_color = hex_color.lstrip('#')
9    
10    # Handle both 3-digit and 6-digit hex
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 to CMYK conversion
21def rgb_to_cmyk(r, g, b):
22    # Normalize RGB values
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Calculate K (black)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Handle pure black
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Calculate 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# Example usage
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Sky blue
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 to Hex conversion
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 to RGB conversion
8    public static int[] hexToRgb(String hexColor) {
9        // Remove # if present
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Handle both 3-digit and 6-digit hex
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 to CMYK conversion
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalize RGB values
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Calculate K (black)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Handle pure black
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Calculate 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        // Example usage
60        int r = 75, g = 0, b = 130;  // Purple
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). Computer Graphics and Geometric Modeling: Implementation and Algorithms. Springer Science & Business Media.
Adobe Systems. (2000). Adobe RGB (1998) Color Image Encoding. Adobe Systems Incorporated.
Fairchild, M. D. (2013). Color Appearance Models. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). Measuring Colour. John Wiley & Sons.
Poynton, C. (2012). Digital Video and HD: Algorithms and Interfaces. Elsevier.
W3C. (2018). CSS Color Module Level 4. W3C Working Draft. Retrieved from https://www.w3.org/TR/css-color-4/
Web Content Accessibility Guidelines (WCAG) 2.1. (2018). Retrieved from https://www.w3.org/TR/WCAG21/
International Color Consortium. (2004). Specification ICC.1:2004-10 (Profile version 4.2.0.0). Retrieved from http://www.color.org/specification/ICC1v42_2006-05.pdf

ลองใช้เครื่องมือเลือกสีของเราในวันนี้!

พร้อมที่จะค้นหาสีที่สมบูรณ์แบบสำหรับโปรเจกต์ของคุณหรือยัง? เครื่องมือเลือกสีที่ใช้งานง่ายของเราทำให้การเลือก, ปรับแต่ง, และแปลงสีระหว่างรูปแบบต่าง ๆ เป็นเรื่องง่าย ไม่ว่าคุณจะออกแบบเว็บไซต์, สร้างงานศิลปะดิจิทัล, หรือวางแผนวัสดุการพิมพ์ เครื่องมือของเรามีความแม่นยำและความยืดหยุ่นที่คุณต้องการ

เริ่มทดลองกับสีตอนนี้และยกระดับการออกแบบของคุณไปอีกระดับ!

💬

ข้อเสนอแนะแสดงความคิดเห็น

💬

คลิกที่ข้อเสนอแนะแสดงความคิดเห็นเพื่อเริ่มให้ข้อเสนอแนะแก่เครื่องมือนี้

🔗

เครื่องมือที่เกี่ยวข้อง

ค้นพบเครื่องมือเพิ่มเติมที่อาจมีประโยชน์สำหรับการทำงานของคุณ

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

ลองเครื่องมือนี้