Hex in rgba umwandeln – Hex to rgba converter
Für meinen Box Shadow Generator musste ich hex in rgba umrechnen, damit beim Wechsel zwischen hex und rgba die Farbe übernommen wird und nicht neu eingegeben werden muss. Somit musste ich mich mit dem Thema hex in rgba umwandeln beschäftigen und zwangsläufig auch mit der Formel. So ist mein kleiner hex to rgba converter entstanden.
Kostenloser hex in rgba converter
Wie funktioniert der hex in rgab Converter?
Eigentlich funktioniert der Converter relativ einfach. Ihr müsst lediglich die Hexadezimal-Farbe in das Eingabefeld eingeben und auf Convert klicken – und schon wird die Farbe in rgba umgewandelt und ausgegeben.
Folgende Zeichen werden akzeptiert
Die folgenden Zeichen werden vom hex to rgba Converter akzeptiert:
- Buchstaben: A bis F
- Zahlen: 0 – 9
- Sonderzeichen: #
Hex in rgba um rechnen – So geht’s
Die Umrechnung von hex in rgba einfach. Zunächst einmal müsst Ihr die Länge des Hex-Wertes ermitteln. Am besten Ihr entfernt zuvor sicherheitshalber das #-Zeichen. Anschließend ermittelt ihr mit .length die Länge des Hexadezimalwert.
Länge ermitteln
var hexadecimal = #78AD80;
var hex = hexadecimal.toUpperCase().replace('#', '');
var hexLength = hex.length;Der Hexadezimalwert muss aus mindestens einen und maximal sechs Zeichen bestehen. Habt ihr weniger oder mehr Zeichen, dann könnt Ihr eine Fehlermeldung ausgeben. Liegt der Wert dazwischen könnt Ihr weiter fortfahren.
if ( hexLength > 0 && hexLength <= 6 ) {
// do something
} else {
// error
}Bereich festlegen
Im nächsten Schritt werden die Zeichen festgelegt, die erlaubt sind.
if ( hexLength > 0 && hexLength <= 6 ) {
var h = '0123456789ABCDEF';
} else {
// error
}
Hex = 6 Zeichen
Gehen wir vom Idealfall aus, dass der Hex-Wert eine Länge von 6 Zeichen hat. Ist dies der Fall überprüfen wir von jedem einzelnen Zeichen die Position in zuvor definierten variable h und multiplizieren die Stelle mit 16.
var r = h.indexOf(hex[0])*16+h.indexOf(hex[1]);
var g = h.indexOf(hex[2])*16+h.indexOf(hex[3]);
var b = h.indexOf(hex[4])*16+h.indexOf(hex[5]);Bsp.: #78AD80
R:
- 7: (Position: 7 ) 7 * 16 = 112
- 8: (Position: 8 ) 112 + 8 = 120
G:
- A: (Position: 10 ) 10 * 16 = 160
- D: (Position: 13 ) 160 + 13 = 173
B:
- 8: (Position: 8 ) 8 * 16 = 128
- 0: (Position: 0 ) 128 + 0 = 128
Ergebnis: rgba(120, 173, 128, 1)
Hex = 3 Zeichen
Hat der Hex Wert nur 3 Zeichen, so wird jedes Zeichen verdoppelt.
Bsp:
- #AD0 = #AADD00
- #742 = #774422
Also können wir uns zunächst eine variable Zusammenbauen und erneut die gleiche Rechnung wie bei 6 Zeichen durchführen. In meinem Beispiel sieht es folgender Maße aus
var hexadecimal = #78A;
var hexadecimal = hexadecimal.toUpperCase().replace('#', '');
var hex = hexadecimal[0] + hexadecimal[0] + hexadecimal[1] + hexadecimal[1] + hexadecimal[2] + hexadecimal[2];
var r = h.indexOf(hex[0])*16+h.indexOf(hex[0]);
var g = h.indexOf(hex[1])*16+h.indexOf(hex[1]);
var b = h.indexOf(hex[2])*16+h.indexOf(hex[2]);Hex != 3 && Hex != 6
Tritt der Fall aus, dass der Hexadezimalwert mehr als 0 und weniger als 6 Zeichen hat und nicht genau 3 oder 6 Zeichen, dann werden die fehlenden Zeichen mit Nullen aufgefüllt.
Beispiele:
- #1 = #000001
- #AB = #0000AB
- #743A = #00743A
- #AF012 = #0AF012
In diesem Fall werden erst die fehlenden Zeichen ermittelt, indem ich die Zeichenanzahl von 6 subtrahiere. Anschließend erstelle ich eine for-Schleife und lasse dabei eine variable mit Nullen solange füllen, bis die fehlenden Zeichen aufgefüllt sind. Danach baue ich mir meine variable zusammen und ermittle mit der oben genannten Formel den rgb-Wert.
var loopLength = 6 - hexLength;
var zeros = '';
var i;
for (i = 0; i < loopLength; i++) {
zeros += '0';
}
var hex = zeros + hex;
var r = h.indexOf(hex[0])*16+h.indexOf(hex[1]);
var g = h.indexOf(hex[2])*16+h.indexOf(hex[3]);
var b = h.indexOf(hex[4])*16+h.indexOf(hex[5]);Am Ende kann ich mir meinen rgba-Wert zusammenbauen und ausgeben lassen.
var hexadecimal = #78AD80;
var hex = hexadecimal.toUpperCase().replace('#', '');
var hexLength = hex.length;
if ( hexLength > 0 && hexLength <= 6 ) {
var h = '0123456789ABCDEF';
if ( hexLength == 6 ) {
var r = h.indexOf(hex[0])*16+h.indexOf(hex[1]);
var g = h.indexOf(hex[2])*16+h.indexOf(hex[3]);
var b = h.indexOf(hex[4])*16+h.indexOf(hex[5]);
} else if ( hexLength == 3 ) {
var hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
var r = h.indexOf(hex[0])*16+h.indexOf(hex[0]);
var g = h.indexOf(hex[1])*16+h.indexOf(hex[1]);
var b = h.indexOf(hex[2])*16+h.indexOf(hex[2]);
} else {
var loopLength = 6 - hexLength;
var zeros = '';
var i;
for (i = 0; i < loopLength; i++) {
zeros += '0';
}
var hex = zeros + hex;
var r = h.indexOf(hex[0])*16+h.indexOf(hex[1]);
var g = h.indexOf(hex[2])*16+h.indexOf(hex[3]);
var b = h.indexOf(hex[4])*16+h.indexOf(hex[5]);
}
// OUTPUT
var color = 'rgba(' + r +', ' + g + ', ' + b + ', 1)';
alert(color);
} else {
// error
}
Hallo Oli,
habe das komplette Script kopiert in eine Datei „hex-rgba.html“ und auf meinen Server geladen.
Leider erfolgt keine Ausgabe, woran dann das liegen?
Besten Dank im voraus
Gruss André
Hi André,
schwierig zu sagen, woran es liegt. Gibt es eine URL, wo man deine Datei aufrufen kann? Kannst du mir auch gerne privat als E-Mail schicken. Dann kann ich mal drüber schauen.
Lg Oli
Gratulation zum ersten Platz biem Keywort „hex to rgba“ 😀 Jahrelang war da jemand anderes.
Hey mewcrazy,
na mal schauen wie lange ich den Thron verteidigen kann 🙏🏻😏
Lg Oli