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

Wie kann ich RGB-Farbwerte in JavaScript in Hex umwandeln?

Patricia Arquette
Freigeben: 2024-12-19 10:22:13
Original
957 Leute haben es durchsucht

How Can I Convert RGB Color Values to Hex in JavaScript?

Hex-Farbwerte aus RGB abrufen

Mit der bereitgestellten jQuery können Sie den RGB-Wert der Hintergrundfarbe eines Elements abrufen. Was aber, wenn Sie stattdessen den Hex-Wert benötigen?

Lösung

Um RGB-Werte in Hex-Werte umzuwandeln, berücksichtigen Sie die folgende einzeilige Funktion:

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('')}`
Nach dem Login kopieren

Verbesserte Antwort (2021)

Mit Fortschritten in EcmaScript Funktionen, eine prägnantere und aktualisierte Version von rgb2hex ist:

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

Beispielverwendung

Sie können diese Funktionen wie folgt nutzen:

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'
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage