RGBA in Hex umrechnen – RGBA to Hex Converter
Verfasst am 14.02.2019
Update 24.06.2025
Für meinen Box-Shadow Generator musste ich RGBA in Hexadecimal umrechnen. Dabei fand ich eine nützliche Funktion, die ich für meine Bedürfnisse angepasst habe.
So kannst du rgb in hex umrechnen
Hinweis: Der Alphawert muss mit 0. beginnen oder eine 1 sein. Es geht nicht .1
Der obige rgba in hex converter soll nur die Funktionsweise zeigen. Einfach eine RGB-Farbe eingeben und auf convert klicken und schon wird die Hex (Hexadezimal) Farbe ausgegeben.
Die rgba to hex function
Due Funktion erklärt sich relativ einfach. Zunächst einmal werden mit match die Zahlen heraus gesammelt. Anschließend wird die Variable color mit den Werten gefüllt und dabei jede Zahl zu einer zweistelligen Zahl umgewandelt.
javascript
// RGBA 2 HEX
function rgbToHex( rgb ) {
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
var color = (rgb && rgb.length === 4) ? "#" +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
if ( color ) {
jQuery('div#output').html( color );
} else {
jQuery('div#output').html( 'Fehler' );
}
}
Mehr anzeigen
4 Likes
6 Kommentare
Schreibe ein Kommentar zu RGBA in Hex umrechnen – RGBA to Hex Converter
Moin Oli,
leider funktioniert dein Converter bei einem Aplha-Wert von mindestens 1, bzw. nicht mit Dezimalwerten, was ja gerade der wichtigste Nutzen wäre.
Hey B,
vielen Dank für deinen Hinweis. Ich werde mir den Bug mal anschauen.
LG Oli
nettes Tool, aber das wichtigste Feature klappt leider nicht…
Der Alpha-Wert fehlt
Hey deinAlias,
Hex-Farben haben keinen Alpha Wert. Die vierte Stelle gibt nur die Transparenz an.
0 = durchsichtig
1 = 100%ige Deckkraft.
Dazwischen wird der Pixel einfach transparenter. Hex-Farben können nur mit 100%iger Deckkraft angezeigt werden. Diese kannst du mit opacity transparent machen. Das bedeutet das das Tool schon korrekt arbeitet, denn bei der Convertierung wird der Alphawert ignoriert.
Die Farbe wird ja je nach Hintergrundfarbe des Elements auch unterschiedlich angeziegt sobald der Alphawert auf 0 Komma noch was gesetzt wird.
Ich hoffe ich konnte es verständlich erklären. Aber zur besseren Veranschaulichung werde ich noch eine kleine Grafik oben einbauen.
LG Oli
Hallo Oli,
Du ignorierst hier komplett dass es auch eine 8-stellige Hex-Representation von RGBA gibt, wobei die letzten 2 stellen für den Alphawert genutzt werden.
Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors
Da die Seite hier bei wahrscheinlich nicht wenigen Leuten (wie bei mir auch) recht weit oben bei Google gerankt wird, wäre es schön wenn der Alphawert auch berücksichtigt werden würde.
Beste Grüße,
Max
Hey Max,
sorry für die Unannehmlichkeiten. Ich habe keine Kosten und Mühen gespart um …
Ich hab das Tool um deine gewünschte Funktion erweitert. Ich hoffe du freust dich 😉
LG Oli