HEX in RGB umwandeln und zurueck: Leitfaden fuer Designer und Entwickler

Farbmodelle sind mathematische Systeme zur digitalen Darstellung von Farben. Ob Sie in der Webentwicklung, im Grafikdesign, Branding oder einer anderen visuellen Disziplin arbeiten — Sie muessen mindestens drei Modelle verstehen: HEX, RGB und HSL. Jedes hat seine Vorteile je nach Kontext.

Modernes CSS akzeptiert alle drei Formate. Sie koennen dasselbe Rot so schreiben:

• HEX: #FF0000
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%)

Alle drei erzeugen exakt dieselbe Farbe, aber ihre Nuetzlichkeit variiert. HEX ist kompakt fuer CSS. RGB ist intuitiv, wenn man an Lichtmischung denkt. HSL ist ideal, wenn man Helligkeit oder Saettigung anpassen moechte, ohne den Farbton zu aendern.

Mit dem NexTools Farbkonverter koennen Sie sofort zwischen allen Formaten umrechnen und eine Echtzeitvorschau der Farbe sehen.

Das HEX-Format (hexadezimal) stellt Farben mit einem #-Zeichen gefolgt von 6 hexadezimalen Ziffern (0-9, A-F) dar. Die Ziffern werden paarweise gruppiert: die ersten zwei fuer Rot, die naechsten zwei fuer Gruen und die letzten zwei fuer Blau.

Struktur: #RRGGBB

Jedes Paar reicht von 00 (0 dezimal, nichts von dieser Farbe) bis FF (255 dezimal, maximale Intensitaet):

Farbe	HEX	Erklaerung
Schwarz	#000000	Kein Rot, Gruen oder Blau
Weiss	#FFFFFF	Maximales Rot, Gruen und Blau
Reines Rot	#FF0000	Maximales Rot, kein Gruen oder Blau
Reines Gruen	#00FF00	Kein Rot, maximales Gruen, kein Blau
Reines Blau	#0000FF	Kein Rot oder Gruen, maximales Blau
Gelb	#FFFF00	Maximales Rot und Gruen, kein Blau
Mittleres Grau	#808080	Gleiche mittlere Anteile

Kurzschreibweise: Wenn jedes Paar identische Ziffern hat, koennen Sie abkuerzen: #FF0000 = #F00. Aber #A1B2C3 kann nicht verkuerzt werden.

HEX mit Transparenz: Fuegen Sie zwei weitere Ziffern fuer Alpha (Deckkraft) hinzu: #FF000080 ist Rot mit 50 % Deckkraft.

Das RGB-Modell (Red, Green, Blue) basiert auf der additiven Lichtmischung. Jede Komponente reicht von 0 bis 255, und ihre Mischung erzeugt Millionen Farben (genau 16.777.216 Kombinationen).

In CSS: rgb(rot, gruen, blau)

Praktische Beispiele:

• rgb(255, 165, 0) = Orange
• rgb(128, 0, 128) = Violett
• rgb(0, 128, 128) = Petrol
• rgb(255, 192, 203) = Rosa

Mit Transparenz (RGBA): rgba(255, 0, 0, 0.5) = Rot mit 50 % Deckkraft.

HEX zu RGB Umrechnung: Konvertieren Sie jedes Hex-Paar in Dezimal. Fuer #3A7BF2: 3A = 58, 7B = 123, F2 = 242. Ergebnis: rgb(58, 123, 242).

RGB zu HEX Umrechnung: Konvertieren Sie jeden Dezimalwert in 2-stelliges Hexadezimal. Fuer rgb(58, 123, 242): 58 = 3A, 123 = 7B, 242 = F2. Ergebnis: #3A7BF2.

Das HSL-Modell (Hue, Saturation, Lightness) ist das intuitivste, weil es Farbe in drei leicht verstaendliche Dimensionen aufteilt:

• Hue (Farbton): Die Grundfarbe in Grad von 0 bis 360. 0°/360° = Rot, 120° = Gruen, 240° = Blau.
• Saturation (Saettigung): Wie „lebendig" die Farbe ist, von 0 % (Grau) bis 100 % (reine Farbe).
• Lightness (Helligkeit): Wie hell oder dunkel, von 0 % (Schwarz) bis 100 % (Weiss). 50 % ist die reine Farbe.

Warum HSL so maechtig ist: Wenn Sie einen blauen Button hsl(220, 80%, 50%) haben und eine hellere Hover-Version wollen, erhoehen Sie einfach die Helligkeit: hsl(220, 80%, 60%).

Paletten mit HSL erstellen:

• Monochromatisch: Gleicher Farbton, Saettigung und Helligkeit variieren.
• Komplementaer: 180° zum Farbton addieren.
• Triadisch: 120° und 240° zum Farbton addieren.

Experimentieren Sie mit Farbpaletten im Palettengenerator.

Diese Farben begegnen Ihnen am haeufigsten im Webdesign mit ihren Entsprechungen:

Name	HEX	RGB	Haeufige Verwendung
Tailwind Blue 500	#3B82F6	rgb(59,130,246)	CTAs, Links
Tailwind Red 500	#EF4444	rgb(239,68,68)	Fehler, Warnungen
Tailwind Green 500	#22C55E	rgb(34,197,94)	Erfolg, Bestaetigung
Tailwind Yellow 500	#EAB308	rgb(234,179,8)	Hinweise
NexTools Primary	#C75B39	rgb(199,91,57)	Terrakotta, Marke

Um die genaue Farbe einer Website zu finden, verwenden Sie den Farbwaehler.

Waehrend RGB und HEX fuer Bildschirme sind (Licht), ist CMYK (Cyan, Magenta, Gelb, Schwarz) das Modell fuer den Druck (Tinte).

Warum Farben gedruckt anders aussehen: Ein Bildschirm strahlt Licht aus (RGB), waehrend Papier Licht reflektiert (CMYK). Der Farbumfang (Gamut) von CMYK ist kleiner als der von RGB.

• Elektrische Blautone und Neongruen verlieren an Lebendigkeit in CMYK
• Rot- und Orangetoene bleiben in der Regel gut erhalten
• Reines Schwarz in CMYK ist C:75 M:68 Y:67 K:90 (genannt „Rich Black"), nicht C:0 M:0 Y:0 K:100

Wenn Sie fuer den Druck gestalten, arbeiten Sie immer von Anfang an in CMYK statt am Ende zu konvertieren.

Farbwahl ist nicht nur eine Frage der Aesthetik. Die WCAG 2.1-Richtlinien legen Mindestkontrast-Verhaeltnisse zwischen Text und Hintergrund fest:

• AA (Minimum): Kontrast von 4,5:1 fuer normalen Text, 3:1 fuer grossen Text (18px+ oder 14px+ fett)
• AAA (Optimal): Kontrast von 7:1 fuer normalen Text, 4,5:1 fuer grossen Text

Beispiel: Weisser Text #FFFFFF auf blauem Hintergrund #3B82F6 hat ein Kontrast-Verhaeltnis von 3,1:1 — das besteht AA fuer grossen Text, aber NICHT fuer normalen Text.

Ueberpruefen Sie immer den Kontrast Ihrer Farbkombinationen mit dem Kontrastpruefungstool.

Fakt: Etwa 8 % der Maenner und 0,5 % der Frauen haben eine Form der Farbenblindheit. Verwenden Sie nie nur Farbe, um kritische Informationen zu vermitteln.

In der modernen Webentwicklung werden Farben mit CSS Custom Properties (CSS-Variablen) verwaltet, um Themes und Dark Mode zu erleichtern:

:root {
  --color-primary: #C75B39;
  --color-background: #FFFFFF;
  --color-text: #1A1A1A;
}

.dark {
  --color-primary: #E8956E;
  --color-background: #1A1A1A;
  --color-text: #F5F5F5;
}

Mit diesem Ansatz erfordert das Aendern der gesamten Palette einer Website nur die Anpassung der Variablen, nicht jedes einzelnen Selektors. Frameworks wie Tailwind CSS verwenden dieses Muster intern.

Tipp: Beim Erstellen eines dunklen Themes die Farben nicht einfach umkehren. Saettigung leicht reduzieren und warme Grautoene statt reinem Schwarz verwenden (#1A1A1A statt #000000).

Erstellen Sie benutzerdefinierte CSS-Verlaeufe fuer Ihre Themes mit dem Verlaufsgenerator.