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

Wie konvertiere ich RGB- in Hex-Farbcodes in JavaScript?

Barbara Streisand
Barbara StreisandOriginal
2024-12-10 14:21:11383Durchsuche

How to Convert RGB to Hex Color Codes in JavaScript?

Hex-Farbcodes aus RGB-Werten extrahieren

RGB-Werte von Elementhintergründen mithilfe von jQuery zu ermitteln, reicht möglicherweise nicht immer aus. Möglicherweise müssen Sie diese Werte in ihre hexadezimalen Gegenstücke umwandeln. Dieses Code-Snippet zeigt, wie man RGB-Werte extrahiert:

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

Unser Ziel ist es, die entsprechenden Hex-Werte für die RGB-Werte zu erhalten.

Lösung

Die TL;DR-Lösung bietet eine prägnante einzeilige Funktion, die sowohl RGB als auch RGBA verarbeitet Formate:

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

Aktualisierte Lösung (2021)

Moderne Browser unterstützen jetzt ECMAScript 5- und 2015-Funktionen und ermöglichen so eine elegantere Lösung:

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 aktualisierte Funktion vereinfacht die Umwandlung von RGB- in Hex-Farbcodes.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich RGB- in Hex-Farbcodes 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