Apakah perbezaan antara RGB dan CMYK?

RGB adalah untuk skrin, CMYK adalah untuk cetak. Skrin mencipta warna dengan memancarkan cahaya merah, hijau, dan biru (percampuran aditif), manakala pencetak mencipta warna dengan melapisi tinta cyan, magenta, kuning, dan hitam pada kertas (percampuran subtraktif). RGB boleh menghasilkan warna yang lebih cerah dan lebih hidup berbanding CMYK kerana cahaya mempunyai spektrum warna yang lebih luas daripada tinta. Itulah sebabnya warna skrin anda sering kelihatan pudar apabila dicetak.

Mengapa warna saya kelihatan berbeza apabila dicetak?

Skrin memancarkan cahaya, kertas memantulkannya—proses yang sangat berbeza. Tambahan pula, RGB mengendalikan jutaan warna yang tidak dapat dihasilkan oleh tinta CMYK. Kalibrasi skrin, kualiti kertas, dan variasi tinta menambahkan lagi perbezaan. Sentiasa semak nilai CMYK sebelum mencetak, dan minta bukti fizikal untuk kerja yang memerlukan penyepadanan warna kritikal.

Bagaimana saya mendapatkan kod hex daripada warna yang saya lihat dalam talian?

Gunakan alat pembangun pelayar anda. Dalam Chrome atau Firefox, klik kanan mana-mana elemen, pilih "Inspect," kemudian klik kotak warna kecil dalam panel gaya. Ini membuka pemilih warna yang menunjukkan kod hex. Sambungan pelayar seperti ColorZilla membuatkannya lebih cepat—ia membolehkan anda mengklik di mana-mana pada halaman untuk mendapatkan nilai warnanya.

Apakah maksud simbol # dalam kod hex?

Ia hanya awalan yang memberitahu pelayar "ini adalah kod warna heksadesimal". Piawaian ini berasal dari spesifikasi HTML dan CSS awal. Enam aksara selepas # mewakili nilai RGB dalam asas-16: dua digit untuk merah, dua untuk hijau, dua untuk biru. Tanpa #, pelayar tidak akan mengenali ia sebagai warna.

Mengapa kod hex 3 digit berfungsi?

Ia adalah cara ringkas apabila setiap saluran warna berulang. #F00 berkembang menjadi #FF0000 (merah), #C9C menjadi #CC99CC (ungu muda). Cara ringkas ini dicipta pada tahun 1990-an untuk mengurangkan saiz fail apabila bandwidth mahal. Ia masih berguna hari ini untuk warna mudah.

Adakah penukaran warna tepat?

Penukaran RGB-ke-hex adalah tepat secara matematik—ia adalah nilai yang sama dalam asas nombor yang berbeza. Penukaran RGB-ke-CMYK adalah anggaran kerana anda menukar antara ruang warna yang berbeza (cahaya vs tinta). Alat ini menggunakan piawaian profil warna ICC untuk penukaran ini, yang merupakan pendekatan yang sama yang digunakan oleh perisian reka bentuk profesional.

Bagaimana saya mencipta kombinasi warna yang boleh diakses?

Gunakan pemeriksa kontras seperti alat WebAIM selepas memilih warna anda di sini. Anda memerlukan nisbah 4.5:1 untuk teks biasa, 3:1 untuk teks besar. Elakkan kombinasi merah-hijau (paling sukar untuk pengguna buta warna). Apabila ragu, gunakan teks gelap pada latar belakang cerah atau sebaliknya—perbezaan luminans yang mencukupi adalah yang paling penting.

Bolehkah saya memilih warna dari imej?

Tidak secara langsung dalam alat ini. Gunakan sambungan pelayar seperti ColorZilla, atau tangkap skrin imej dan gunakan pemilih warna sistem operasi anda (Digital Color Meter pada macOS, PowerToys Color Picker pada Windows). Sebaik sahaja anda mempunyai nilai warna, masukkannya di sini untuk menukar antara format.

Mengapa beberapa warna RGB tidak menukar dengan baik ke CMYK?

CMYK mempunyai "gamut" (julat warna yang boleh dihasilkan) yang lebih sempit berbanding RGB. Biru cerah, hijau hidup, dan oren elektrik sering berada di luar apa yang boleh dihasilkan oleh tinta CMYK. Apabila ini berlaku, pencetak menggantikan padanan terdekat, yang biasanya kelihatan kurang tepu. Pereka bentuk cetak profesional sering bermula dengan warna selamat CMYK untuk mengelakkan isu ini.

Alat Pemilih Warna - Tukar Kod Warna RGB, Hex, CMYK & HSV

Apa Yang Boleh Anda Lakukan Dengan Pemilih Warna Ini

Perlukan warna yang tepat untuk projek anda? Pemilih warna ini membolehkan anda memilih, pratonton, dan menukar warna antara format RGB, Hex, CMYK, dan HSV dengan serta-merta. Sama ada anda sedang mengekod laman web, mereka bentuk logo, atau menyediakan fail untuk cetak, anda akan mencari nilai warna yang tepat yang anda perlukan—tiada teka-teki, tiada pertukaran antara alat.

Klik di mana-mana sahaja pada spektrum warna untuk memilih warna, laraskan kecerahan dengan gelangsar, atau masukkan nilai yang tepat terus. Setiap format dikemas kini dalam masa nyata, dan anda boleh menyalin mana-mana kod warna dengan satu klik.

Memahami Model Warna

Projek yang berbeza memerlukan format warna yang berbeza. Berikut adalah fungsi setiap satu dan bila ia digunakan:

RGB (Merah, Hijau, Biru)

RGB berfungsi dengan mencampurkan cahaya merah, hijau, dan biru—sama seperti cara skrin anda memaparkan warna sekarang. Setiap komponen berkisar dari 0 hingga 255:

RGB(255, 0, 0) = merah tulen
RGB(0, 255, 0) = hijau tulen
RGB(0, 0, 255) = biru tulen
RGB(255, 255, 255) = putih
RGB(0, 0, 0) = hitam

Bila menggunakan RGB: Mana-mana kerja digital—laman web, aplikasi mudah alih, edit video, atau grafik berasaskan skrin. Ia adalah bahasa asli paparan, itulah sebabnya alat seperti CSS menyokong fungsi rgb() dan rgba() secara langsung. Menurut spesifikasi Modul Warna CSS W3C, RGB adalah model warna asas untuk standard web.

Heksadesimal (Hex)

Kod hex hanyalah nilai RGB yang ditulis dalam asas-16 dan bukannya asas-10. Warna hex kelihatan seperti #FF5733, di mana:

Simbol # menandakan ia adalah kod hex
Dua aksara pertama = merah (00-FF)
Dua di tengah = hijau (00-FF)
Dua terakhir = biru (00-FF)
#FF0000 = merah, #00FF00 = hijau, #0000FF = biru

Anda kadang-kadang akan melihat singkatan 3 aksara seperti #F00 dan bukannya #FF0000—ini berfungsi apabila setiap saluran warna mengulangi digit yang sama.

Bila menggunakan Hex: Pembangunan web adalah kes penggunaan utama. CSS sentiasa menyokong notasi hex, dan kebanyakan pembangun mendapati ia lebih cepat ditulis berbanding rgb(). Satu perkara yang perlu dielakkan: lupa simbol # akan merosakkan gaya anda secara senyap, kerana pelayar tidak akan mengenalinya sebagai warna yang sah.

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

CMYK adalah model warna yang digunakan oleh pencetak. Tidak seperti RGB (yang menambah cahaya), CMYK menolaknya—mencampurkan dakwat di atas kertas putih untuk mencipta warna:

Setiap komponen berkisar dari 0% hingga 100%
CMYK(0, 100, 100, 0) = merah
CMYK(100, 0, 100, 0) = hijau
CMYK(0, 0, 0, 100) = dakwat hitam tulen
CMYK(0, 0, 0, 0) = tiada dakwat (kertas putih kelihatan)

Bila menggunakan CMYK: Mereka bentuk untuk cetak—kad perniagaan, risalah, majalah, pembungkusan. Inilah realiti: banyak warna RGB yang cerah tidak dapat dihasilkan semula dengan dakwat CMYK. Biru elektrik cerah yang anda lihat pada skrin? Ia akan kelihatan lebih pudar apabila dicetak. Pereka profesional sentiasa melihat pratonton penukaran CMYK sebelum menghantar fail ke pencetak untuk mengelakkan kejutan.

HSV (Hue, Ketepuan, Nilai)

HSV memecahkan warna kepada tiga komponen intuitif:

Hue: Keluarga warna mana (0-360°)—0° adalah merah, 120° adalah hijau, 240° adalah biru
Ketepuan: Betapa cerah atau kelabu (0-100%)—0% adalah skala kelabu, 100% adalah ketepuan penuh
Nilai: Betapa cerah atau gelap (0-100%)—0% adalah hitam, 100% adalah kecerahan penuh

Mengapa HSV penting: Ia sepadan dengan cara manusia berfikir tentang warna secara semula jadi. Mahu biru yang lebih gelap? Turunkan nilainya. Mahu biru yang kurang intens? Turunkan ketepuannya. Ini menjadikan HSV ideal untuk pemilih warna interaktif seperti ini, di mana anda memilih hue pada spektrum dan melaraskan kecerahan dengan penggeser.

Rumus Penukaran Warna

Pemilih warna secara automatik menukar antara model warna yang berbeza menggunakan rumus matematik ini:

Penukaran RGB ke Hex

Untuk menukar RGB ke heksadesimal:

Tukar setiap komponen RGB (0-255) kepada 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 perwakilan heksadesimal.

Penukaran RGB ke CMYK

Penukaran dari RGB ke CMYK melibatkan langkah-langkah berikut:

Normalisasi nilai RGB kepada 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  // Normalisasi 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    # Normalisasi 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        // Normalisasi 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 dan Bacaan Lanjut

Modul Warna CSS W3C Tahap 4 - Spesifikasi warna web rasmi
Garis Panduan Kontras WCAG 2.1 - Standard aksesibiliti untuk kontras warna
Pemeriksa Kontras WebAIM - Uji nisbah kontras warna
Standard Profil Warna ICC - Spesifikasi teknikal untuk penukaran warna
Dokumen Web MDN: Nilai Warna CSS - Panduan komprehensif untuk format warna web

Alat Pemilih Warna - Tukar Kod Warna RGB, Hex, CMYK & HSV

Pemilih Warna

RGB (0-255)

CMYK (0-100)

Pemilih Warna

Dokumentasi

Apa Yang Boleh Anda Lakukan Dengan Pemilih Warna Ini

Memahami Model Warna

RGB (Merah, Hijau, Biru)

Heksadesimal (Hex)

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

HSV (Hue, Ketepuan, Nilai)

Rumus Penukaran Warna

Penukaran RGB ke Hex

Penukaran RGB ke CMYK

Penukaran RGB ke HSV

Rujukan dan Bacaan Lanjut

Penjana Palet Warna - Hasilkan Skema Warna Harmoni

Penjana Sifat CSS - Kecerunan, Bayangan & Sempadan

Pembuat Kod QR Percuma - Hasilkan Kod QR Boleh Imbas Serta-merta

Pengubah Asas Nombor: Perduaan, Heks, Perpuluhan & Lapan

Peramal Warna Arnab – Kira Warna Bulu Anak Arnab

Pengubah Perduaan ke Perpuluhan | Alat Dalam Talian Percuma

Pengukur PX ke REM ke EM – Kalkulator Unit CSS Percuma

Dekoder Imej Base64 | Dekod & Pratonton Imej Dalam Talian

Kalkulator Pencairan Pemutih: Nisbah Tepat untuk Pembersihan Selamat

Pengubah Piksel ke Inci - Kalkulator DPI Percuma (2025)

Kalkulator Panjang Bit dan Byte - Alat Saiz Data Percuma

Pemformat Kod Percuma: Memperindahkan JavaScript, Python, HTML & Lain-lain