Mengubah Warna RGB Menjadi Notasi Hex

Pernah melihat warna direpresentasikan dalam 3 bilangan model warna RGB (Red, Green Blue)?

Warna bisa direpresentasikan dalam 3 bilangan warna ini. Warna putih misalnya, terdiri dari 255 R, 255 G, dan 255 B. Warna hitam, terdiri dari 0 R, 0 G, dan 0 B. Warna merah, terdiri dari 255 R, 0 G, dan 0 B.

Dalam proses styling menggunakan CSS, salah satu skema warna yang dapat digunakan adalah warna dalam notasi hex alias hexadecimal atau bilangan berbasis 16. Misalkan, warna putih yang 255 R, 255 G, dan 255 B tadi, dapat ditulis sebagai #ffffff. Jika diperhatikan, sebenarnya struktur penulisan kode warnanya adalah #RRGGBB dengan masing-masing RR, GG, dan BB direpresentasikan dalam bilangan berbasis 16 tadi. Dalam notasi hex, 255 adalah ff, sehingga dapat ditulis demikian.

Jadi, bagaimana dengan warna hijau yang memiliki nilai 0 R, 255 G, dan 0 B? Karena 0 adalah tetap 0, dan 255 adalah ff, maka dapat ditulis #00ff00.

Proses konversi ini sering sekali saya butuhkan. Biasanya untuk memudahkan, bisa pakai converter yang tersedia di internet, atau dengan menggunakan script sederhana menggunakan JavaScript. Kode-kode JavaScript bisa langsung dijalankan di browser, dan tinggal dipakai di browser JavaScript console di saat-saat tertentu.

Kalau ada yang mau mencoba, ini kodenya:

var normalize = function(h) { return h.length == 1 ? '0' + h : h; };
var convert = function(r, g, b) { return '#' + normalize(r.toString(16)) + normalize(g.toString(16)) + normalize(b.toString(16)); };

Contoh penggunaannya seperti ini:

Convert RGB to Hex Script

Demikian. Semoga bermanfaat. 🙂

Advertisements