Alat Pemilih Warna yang Mudah dan Mesra Pengguna

Pengenalan

Alat Pemilih Warna adalah aplikasi yang intuitif dan mudah digunakan yang direka untuk membantu pengguna memilih, memvisualisasikan, dan menukar warna dalam pelbagai format warna. Sama ada anda seorang pereka web yang mencipta skema warna, seorang artis digital yang mencari bayangan yang sempurna, atau seorang pemaju yang melaksanakan antara muka pengguna, pemilih warna ini menyediakan cara yang mudah untuk bekerja dengan warna dalam format RGB, Heksadesimal, CMYK, dan HSV. Dengan spektrum warna interaktif, penggeser kecerahan, dan pilihan input yang tepat, anda boleh dengan cepat mencari, menyesuaikan, dan menyalin nilai warna untuk projek anda.

Memahami Model Warna

Sebelum menyelami cara menggunakan pemilih warna, adalah berguna untuk memahami pelbagai model warna yang disokong:

RGB (Merah, Hijau, Biru)

RGB adalah model warna aditif di mana cahaya merah, hijau, dan biru digabungkan dalam pelbagai cara untuk menghasilkan pelbagai warna. Dalam aplikasi digital:

Setiap komponen (R, G, B) berkisar dari 0 hingga 255
RGB(255, 0, 0) mewakili merah tulen
RGB(0, 255, 0) mewakili hijau tulen
RGB(0, 0, 255) mewakili biru tulen
RGB(255, 255, 255) mewakili putih
RGB(0, 0, 0) mewakili hitam

Model RGB berkaitan secara langsung dengan cara warna dipaparkan pada skrin, menjadikannya pilihan utama untuk reka bentuk digital.

Heksadesimal (Hex)

Kod warna heksadesimal adalah cara untuk mewakili warna RGB menggunakan sistem penomboran asas-16:

Warna hex bermula dengan tanda pagar (#) diikuti oleh enam aksara
Pasangan pertama mewakili merah, pasangan kedua hijau, dan pasangan ketiga biru
Setiap pasangan berkisar dari 00 hingga FF (0-255 dalam perpuluhan)
#FF0000 mewakili merah tulen
#00FF00 mewakili hijau tulen
#0000FF mewakili biru tulen
Notasi pendek tersedia untuk warna tertentu (contohnya, #F00 untuk merah)

Kod hex digunakan secara meluas dalam pembangunan web (CSS, HTML) dan aplikasi reka bentuk digital.

CMYK (Sian, Magenta, Kuning, Kunci/Hitam)

CMYK adalah model warna pengurangan yang digunakan terutamanya dalam percetakan warna:

Setiap komponen berkisar dari 0% hingga 100%
CMYK(0, 100, 100, 0) mewakili merah tulen
CMYK(100, 0, 100, 0) mewakili hijau tulen
CMYK(100, 100, 0, 0) mewakili biru tulen
CMYK(0, 0, 0, 100) mewakili hitam
CMYK(0, 0, 0, 0) mewakili putih (warna kertas)

Walaupun digunakan terutamanya untuk percetakan, memahami nilai CMYK boleh berguna apabila merancang kandungan yang akhirnya akan dicetak.

HSV (Hue, Ketepuan, Nilai)

HSV mewakili warna dalam terma:

Hue: Jenis warna (merah, kuning, hijau, dll.), diukur dalam darjah (0-360°)
Ketepuan: Intensiti atau kesucian warna (0-100%)
Nilai: Kecerahan warna (0-100%)

HSV sangat berguna untuk pemilihan warna kerana ia memisahkan pilihan warna (hue) dari intensiti (ketepuan) dan kecerahan (nilai), menjadikannya lebih intuitif untuk menyesuaikan warna.

Formula Penukaran Warna

Pemilih warna secara automatik menukar antara pelbagai model warna menggunakan formula matematik ini:

Penukaran RGB ke Hex

Untuk menukar RGB ke heksadesimal:

Tukar setiap komponen RGB (0-255) ke nombor heksadesimal dua digit
Gabungkan tiga nilai heksadesimal dengan awalan #

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

Di mana toHex() menukar nombor perpuluhan kepada representasi heksadesimalnya.

Penukaran RGB ke CMYK

Penukaran dari RGB ke CMYK melibatkan langkah-langkah ini:

Normalisasikan nilai RGB ke julat 0-1
Kira komponen kunci hitam (K)
Kira C, M, dan Y berdasarkan 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\%$

Penukaran RGB ke HSV

Menukar RGB ke 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}$

Untuk Hue (H):

1// Penukaran RGB ke 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// Penukaran Hex ke RGB
12function hexToRgb(hex) {
13  // Buang # jika ada
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Tangani hex 3-digit dan 6-digit
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// Penukaran RGB ke CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalisasikan nilai RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Kira K (hitam)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Tangani hitam tulen
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Kira 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// Contoh penggunaan
57const rgb = { r: 255, g: 0, b: 0 }; // Merah tulen
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Penukaran RGB ke Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Penukaran Hex ke RGB
6def hex_to_rgb(hex_color):
7    # Buang # jika ada
8    hex_color = hex_color.lstrip('#')
9    
10    # Tangani hex 3-digit dan 6-digit
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# Penukaran RGB ke CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalisasikan nilai RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Kira K (hitam)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Tangani hitam tulen
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Kira 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# Contoh penggunaan
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Biru langit
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    // Penukaran RGB ke 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    // Penukaran Hex ke RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Buang # jika ada
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Tangani hex 3-digit dan 6-digit
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    // Penukaran RGB ke CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalisasikan nilai RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Kira K (hitam)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Tangani hitam tulen
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Kira 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        // Contoh penggunaan
60        int r = 75, g = 0, b = 130;  // Ungu
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

Rujukan

Agoston, M. K. (2013). Grafik Komputer dan Pemodelan Geometrik: Pelaksanaan dan Algoritma. Springer Science & Business Media.
Adobe Systems. (2000). Pewarna Adobe RGB (1998) untuk Imej. Adobe Systems Incorporated.
Fairchild, M. D. (2013). Model Penampilan Warna. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). Mengukur Warna. John Wiley & Sons.
Poynton, C. (2012). Video Digital dan HD: Algoritma dan Antaramuka. Elsevier.
W3C. (2018). Modul Warna CSS Tahap 4. Draf Kerja W3C. Diperoleh dari https://www.w3.org/TR/css-color-4/
Garis Panduan Aksesibiliti Kandungan Web (WCAG) 2.1. (2018). Diperoleh dari https://www.w3.org/TR/WCAG21/
Konsortium Warna Antarabangsa. (2004). Spesifikasi ICC.1:2004-10 (Versi Profil 4.2.0.0). Diperoleh dari http://www.color.org/specification/ICC1v42_2006-05.pdf

Cubalah Pemilih Warna Kami Hari Ini!

Bersedia untuk mencari warna yang sempurna untuk projek anda? Pemilih warna kami yang mesra pengguna memudahkan anda memilih, menyesuaikan, dan menukar warna antara format yang berbeza. Sama ada anda merancang laman web, mencipta seni digital, atau merancang bahan cetakan, alat kami menyediakan ketepatan dan fleksibiliti yang anda perlukan.

Mulakan eksperimen dengan warna sekarang dan tingkatkan reka bentuk anda ke tahap seterusnya!

Whiz Tools

Pemilih Warna Mudah: Pilih & Salin Nilai Warna RGB, Hex, CMYK

Pemilih Warna

RGB (0-255)

CMYK (0-100)