BESTE WEBSITE FÜR WEBENTWICKLER
HTML-Farben. Lektionen für Anfänger

Ua En Es Fr

Farben HEX (hexadezimal)


Was sind HEX-Farben?

Der HEX-Farbcode ist eine Möglichkeit, Farbe mit dem hexadezimalen Zahlensystem darzustellen. Es besteht aus sechs Zeichen (Ziffern 0 bis 9 und Buchstaben A bis F), die die Intensität der Farben Rot, Grün und Blau in unterschiedlichen Anteilen angeben. Jedes Symbolpaar ist für eine Farbe verantwortlich: Das erste Paar steht für Rot, das zweite für Grün, das dritte für Blau.


Wie funktioniert das?

Jedes Zeichen in einem HEX-Code kann einen Wert zwischen 0 und 15 haben. Je höher der Wert des Zeichens, desto größer ist die Intensität der entsprechenden Farbe. Der HEX-Code #FF0000 bedeutet z. B. hellrot, da das erste Zeichenpaar (FF) einen Maximalwert für die Farbe Rot und die anderen Zeichenpaare (00) einen Mindestwert für Grün und Blau haben.

#RRGGBB sieht das HEX-Format aus. Beispiel: #FF5733:

  • FF ist rot (Maximum, 255).
  • 57 ist grün (87 in Dezimalzahlen).
  • 33 ist blau (51 in Dezimalzahlen).

Wo werden HEX-Farben verwendet?

Der HEX-Farbcode wird häufig im Webdesign, Grafikdesign und in anderen Bereichen verwendet, in denen Sie eine Farbe genau angeben müssen. Hier sind einige Beispiele:

  • Webdesign: HEX-Code wird verwendet, um die Farbe des Textes, des Hintergrunds, der Ränder und anderer Elemente einer Webseite anzugeben.
  • Grafikdesign: HEX-Code wird verwendet, um Farbbilder, Logos und andere grafische Elemente zu erstellen (z. B. in Photoshop, Illustrator).
  • Programmierung: HEX-Code kann verwendet werden, um Farben in verschiedenen Anwendungen, mobilen Anwendungen und Spielen anzugeben.

Beispiel

Verwenden von HEX-Farben beim Formatieren einer Webseite:

body {
  background-color: #FF5733; /* Orangefarbener Hintergrund */
  color: #FFFFFF; /* Weißer Text */
}

Vorteile des HEX-Codes

  • Präzision: Mit dem HEX-Code können Sie jede Farbe aus Millionen möglicher Schattierungen genau einstellen.
  • Kompakt: HEX-Code nimmt weniger Platz ein als andere Arten der Farbdarstellung, z. B. RGB oder CMYK.
  • Vielseitigkeit: HEX-Code wird von den meisten Farbprogrammen und -tools unterstützt.

Nachteile des HEX-Codes:

Der HEX-Farbcode ist zwar weit verbreitet und praktisch, hat aber auch seine Nachteile:

  • Kleiner Bereich für die Feinabstimmung der Farbe: HEX verwendet nur das hexadezimale Zahlensystem, das die Anzahl der möglichen Optionen für jede Primärfarbe (Rot, Grün und Blau) begrenzt. Dies kann bei der Feinabstimmung der Farbe zu einer Herausforderung führen, insbesondere für Designer, die mehr Flexibilität benötigen. Wenn Sie beispielsweise Farben genauer rendern müssen, als es HEX zulässt, kann dies im Vergleich zu anderen Systemen schwierig sein, z. B. RGB oder HSL.
  • Fehlende Helligkeit und Sättigung: Mit HEX-Codes können Sie Parameter wie Helligkeit oder Farbsättigung nicht direkt anpassen, wie dies im HSL-System möglich ist (Farbton, Sättigung, Helligkeit). In HSL können Sie nur die Sättigung oder Helligkeit ändern, ohne die Farbe selbst zu ändern, was in einigen Fällen praktischer sein kann.
  • Unfähigkeit, Transparenz darzustellen: Im Standard-HEX-Code gibt es keine Möglichkeit, Transparenz (Alphakanal) darzustellen. Dabei werden erweiterte Formate wie RGBA (RGB mit Alphakanal) verwendet, bei denen ein Transparenzwert hinzugefügt wird. Bei reinem HEX ist dies jedoch nicht ohne Erweiterungen möglich.
  • Schwierigkeit in der Wahrnehmung: HEX-Code ist für eine Person schwer zu lesen und zu verstehen, insbesondere ohne spezielle Kenntnisse. Im Gegensatz zu RGB, bei dem jede Komponente (Rot, Grün, Blau) separat und klar dargestellt wird, muss der HEX-Code von hexadezimal in dezimal umgewandelt werden, um die Intensität der einzelnen Farben zu verstehen.
  • Schwierig, Farben mit dem Auge zu ändern: Aufgrund der Komplexität der Struktur des HEX-Codes ist es schwer vorstellbar, wie sich die Farbe ändert, wenn ein oder zwei Zeichen geändert werden. Wenn Sie beispielsweise die Farbe etwas abdunkeln müssen, ist nicht klar, welche Zeichen und wie viel Sie ändern müssen. Dadurch ist der HEX-Code weniger intuitiv für eine schnelle Farbbearbeitung.
  • Für einige Aufgaben nicht geeignet: In einigen Fällen, z. B. bei der Arbeit mit Farbverläufen oder beim Anpassen der Transparenz, ist es bequemer, andere Formate wie RGB oder HSL zu verwenden. HEX-Code unterstützt diese Funktionen nicht immer oder erfordert zusätzliche Konvertierungen.
  • Druckfehler: Manchmal können beim Kopieren oder Übertragen eines HEX-Codes aufgrund seiner Länge und Komplexität Fehler auftreten. Es ist leicht, versehentlich ein Zeichen zu ändern, was zu einer völlig anderen Farbe führt.
  • Nicht immer von älteren Anwendungen unterstützt: Obwohl HEX-Code der Standard ist, wird er von einigen älteren Anwendungen oder Tools möglicherweise nicht unterstützt, was seine Verwendung in solchen Fällen einschränkt.

Hinweis: Trotz dieser Nachteile bleibt HEX-Code aufgrund seiner Kompaktheit und Vielseitigkeit das beliebteste Farbdarstellungsformat für Website- und Webanwendungen. Es ist jedoch wichtig, die Grenzen zu verstehen und gegebenenfalls andere Formate zu verwenden.


Wie bekommt man eine HEX-Farbe?

Um eine HEX-Farbe zu erhalten, können Sie einen HEX-Rechner verwenden.

Hex-Rechner


 
rgb(255, 0, 0)
hsl(0, 100%, 50%)


R:
ff
G:
00
B:
00

Hexadezimale Farben

Hexadezimale Farbwerte werden ebenfalls in allen Browsern unterstützt.

Eine hexadezimale Farbe wird angegeben mit: #RRGGBB.

RR (rot), GG (grün) und BB (blau) sind hexadezimale Ganzzahlen zwischen 00 und FF, die die Intensität der Farbe angeben.

#0000FF wird z. B. blau angezeigt, da die blaue Komponente auf den höchsten Wert (FF) und die anderen auf 00 festgelegt sind.


Probieren Sie es selbst aus

Hexadezimale Farbwerte werden in allen Browsern unterstützt.

Beispiel

<style>
div {
    background-color: #00bfff;
    color: #ffffff;
}
</style>
Try It Yourself »