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
}

oliver

Hinterlasse doch ein Kommentar zu Hex in rgba umwandeln – Hex to rgba converter

Wenn dir der Beitrag Hex in rgba umwandeln – Hex to rgba converter gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.

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

Deine E-Mail-Adresse wird nicht veröffentlicht.