Bagaimanakah Saya Boleh Menukar Nilai Warna RGB kepada Hex dalam JavaScript?

Mendapatkan Nilai Warna Hex daripada RGB

JQuery yang disediakan membolehkan anda mendapatkan semula nilai RGB warna latar belakang elemen. Walau bagaimanapun, bagaimana jika anda memerlukan nilai heks sebaliknya?

Penyelesaian

Untuk menukar nilai RGB kepada nilai hex, pertimbangkan fungsi satu baris berikut:

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('')}`

Jawapan Diperbaiki (2021)

Dengan kemajuan dalam ciri EcmaScript, versi rgb2hex yang lebih ringkas dan dikemas kini ialah:

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

Contoh Penggunaan

Anda boleh menggunakan fungsi ini seperti berikut:

console.log(rgb2hex('rgb(0,0,0)')) // '#000000'
console.log(rgb2hex('rgb(255, 255, 255)')) // '#ffffff'
console.log(rgb2hex('rgb(255,0,0)')) // '#ff0000'
console.log(rgb2hex('rgb(38, 170, 90)')) // '#26aa5a'

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Nilai Warna RGB kepada Hex dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!