Alat Pemilih Warna - Konversi Kode Warna RGB, Heks, CMYK & HSV

Apa itu pemilih warna?

Pemilih warna adalah alat untuk memilih warna dan membaca nilainya dalam berbagai format warna. Alat ini menampilkan warna dalam RGB (merah, hijau, biru), heksadesimal, CMYK (sian, magenta, kuning, hitam), dan HSV (rona, saturasi, nilai) secara bersamaan. Mengubah salah satu format akan langsung memperbarui format lainnya.

Cara menggunakan pemilih warna

Ada tiga cara untuk memilih warna.

Klik di mana saja pada kotak spektrum untuk memilih rona dan saturasi. Posisi horizontal menentukan rona (kelompok warna, seperti merah atau biru). Posisi vertikal menentukan saturasi (seberapa pekat atau pudar tampilan warna). Penggeser di bawah spektrum mengatur kecerahan, dari hitam di sebelah kiri hingga kecerahan penuh di sebelah kanan.

Nilai yang diketik secara tepat juga dapat digunakan. Kolom heksadesimal menerima kode seperti #2ECC71, dengan atau tanpa #. Setiap kolom RGB menerima bilangan bulat dari 0 hingga 255. Setiap kolom CMYK menerima bilangan bulat dari 0 hingga 100. Nilai yang diketik melebihi rentang yang diizinkan akan dibatasi pada nilai maksimum.

Setiap format warna memiliki tombol salin di sebelahnya. Mengekliknya akan menyalin nilai tersebut ke papan klip dan menampilkan pesan singkat "Tersalin!".

Penjelasan model warna

RGB

RGB menggambarkan warna sebagai campuran cahaya merah, hijau, dan biru, yaitu tiga warna yang sama yang digunakan layar untuk membuat setiap piksel. Setiap kanal berkisar dari 0 hingga 255. RGB(255, 0, 0) adalah merah murni, sedangkan RGB(0, 0, 0) adalah hitam. Peramban, aplikasi, dan perangkat lunak video semuanya menggunakan RGB karena format ini sesuai dengan cara kerja layar.

Heksadesimal

Kode heksadesimal menuliskan warna RGB dalam basis 16, bukan basis 10. #2ECC71 memiliki tiga pasang karakter: 2E untuk merah, CC untuk hijau, dan 71 untuk biru. Setiap pasangan berkisar dari 00 hingga FF. Kode heksadesimal umum digunakan dalam desain web karena CSS dapat menerimanya secara langsung dan pengetikannya lebih singkat daripada rgb(). Ada juga bentuk singkat tiga karakter: #0F0 berarti sama dengan #00FF00.

CMYK

CMYK digunakan untuk pencetakan. Printer membentuk warna dengan melapiskan tinta sian, magenta, kuning, dan hitam pada kertas putih, sehingga cara kerjanya mengurangi cahaya, bukan menambahnya. Setiap kanal berupa persentase dari 0 hingga 100. CMYK(0, 0, 0, 0) berarti tidak ada tinta sama sekali, sehingga kertas putih tetap terlihat. CMYK tidak dapat mereproduksi semua warna yang dapat ditampilkan layar; beberapa warna cerah pada layar, terutama warna biru dan hijau tertentu, tampak lebih kusam setelah dicetak.

HSV

HSV menggambarkan rona, saturasi, dan nilai secara terpisah. Rona adalah kelompok warna, dinyatakan dalam derajat dari 0° hingga 360°, dengan 0° sebagai merah, 120° sebagai hijau, dan 240° sebagai biru. Saturasi menunjukkan seberapa pekat warna, dari 0% (abu-abu) hingga 100% (warna penuh). Nilai menunjukkan tingkat kecerahan, dari 0% (hitam) hingga 100% (kecerahan penuh). HSV mendekati cara manusia secara alami menggambarkan warna, sehingga spektrum dan penggeser kecerahan pada alat ini didasarkan pada HSV.

Rumus RGB ke heksadesimal

Setiap kanal RGB, berupa angka dari 0 hingga 255, diubah menjadi angka heksadesimal dua digit, kemudian ketiga pasangan tersebut digabungkan dengan # di depannya.

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

Rumus RGB ke CMYK

Pertama, setiap kanal RGB diskalakan menjadi pecahan antara 0 dan 1. Hitam (K) ditentukan dari kanal yang nilainya paling besar. Sian, magenta, dan kuning kemudian dihitung dari kanal yang tersisa dan K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Jika K sama dengan 1 (warnanya hitam murni), C, M, dan Y semuanya ditetapkan ke 0 untuk menghindari pembagian dengan nol.

Rumus RGB ke HSV

RGB terlebih dahulu diskalakan menjadi pecahan antara 0 dan 1. Misalkan $C_{max}$ adalah nilai terbesar dari ketiganya, $C_{min}$ adalah yang terkecil, dan $\Delta$ adalah selisih di antara keduanya.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ jika tidak } \frac{\Delta}{C_{max}}\times 100\%$

Rona bergantung pada kanal yang nilainya paling besar:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## Contoh perhitungan Mulai dengan RGB(46, 204, 113), yaitu warna hijau. **Heksadesimal:** 46 dalam heksadesimal adalah `2E`, 204 adalah `CC`, dan 113 adalah `71`, sehingga menghasilkan `#2ECC71`. **CMYK:** Setelah diskalakan, R′ = 0,180, G′ = 0,800, B′ = 0,443. Nilai terbesar adalah G′, sehingga K = 1 − 0,800 = 0,20, yang berarti 20% hitam. Kemudian C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77%, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0%, dan Y = (1 − 0,443 − 0,20) / 0,800 × 100 ≈ 45%. Hasilnya adalah CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (hijau), $C_{min}$ = 0,180, sehingga Δ = 0,620. Nilainya = 80%. Saturasi = 0,620 / 0,800 × 100 ≈ 77%. Karena hijau adalah nilai terbesar, H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Hasilnya adalah HSV(145°, 77%, 80%). ## Membuat pilihan warna lebih mudah diakses Sekitar 1 dari (2,5 cm) 12 pria dan sekitar 1 dari (2,5 cm) 200 wanita mengalami suatu bentuk defisiensi penglihatan warna, yang paling umum berupa berkurangnya kemampuan membedakan merah dari hijau. Desain yang hanya mengandalkan warna untuk menyampaikan makna, seperti pesan kesalahan berwarna merah tanpa ikon atau label, tidak akan berfungsi bagi pengguna ini. Menambahkan label teks, ikon, atau pola di samping warna dapat mengatasinya. Teks juga memerlukan kontras yang cukup terhadap latar belakangnya. Web Content Accessibility Guidelines (WCAG) merekomendasikan rasio kontras setidaknya 4,5:1 untuk teks biasa dan 3:1 untuk teks besar. Pemeriksa kontras khusus diperlukan untuk mengukurnya karena alat ini tidak menghitung rasio kontras. ## Pertanyaan yang sering diajukan **Apa perbedaan antara RGB dan CMYK?** RGB digunakan untuk layar dan membentuk warna dengan menambahkan cahaya merah, hijau, dan biru. CMYK digunakan untuk pencetakan dan membentuk warna dengan melapiskan tinta pada kertas, yang justru mengurangi cahaya. RGB dapat menghasilkan warna yang lebih cerah daripada CMYK karena tinta tidak dapat menyamai rentang warna yang dapat dipancarkan layar. **Mengapa warna hasil cetak terlihat berbeda dari layar?** Layar memancarkan cahaya secara langsung; halaman yang dicetak hanya memantulkan cahaya yang mengenainya. Tinta CMYK juga mencakup rentang warna yang lebih kecil daripada cahaya RGB, sehingga beberapa warna cerah pada layar tidak dapat dicocokkan secara tepat di atas kertas. **Apa arti simbol # dalam kode heksadesimal?** Simbol tersebut menandai karakter setelahnya sebagai kode warna heksadesimal, sebuah konvensi dari masa awal HTML dan CSS. Tanpa simbol itu, peramban tidak akan mengenali nilai tersebut sebagai warna. **Mengapa beberapa kode heksadesimal hanya memiliki tiga karakter?** Kode tiga karakter adalah bentuk singkat dari kode enam karakter, dengan setiap pasangan mengulangi digit yang sama. `#0F0` diperluas menjadi `#00FF00`. **Apakah konversi antarformat bersifat tepat?** RGB ke heksadesimal bersifat tepat karena menggunakan angka yang sama dalam basis berbeda. RGB ke CMYK merupakan pendekatan karena mengubah antara cahaya dan tinta, yang merupakan proses fisik berbeda dengan rentang warna yang berbeda pula. **Dapatkah alat ini memilih warna langsung dari gambar atau halaman web?** Tidak. Ekstensi peramban atau pemilih warna bawaan sistem operasi (seperti Digital Color Meter pada macOS) dapat membaca warna dari layar; nilai yang dihasilkan kemudian dapat diketikkan ke alat ini untuk dikonversi.