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.🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s