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

convert

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
}

revilodesign oli

4 Kommentare

Schreibe ein Kommentar zu Hex in rgba umwandeln – Hex to rgba converter

  1. avatar andréAndré sagt:

    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é

    • avatar adminadmin sagt:

      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

  2. avatar mewcrazymewcrazy sagt:

    Gratulation zum ersten Platz biem Keywort „hex to rgba“ 😀 Jahrelang war da jemand anderes.

    • avatar adminadmin sagt:

      Hey mewcrazy,

      na mal schauen wie lange ich den Thron verteidigen kann 🙏🏻😏

      Lg Oli

Hinterlasse ein Kommentar zum Beitrag "Hex in rgba umwandeln – Hex to rgba converter"

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Follow Me

doch mal auf Instagram