Bagaimana cara mengubah warna dari format rgb ke hex?

JavaScript
#1

Halo sobat Skilvul!

Kali ini ada kasus tentang perbedaan format warna

Desainer web saya memberi saya theme dengan warna-warna dalam format rgb (red, green, blue), sedangkan saya lebih nyaman dengan format hex. Apa ada cara untuk melakukan konversi di antara dua format itu?

RGB dan Hex itu intinya sama

Mereka berdua sama-sama mewakili 3 warna primer (merah, hijau, dan biru), hanya saja mereka berbeda basis bilangan.

  • RGB menggunakan sistem desimal (basis 10). Ini sistem bilangan yang umum digunakan. Jadi kalau berhitung ya 0,1,2,3,4,5,6,7,8,9,10,11,12…dst.
  • Hex menggunakan sistem heksadesimal (basis 16). Sistem bilangan ini lebih mudah mewakili bilangan yang berjumlah besar. Kalau berhitung dengan sistem ini, urutannya adalah 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10,11,12…dst.

“Kok ada huruf di dalam bilangan?”

Karena basis 16 membutuhkan 16 simbol untuk mewakili bilangan; jadi kita “meminjam” beberapa huruf abjad untuk dijadikan simbol. Jadi 10 (desimal) sama dengan a (heksadesimal).

Konversi RGB ke Hex

Untuk melakukan konversi, kita hanya perlu mengubah tiap komponen dalam RGB ke dalam basis 16 dan menggabungkannya. Bagaimana caranya? Dengan JavaScript kita bisa menulis bilangan.toString(16) yang artinya “Ubah nilai ‘bilangan’ ke dalam basis 16”.

Misal. Warna merah logo Skilvul adalah rgb(236, 84, 83).
(236).toString(16) // output ec
(84).toString(16) // output 54
(83).toString(16) // output 53

Tinggal digabungkan dan diberi tanda pagar # didepannya.
Jadi rgb(236, 84, 83) sama dengan #ec5453

Fungsi untuk Konversi

Seperti biasa, developer harus bisa menyederhanakan masalah, dalam kasus ini kita ingin membuat fungsi agar kita cukup memanggilnya saat butuh.

//fungsi utama untuk konversi rgb ke hex
function rgbToHex(r,g,b) {
  //isi fungsi
}

//fungsi untuk untuk konversi desimal ke heksadesimal
function getHexValueOf(num) {
 return num.toString(16);
}

Dalam fungsi rgbToHex, kita perlu

  1. memanggil fungsi getHexValueOf 3 kali (untuk parameter r, g, dan b).
  2. menggabungkan hasilnya,
  3. menambahkan tanda pagar #.

Untuk poin pertama kita bisa membungkus mereka dalam sebuah array dan menggunakan map. Lalu berikan fungsi getHexValueOf sebagai parameternya.

  1. [r, g, b].map(getHexValueOf)

Untuk poin kedua, kita bisa menggunakan method .join() yang kita beri argumen “” (string kosong).

  1. [r, g, b].map(getHexValueOf).join("")

Untuk poin ketiga, kita bisa menggunakan string concatenation biasa.

  1. "#" + [r, g, b].map(getHexValueOf).join("")

Jadi fungsi lengkapnya adalah

function rgbToHex(r,g,b) {
  return "#" + [r, g, b].map(getHexValueOf).join("")
}

Tes

Mari kita coba fungsi kita terhadap warna merah Skilvul di awal (yaitu rgb(236, 84, 83))

> console.log(rgbToHex(236, 84, 83))
output: #ec5453

Selesai. Jadi begitulah langkah-langkah pembuatan fungsi untuk mengubah warna dari format rgb ke hex.

#2

Eh tunggu, kelupaan. Fungsi tersebut tidak akan bekerja efektif kalau hasil konversi dari desimal ke heksadesimalnya menghasilkan hanya 1 digit.

Contoh. rgbToHex(9,8,7) hasilnya adalah #987

Itu salah. Format hex yang hanya memiliki 3 digit itu ada arti lain. #987 adalah cara singkat untuk menulis #998877. Padahal rgb(9,8,7) itu ekuivalennya adalah #090807.

Jadi kita perlu memastikan saat ada bilangan yang diubah ke dalam heksadesimal dan hasilnya adalah 1 digit, kita beri angka 0 di depannya.

Kita bisa modifikasi fungsinya menjadi seperti ini

//fungsi untuk untuk konversi desimal ke heksadesimal
function getHexValueOf(num) {
 return num.toString(16).padStart(2, '0');
}

“Pad” di sini sama artinya dengan “padding” di CSS,. Yaitu “ruang atau memberi/mengisi ruang”. Dalam kasus ini .padStart(2, '0') artinya adalah

"Pastikan bilangannya memiliki dua digit. Kalau ternyata kurang, beri dia angka 0 di depannya

1 Like