201126Jul

Webdesign: HEX-Farbwerte in RGBA umwandeln

Farben müssen in CSS schon längst nicht mehr nur als HEX-Werte deklariert werden, sondern können auch durch RGB- oder HSL-Angaben definiert werden. Zudem können Farbwerte mit einer Transparenz belegt werden, so dass dahinter liegende Hintergrundfarben oder -bilder je nach Transparenz-Wert sichtbar werden. Die Opazität wird durch die Angabe des Alpha-Kanals geregelt, daher die Bezeichnungen "RGBA" und "HSLA" (Hue / Saturation / Luminance / Alpha).
RGBA-Zuweisungen sehen in etwa so aus:

  • .klasse {
  • color:rgba(255, 125, 255, 0.55);
  • }

Um HEX-Werte schnell und einfach in einen derartigen Wert zu konvertieren, kann ein Tool wie der HEX 2 RGBA Color Calculator verwendet werden. Nachdem der HEX-Wert eingefügt wurde, kann die Transparenz per Schieberegler eingestellt werden.

Devoth's HEX 2 RGBA Color Calculator

Als Ausgabe wird ein entsprechender RGBA-Wert geliefert, der in Stylesheets eingefügt werden kann. Das Online-Tool ist unkompliziert und in bestimmten Fällen sicher eine kleine Hilfe.