Farbkonverter
Farbkonverter
Konvertiere Farben zwischen HEX, RGB, HSL, HSV, CMYK und Farbnamen. Mit Live-Vorschau, Farbwähler, Slidern und Copy-to-Clipboard.
Datenschutz-Garantie: Alle Umrechnungen erfolgen zu 100% lokal in deinem Browser. Es werden keine Daten an Server gesendet. Perfekt für Webdesign, Grafikdesign und Druckvorbereitung.
Inhaltsverzeichnis
Schnellübersicht
- Farbkonverter: HEX, RGB, HSL, HSV, CMYK, Farbnamen
- Farbwähler: Visuelle Auswahl mit Live-Vorschau
- RGB-Farbmischung: Wie entstehen Farben auf dem Bildschirm?
- Biologie: Wie wir Farben sehen (Zapfen, Stäbchen, Spektrum)
- Presets: Beliebte Farben schnell auswählen
- Slider: RGB-Werte präzise einstellen
- Theorie: Was sind Farbräume? (Anfängerfreundlich)
- Geschichte: Von Pigmenten zu Pixeln
- FAQ: Häufige Fragen zu Farben
1. Farbkonverter
Wähle eine Farbe über den Picker oder gib einen Wert ein – die Umrechnung erfolgt sofort.
- Jede Kachel enthält den Wert in einem anderen Farbraum
- Klick auf die Kachel kopiert den Wert in die Zwischenablage
| Name | HEX | RGB | HSL |
|---|
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!
2. Theorie – Farbräume einfach erklärt
Verstehe die Grundlagen von Farbräumen – ohne Vorkenntnisse.
Was ist ein Farbraum?
Ein Farbraum ist ein System, um Farben mit Zahlen zu beschreiben. So können Computer, Drucker und Bildschirme dieselbe Farbe verstehen.
- HEX: #8B5CF6 – für Web & CSS
- RGB: rgb(139, 92, 246) – für Bildschirme
- HSL: hsl(258, 90%, 66%) – intuitiv für Menschen
- CMYK: für Drucker
Warum verschiedene Farbräume?
Jeder Farbraum hat einen anderen Zweck:
- RGB: Bildschirme mischen Licht (additiv)
- CMYK: Drucker mischen Pigmente (subtraktiv)
- HSL: Menschen denken in "Farbton + Helligkeit"
- HEX: Kompakt für HTML und CSS
Wo wird was eingesetzt?
Verschiedene Bereiche nutzen verschiedene Farbräume:
- Webdesign: HEX und RGB für CSS
- Grafikdesign: RGB für Bildschirm, CMYK für Druck
- Druckereien: CMYK mit ICC-Profilen
- Farbauswahl: HSL für Nutzer-Interfaces
- Datenvisualisierung: HSL für Farbverläufe
Tipps für Anfänger
- Web: Verwende HEX oder RGB in CSS
- Druck: Immer CMYK mit ICC-Profil
- Barrierefreiheit: Prüfe Kontrast (WCAG)
- Konsistenz: Nutze CSS-Variablen
- HSL für Schattierungen: Lightness ändern
Wussten Sie schon? Das menschliche Auge kann etwa 10 Millionen verschiedene Farben unterscheiden – aber ein typischer Bildschirm kann nur 16,7 Millionen darstellen (24-Bit RGB). Das liegt daran, dass unser Auge empfindlicher für Helligkeitsunterschiede ist als für Farbtöne. Deshalb verwenden moderne Displays oft 10-Bit-Panels (1,07 Milliarden Farben) für HDR-Inhalte.
3. Farbräume im Detail
Die wichtigsten Farbräume und ihre Anwendungsbereiche:
HEX (Hexadezimal)
Kompakte Schreibweise mit 6 Stellen:
- Format: #RRGGBB (z.B. #8B5CF6)
- Werte: 00 bis FF (0-255)
- Kurzform: #FFF = #FFFFFF
- Verwendung: HTML, CSS
RGB (Rot, Grün, Blau)
Additive Farbmischung für Bildschirme:
- Format: rgb(139, 92, 246)
- Werte: 0-255 pro Kanal
- Prinzip: Alle zusammen = Weiß
- Alpha: rgba(139, 92, 246, 0.5)
HSL (Hue, Saturation, Lightness)
Intuitiv für Menschen:
- Hue: Farbton (0-360°)
- Saturation: Sättigung (0-100%)
- Lightness: Helligkeit (0-100%)
- Vorteil: Einfach Schattierungen erzeugen
CMYK (Cyan, Magenta, Yellow, Key)
Subtraktive Farbmischung für Drucker:
- Werte: 0-100% pro Kanal
- Prinzip: Alle zusammen = Schwarz
- Vorteil: Drucker-tauglich
- Nachteil: Nicht alle RGB-Farben druckbar
4. Geschichte der Farbmodelle
Von Pigmenten über Farbkreise bis zu digitalen Farbräumen.
Newtons Farbkreis
Isaac Newton zerlegt mit einem Prisma weißes Licht in seine Spektralfarben. Er ordnet sie im ersten Farbkreis an – ein Meilenstein der Farbenlehre.
Goethes Farbenlehre
Johann Wolfgang von Goethe veröffentlicht seine Farbenlehre und beschreibt, wie Farben auf den Menschen wirken. Ein Gegenentwurf zu Newtons physikalischer Sicht.
RGB-Modell
James Clerk Maxwell zeigt, dass alle Farben aus den drei Grundfarben Rot, Grün und Blau gemischt werden können. Die Grundlage für alle modernen Bildschirme.
Munsell-Farbsystem
Albert Munsell entwickelt ein systematisches Farbsystem mit Hue, Value und Chroma – der Vorläufer von HSL.
CIELAB & CIELUV
Die CIE (Commission Internationale de l'Éclairage) entwickelt CIELAB – ein Farbraum, der die menschliche Wahrnehmung besser abbildet. Bis heute Standard in der Farbwissenschaft.
sRGB
HP und Microsoft entwickeln sRGB als Standard-Farbraum für Monitore, Drucker und das Internet. Wird zum meistgenutzten Farbraum der Welt.
Wide Gamut & HDR
Moderne Displays nutzen DCI-P3 und Rec. 2020 für brillantere Farben. HDR erweitert den Kontrastumfang. Farbmanagement mit ICC-Profilen wird Standard.
5. FAQ – Spannende Fragen & Antworten
Häufige Fragen zu Farben
Die beiden Farbräume funktionieren grundlegend unterschiedlich:
- RGB (additiv): Bildschirme mischen Licht. Je mehr Farbe, desto heller. R+G+B = Weiß.
- CMYK (subtraktiv): Drucker mischen Pigmente. Je mehr Farbe, desto dunkler. C+M+Y = Schwarz (theoretisch).
Warum sehen gedruckte Farben anders aus?
- Ein Drucker kann nicht alle RGB-Farben darstellen
- Besonders leuchtende Grüntöne und Neonfarben sind problematisch
- Papier und Tinte beeinflussen das Ergebnis
Best Practice: Arbeite im RGB-Modus und konvertiere erst am Ende in CMYK mit einem ICC-Profil.
HSL ist oft intuitiver, besonders für Design-Systeme:
- Farbton (Hue): Der eigentliche Farbton (0-360°)
- Sättigung (Saturation): Wie kräftig die Farbe ist
- Helligkeit (Lightness): Wie hell oder dunkel
Beispiel: Schattierungen erzeugen
- Mit RGB: Jeden Kanal einzeln anpassen
- Mit HSL: Nur Lightness ändern – Hue bleibt gleich!
.btn { background: hsl(258, 90%, 66%); }
.btn:hover { background: hsl(258, 90%, 56%); }
Fazit: HSL ist besser für konsistente Farbverläufe und Design-Systeme.
#FFF ist die Kurzform von #FFFFFF – und funktioniert nach einem einfachen Prinzip:
- Wenn jede der 6 Stellen identisch ist, kann man sie abkürzen
- Aus #FF0000 wird #F00
- Aus #AABBCC wird #ABC
- Aus #FFFFFF wird #FFF
Beispiele:
#F00 = #FF0000 (Rot)
#0F0 = #00FF00 (Grün)
#00F = #0000FF (Blau)
Achtung: Funktioniert nur, wenn die Stellen paarweise gleich sind! #AABBCC → #ABC ✅, aber #AABBCD → kein Kürzen möglich ❌
Für Webseiten gibt es ein paar bewährte Regeln:
- Kontrast: Mindestens 4.5:1 für Text (WCAG AA)
- Primärfarbe: Eine Hauptfarbe für Buttons und Links
- Sekundärfarben: 1-2 Akzentfarben
- Neutraltöne: Graustufen für Hintergründe und Text
- Barrierefreiheit: Nicht nur auf Farbe setzen (Farbenblindheit!)
Bewährte Web-Farbpaletten:
| Farbe | HEX | Verwendung |
|---|---|---|
| Primärblau | #3B82F6 | Buttons, Links |
| Erfolg | #10B981 | Bestätigungen |
| Warnung | #F59E0B | Warnungen |
| Fehler | #EF4444 | Fehlermeldungen |
| Neutral | #6B7280 | Text, Hintergrund |
Tipp: Verwende CSS-Variablen für konsistente Farben!
Die WCAG (Web Content Accessibility Guidelines) definiert Kontrastanforderungen:
| Level | Normaler Text | Großer Text |
|---|---|---|
| AA (Minimum) | 4.5:1 | 3:1 |
| AAA (Erhöht) | 7:1 | 4.5:1 |
Kontrast berechnen: Die Formel lautet:
L = relative Luminanz
Tools zum Prüfen:
- WebAIM Contrast Checker (online)
- Chrome DevTools (Farbwähler zeigt Kontrast)
- Figma-Plugins wie "Contrast"
- Adobe Color mit Accessibility-Check
Tipp: Teste auch mit Farbenblindheits-Simulatoren, um sicherzustellen, dass deine Seite für alle nutzbar ist.
Beide Modelle basieren auf Farbton (Hue), unterscheiden sich aber im Detail:
| Aspekt | HSL | HSV |
|---|---|---|
| Bedeutung | Hue, Saturation, Lightness | Hue, Saturation, Value |
| Sättigung 100% | Reine Farbe | Reine Farbe |
| Helligkeit 100% | Weiß | Reine Farbe |
| Helligkeit 50% | Reine Farbe | - |
| Verwendung | CSS, Design | Farbwähler, Bildbearbeitung |
Visuell:
- HSL: Wie ein Farbkreis mit Helligkeitsachse
- HSV: Wie ein Zylinder mit Helligkeitsachse
Faustregel: HSL für CSS, HSV für Farbwähler und Bildbearbeitung.
Das hat mehrere Gründe:
- Farbraum: Nicht jeder Bildschirm deckt sRGB vollständig ab
- Kalibrierung: Monitore sind unterschiedlich eingestellt
- Panel-Typ: IPS, VA, OLED zeigen Farben unterschiedlich
- Betrachtungswinkel: Farben können sich verändern
- Umgebungslicht: Sonnenlicht vs. Kunstlicht
Lösung: Farbmanagement mit ICC-Profilen
- Jedes Gerät hat ein ICC-Profil
- Browser und Betriebssystem konvertieren die Farben
- Für professionelle Arbeit: Monitor kalibrieren
Für Webdesigner: Arbeite immer im sRGB-Farbraum – das ist der kleinste gemeinsame Nenner und funktioniert überall.
CSS bietet zwei Arten von Gradients:
1. Linearer Gradient:
2. Radialer Gradient:
Tipps für schöne Gradients:
- HSL für Farbton-Verschiebung: Hue ändern, S/L konstant
- Analoge Farben: Nachbarn im Farbkreis (z.B. Blau → Lila)
- Komplementär: Gegenüberliegende Farben (z.B. Blau → Orange)
- Mehrere Stops: linear-gradient(90deg, #f00, #0f0, #00f)
Online-Tools: CSS Gradient, Coolors, uiGradients
Der Unterschied liegt in der physikalischen Grundlage:
RGB (additiv) – Bildschirme:
- Ein Bildschirm sendet Licht aus
- Rot + Grün + Blau = Weiß (alle Lichtwellen zusammen)
- Schwarz = keine Lichtemission (alle auf 0)
- Je mehr Licht du hinzufügst, desto heller wird es
CMYK (subtraktiv) – Drucker:
- Ein Drucker verwendet Pigmente auf weißem Papier
- Die Pigmente absorbieren (subtrahieren) Lichtwellen
- Cyan absorbiert Rot, Magenta absorbiert Grün, Yellow absorbiert Blau
- Alle zusammen = Schwarz (theoretisch)
CMYK: 0,0,0,0 = Weiß (Papier) / 0,0,0,100 = Schwarz
Merksatz: Additiv = Licht hinzufügen (heller), Subtraktiv = Pigment hinzufügen (dunkler).
Zusammenfassung
Die wichtigsten Punkte
- HEX: #RRGGBB – kompakt für Web & CSS
- RGB: rgb(R, G, B) – additiv für Bildschirme
- HSL: intuitiv für Menschen (Farbton, Sättigung, Helligkeit)
- CMYK: subtraktiv für Drucker
- Kurzform: #FFF = #FFFFFF (nur bei paarweisen Stellen)
- RGB-Mischung: Additiv – R+G+B = Weiß
- Biologie: Zapfen & Stäbchen – sichtbares Spektrum 380-780 nm
- Barrierefreiheit: WCAG-Kontrast (AA: 4.5:1)
- Unser Tool: Konvertierung in alle Formate mit Live-Vorschau
Weitere Tools
Unix-Zeitstempel in lesbare Daten umwandeln und umgekehrt.
Zum ToolErstelle .gitignore-Dateien für alle gängigen Sprachen und Tools.
Zum ToolErstelle QR-Codes mit Logo, Farben und Fehlerkorrektur-Level.
Zum ToolMD5, SHA-1, SHA-256 und SHA-512 für Text und Dateien.
Zum Tool