Was ist ein Hex-Farbcode?

Ein Hex-Farbcode stellt eine Farbe als Hexadezimalziffern dar, wie es CSS und die meisten Design-Tools tun. In #3b82f6 ist jedes Ziffernpaar ein Kanal: 3b steht für Rot, 82 für Grün und f6 für Blau – von 00 (aus) bis ff (voll). Ein optionales viertes Paar legt den Alpha-Kanal bzw. die Deckkraft fest. #3b82f6cc ist daher dasselbe Blau mit 80 % Deckkraft. Bei Codes, in denen sich die beiden Ziffern jedes Paars wiederholen, kann die Schreibweise auf drei oder vier Ziffern verkürzt werden. Daher ist #ff8800 auch #f80.

Toolbeschreibung

Mit diesem Tool können Sie einen Hex-Farbcode paarweise bearbeiten. Geben Sie einen Code ein oder fügen Sie ihn ein, wählen Sie eine Farbe aus oder fügen Sie eine Farbe im Format RGB, HSL oder einem anderen Format ein. Ändern Sie anschließend die Rot-, Grün-, Blau- und Alpha-Paare oder die Deckkraft und sehen Sie das Ergebnis auf einem Transparenzraster. Die bearbeitete Farbe wird in den Hex-Formaten angezeigt, die von CSS, Android und Code verwendet werden – jedes Format kann direkt kopiert werden.

Funktionen

  • 3-, 4-, 6- und 8-stellige Hex-Codes mit oder ohne # bearbeiten
  • Jeden Kanal als zweistelliges Hex-Paar und den Alpha-Kanal als Hex-Paar oder Prozentsatz ändern
  • Eine Farbe auswählen oder eine Farbe im Format RGB, HSL oder einem anderen Format einfügen und dabei den Alpha-Kanal beibehalten
  • Transparente Farben auf einem Schachbrettmuster anzeigen
  • Die Farbe als 6-stelliges HEX, 8-stelliges HEX, kurzes HEX, rgb() oder rgba(), #AARRGGBB und 0xAARRGGBB ausgeben
  • Zwischen Klein- und Großschreibung der Hex-Ziffern wechseln
  • Läuft in Ihrem Browser

So funktioniert es

Ein 3- oder 4-stelliger Code wird erweitert, indem jede Ziffer verdoppelt wird. Ein Code ohne Alpha-Paar ist vollständig deckend (ff). Eine einzelne Ziffer in einem Kanalfeld wird als 0 gefolgt von dieser Ziffer gewertet, sodass f zu 0f wird. Prozentangaben für die Deckkraft werden auf den nächsten Alpha-Wert zwischen 0 und 255 gerundet, sodass 80 % zu cc (204) werden. Die Kurzform ist nur möglich, wenn beide Ziffern jedes Paars übereinstimmen. Andernfalls bleibt das betreffende Feld leer.

Tipps

  • CSS liest das Alpha-Paar zuletzt (#RRGGBBAA), während Android-Farberessourcen und .NET es an erster Stelle erwarten (#AARRGGBB). Wählen Sie für diese Formate daher die ARGB-Felder aus.
  • Lassen Sie den Alpha-Wert auf ff, um einen einfachen 6-stelligen Code zu erhalten. Die 8-stelligen und ARGB-Felder zeigen ihn weiterhin vollständig an.