Bagaimana untuk Menukar RGB ke Kod Warna Hex dalam JavaScript?

Mengekstrak Kod Warna Hex daripada Nilai RGB

Mendapatkan nilai RGB bagi latar belakang elemen menggunakan jQuery mungkin tidak selalu mencukupi. Anda mungkin perlu menukar nilai ini kepada rakan heksadesimalnya. Coretan kod ini menunjukkan cara mengekstrak nilai RGB:

$('#selector').css('backgroundColor');

Matlamat kami adalah untuk mendapatkan nilai hex yang sepadan untuk nilai RGB.

Penyelesaian

Penyelesaian TL;DR menyediakan fungsi satu baris ringkas yang mengendalikan kedua-dua RGB dan RGBA format:

const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`

Penyelesaian Kemas Kini (2021)

Pelayar moden kini menyokong ciri ECMAScript 5 dan 2015, membenarkan penyelesaian yang lebih elegan:

const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`

Fungsi yang dikemas kini ini memudahkan perubahan daripada RGB kepada warna heks kod.

Atas ialah kandungan terperinci Bagaimana untuk Menukar RGB ke Kod Warna Hex dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!