RGBA in Hex umrechnen – RGBA to Hex Converter

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

convert

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.

// 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' );
	}
}

Am Ende wird noch abgefragt, ob die Variable color gefüllt ist. Wenn ja soll sie ausgegeben werden, ansonsten wird eine Fehlermeldung angezeigt.

Wieso wird der Alpha-Wert ignoriert?

Es kamen nun schon vermehrt die Frage auf (siehe Kommentare), wieso der Alpha-Wert beim umrechnen ignoriert wird. Das liegt daran, das RGB-Farben mit dem vierten Wert, dem Alphawert, die möglichkeit haben transparent angezeigt zu werden, was HEX-Farben wiederum nicht können. Der Alpha-Wert gibt an wie durchsichtig ein Pixel ist. Je nach Hintergrundfarbe der Box wird die gleiche Farbe unterschiedlich angeziegt.

Was an den olgenden Beispielen gut zu erkennen ist.

Beispiel an einem hellen Hintergrund

1
0.9
0.8
0.7
0.6
0.5
0.4
0.3
0.2
0.1
0

Beispiel an einem dunklen Hintergrund

1
0.9
0.8
0.7
0.6
0.5
0.4
0.3
0.2
0.1
0

Beispiel an einem farbigen Hintergrund

1
0.9
0.8
0.7
0.6
0.5
0.4
0.3
0.2
0.1
0

oliver

4 Kommentare

Schreibe ein Kommentar zu RGBA in Hex umrechnen – RGBA to Hex Converter

  1. avatar bB sagt:

    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.

    • avatar adminadmin sagt:

      Hey B,

      vielen Dank für deinen Hinweis. Ich werde mir den Bug mal anschauen.

      LG Oli

  2. avatar deinaliasdeinAlias sagt:

    nettes Tool, aber das wichtigste Feature klappt leider nicht…
    Der Alpha-Wert fehlt

    • avatar adminadmin sagt:

      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

Hinterlasse ein Kommentar zum Beitrag "RGBA in Hex umrechnen – RGBA to Hex Converter"

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

Follow Me

doch mal auf Instagram