Farbkonverter & Atelier
Farbkonverter & Atelier
Wandle Farben zwischen HEX, RGB und HSL um. Generiere harmonische Paletten, prüfe Kontraste für Barrierefreiheit und verstehe, wie aus drei Grundfarben Millionen von Farben entstehen.
Farbe wählen
Farbharmonien
Kontrast-Check (WCAG)
Prüfung der Lesbarkeit gegen Weiß und Schwarz nach WCAG 2.1 Richtlinien.
Wie entstehen Farben? Das RGB-Modell
Computerbildschirme verwenden das additive Farbmodell RGB. Aus nur drei Grundfarben – Rot, Grün und Blau – können durch Mischung Millionen verschiedener Farben erzeugt werden.
Additive Mischung: Wenn alle drei Farben mit maximaler Intensität (255) gemischt werden, entsteht Weiß. Wenn alle drei auf 0 stehen, entsteht Schwarz. Jeder Kanal (R, G, B) kann einen Wert von 0 bis 255 annehmen, was insgesamt 256³ = 16.777.216 mögliche Farben ergibt.
Additiv vs. Subtraktiv
Additiv (RGB): Für Bildschirme. Licht wird addiert → Weiß.
Subtraktiv (CMYK): Für Druck. Farbe wird absorbiert → Schwarz.
Warum gerade Rot, Grün, Blau?
Das menschliche Auge hat drei Arten von Zapfen (Farbrezeptoren), die jeweils am empfindlichsten für rotes, grünes bzw. blaues Licht sind. RGB nutzt genau diese Biologie.
24 Bit Farbtiefe
8 Bit pro Kanal × 3 Kanäle = 24 Bit. Das ergibt 2²⁴ = 16,7 Millionen Farben – mehr als das menschliche Auge unterscheiden kann.
Wie wir Farben sehen
Farbe ist keine physikalische Eigenschaft des Lichts selbst, sondern eine Empfindung unseres Gehirns. Licht ist elektromagnetische Strahlung; erst unser Auge und Gehirn übersetzen Wellenlängen in "Farbe".
Das sichtbare Spektrum
Menschen sehen nur einen winzigen Teil des elektromagnetischen Spektrums: Wellenlängen von ca. 380 nm (Violett) bis 780 nm (Rot).
Zapfen & Stäbchen
Unsere Netzhaut hat Zapfen für Farbwahrnehmung (Rot, Grün, Blau) und Stäbchen für Hell-Dunkel-Sehen bei Nacht.
Farbschwäche
Ca. 8% der Männer und 0,5% der Frauen haben eine Farbsinnstörung (meist Rot-Grün-Schwäche). Deshalb sind Kontrast-Checks wichtig!
Geschichte der Farbtheorie
Von antiken Philosophen bis zur modernen digitalen Farbmetrik – eine Reise durch das Verständnis der Farbe.
~300 v. Chr. – Aristoteles
Glaubte, Farben entstünden durch Mischung von Licht und Finsternis. Diese Theorie hielt sich fast 2000 Jahre.
1666 – Isaac Newton
Bricht weißes Licht mit einem Prisma in Regenbogenfarben. Erkenntnis: Weißes Licht enthält alle Farben. Er erstellt den ersten Farbkreis.
1810 – Johann Wolfgang von Goethe
Veröffentlicht "Zur Farbenlehre". Betont die psychologische Wirkung von Farben (Warm/Kalt) statt nur Physik.
1861 – James Clerk Maxwell
Fertigt das erste permanente Farbfoto an (Tartan Ribbon). Beweis der additiven Farbmischung (RGB).
1905 – Albert H. Munsell
Entwickelt das Munsell-Farbsystem (Farbton, Sättigung, Helligkeit). Vorläufer moderner HSL/HSV-Modelle.
1931 – CIE-Normvalenzsystem
Internationale Kommission für Beleuchtung definiert den mathematischen Farbraum (CIE XYZ). Basis aller heutigen Farbmodelle.
1996 – sRGB Standard
HP und Microsoft definieren sRGB als Standard für Monitore und Internet. Bis heute der meistgenutzte Farbraum im Web.
Digitale Farbmodelle
HEX (Hexadezimal)
Der Web-Standard. Eine 6-stellige Kombination aus Zahlen und Buchstaben (0-9, A-F), die Rot-, Grün- und Blauanteile repräsentiert.
#FF0000 = Rot
RGB (Additiv)
Für Bildschirme. Rotes, grünes und blaues Licht wird addiert. Alle zusammen ergeben Weiß. Werte 0-255 pro Kanal.
rgb(255, 0, 0) = Rot
CMYK (Subtraktiv)
Für Druck. Cyan, Magenta, Yellow und Key (Schwarz) werden gemischt. Alle zusammen ergeben theoretisch Schwarz.
cmyk(0%, 100%, 100%, 0%) = Rot
HSL / HSV
Intuitiver für Menschen. Hue (Farbton 0-360°), Saturation (Sättigung 0-100%), Lightness (Helligkeit 0-100%).
hsl(0, 100%, 50%) = Rot
FAQ – Häufige Fragen & Antworten
RGB gibt die Farbe als drei Dezimalzahlen an (z.B. rgb(255, 128, 0)). Jeder Wert steht für die Intensität von Rot, Grün bzw. Blau (0-255).
HEX ist einfach eine andere Schreibweise derselben Werte in hexadezimaler Form. #FF8000 entspricht exakt rgb(255, 128, 0). HEX wird im Web bevorzugt, weil es kompakter ist (6 Zeichen statt 3 Zahlen).
HSL (Hue, Saturation, Lightness) ist intuitiver für Menschen:
- Hue (Farbton): 0-360° auf dem Farbkreis
- Saturation (Sättigung): 0% (grau) bis 100% (knallig)
- Lightness (Helligkeit): 0% (schwarz) bis 100% (weiß)
HSL ist perfekt, wenn du Farbvarianten erstellen willst (z.B. heller/dunkler machen), ohne den Farbton zu ändern.
WCAG (Web Content Accessibility Guidelines) sind internationale Richtlinien für barrierefreie Webinhalte. Kontrast ist entscheidend, damit Texte auch für Menschen mit Sehbehinderungen lesbar sind.
Level AA (empfohlen): Mindestkontrast 4.5:1 für normalen Text, 3:1 für großen Text.
Level AAA (streng): Mindestkontrast 7:1 für normalen Text, 4.5:1 für großen Text.
Bildschirme haben unterschiedliche Farbräume (Color Spaces) und Kalibrierungen. Ein sRGB-Monitor zeigt Farben anders als ein Adobe-RGB-Monitor. Auch Helligkeit, Gamma und Farbtemperatur variieren.
Für konsistente Darstellung im Web: Verwende immer sRGB als Farbraum und teste auf verschiedenen Geräten.
sRGB: Standard für Web und die meisten Monitore. Kleinerer Farbraum, aber universell kompatibel.
Adobe RGB: Größerer Farbraum mit mehr Grüntönen. Wird in der professionellen Fotografie und Druckvorstufe verwendet. Nicht für Web geeignet!
Tipp: Für Webdesign immer sRGB verwenden. Adobe RGB nur für Druckproduktion.
Das menschliche Auge kann etwa 10 Millionen verschiedene Farben unterscheiden. Moderne Bildschirme mit 24 Bit Farbtiefe können 16,7 Millionen Farben darstellen – also mehr als wir sehen können.
Interessant: Wir können Helligkeitsunterschiede besser unterscheiden als Farbunterschiede. Deshalb funktionieren Kompressionsalgorithmen wie JPEG so gut.
Der Alpha-Kanal steuert die Transparenz einer Farbe. In CSS wird er als vierter Wert angegeben:
rgba(255, 0, 0, 0.5) = halbtransparentes Rot (50% durchsichtig)
Alpha-Werte gehen von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig).
Weitere interaktive Tools
Erstelle QR-Codes für URLs, WiFi, vCards und mehr mit Farbanpassung.
Zum ToolGeneriere EAN-13, Code128, Code39 und weitere Barcode-Formate.
Zum ToolLerne Binär, Hexadezimal und Oktal umzurechnen – die Basis von HEX-Farben.
Zu Zahlensystemen