Heim >Web-Frontend >js-Tutorial >Wie konvertiere ich RGB in Hex-Farbwerte in JavaScript?

Wie konvertiere ich RGB in Hex-Farbwerte in JavaScript?

Susan Sarandon
Susan SarandonOriginal
2024-12-26 16:06:10977Durchsuche

How to Convert RGB to Hex Color Values in JavaScript?

Konvertieren von RGB- in Hex-Farbwerte in JavaScript

Die jQuery-Funktion $('#selector').css('backgroundColor') bietet der RGB-Wert der Hintergrundfarbe eines Elements. Wenn Sie stattdessen den Hexadezimalwert erhalten müssen, finden Sie hier eine umfassende Lösung:

Einzeilige Funktion (aktualisiert 2021):

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

Diese Funktion unterstützt sowohl RGB und RGBA-Werte.

Cross-Browser One-Liner (ES5 ):

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

Diese alternative Funktion funktioniert nur für RGB-Werte.

Beispielverwendung:

console.log(rgb2hex('rgb(255, 255, 255)')); // '#ffffff'
console.log(rgb2hex('rgb(0, 0, 0)')); // '#000000'

Das obige ist der detaillierte Inhalt vonWie konvertiere ich RGB in Hex-Farbwerte in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn