Farbwähler/Konverter
Wählen Sie Farben und konvertieren Sie zwischen verschiedenen Formaten
Alternative Übereinstimmungen:
Textdarstellung Vorschau
The quick brown fox jumps over the lazy dog
color: #6366f1; background-color: #6366f1; border-color: #6366f1;
Über Farbmodelle
Verstehen und Konvertieren von Farben für Web und Print.
Das Verständnis verschiedener Farbmodelle ist für Webentwicklung, UI-Design und die Erstellung digitaler Kunst unerlässlich.
Unterstützte Formate
#RRGGBB
0-255, 0-255, 0-255
0°-360°, 0-100%, 0-100%
0°-360°, 0-100%, 0-100%
0-100%, ×4
16-235, 16-240, 16-240
L*: 0-100, a*/b*: -128 to +127
Details zu Farbformaten
HEX (Hexadezimal)
HEX-Farben verwenden eine 6-stellige Hexadezimalnotation mit vorangestelltem #. Jedes Paar repräsentiert Rot-, Grün- und Blauwerte (00-FF). Kurzschreibweise (#RGB) erweitert sich zu #RRGGBB. Unterstützt 8-stelliges Format für Alpha-Transparenz (#RRGGBBAA).
Verwendung: CSS, HTML, Webdesign, die meisten Programmiersprachen
RGB (Rot, Grün, Blau)
Das RGB-Modell ist ein additives Farbmodell, bei dem rotes, grünes und blaues Licht kombiniert werden, um Farben zu erzeugen. Dieses Modell entspricht direkt der Art und Weise, wie Bildschirme Licht aussenden, wodurch es der native Farbraum für digitale Anzeigen ist.
Verwendung: Bildschirmanzeigen, LED-Beleuchtung, CSS, digitale Bildverarbeitung
HSL (Farbton, Sättigung, Helligkeit)
HSL stellt Farben in Bezug auf die menschliche Wahrnehmung dar. Der Farbton ist der Farbwinkel auf einem Farbkreis, die Sättigung ist die Intensität und die Helligkeit zeigt, wie hell oder dunkel die Farbe ist. Dies macht die Farbmanipulation intuitiver.
Verwendung: CSS, Farbschemagenerierung, intuitive Farbauswahl
HSV/HSB (Farbton, Sättigung, Wert/Helligkeit)
HSV (auch HSB genannt) ähnelt HSL, verwendet jedoch Wert anstelle von Helligkeit. Wert repräsentiert die Helligkeit, wobei 100% die hellste ist. Dieses Modell wird in vielen Grafikanwendungen bevorzugt, da es besser damit übereinstimmt, wie Künstler über Farbe denken.
Verwendung: Photoshop, GIMP, Farbwähler in Grafiksoftware
CMYK (Cyan, Magenta, Gelb, Schwarz)
CMYK ist ein subtraktives Farbmodell, das im Druck verwendet wird. Im Gegensatz zu RGB, das Licht hinzufügt, subtrahiert CMYK Licht von weißem Papier. Das 'K' steht für Key (Schwarz), um die Druckqualität zu verbessern und den Tintenverbrauch zu reduzieren.
Verwendung: Druckdesign, kommerzieller Druck, Verpackung
YCbCr (Luminanz, Chrominanz)
YCbCr trennt die Luma-Komponente (Y) von den Chroma-Komponenten (Cb, Cr). Diese Trennung ermöglicht eine effiziente Videokompression, da menschliche Augen empfindlicher für Helligkeit als für Farbe sind. Häufig in JPEG, MPEG und Rundfunkstandards verwendet.
Verwendung: JPEG-Kompression, Videocodierung (H.264, HEVC), TV-Rundfunk
Lab (CIE L*a*b*)
Lab ist ein wahrnehmungsgleichmäßiger Farbraum, der entwickelt wurde, um das menschliche Sehen zu approximieren. L* repräsentiert Helligkeit, a* die Grün-Rot-Achse und b* die Blau-Gelb-Achse. Eine wahrnehmbare Distanz von 1 Einheit sieht unabhängig von der Farbe ungefähr gleich aus.
Verwendung: Farbwissenschaft, Farbdifferenzberechnung (Delta E), professionelles Farbmanagement
Pantone (PMS)
Pantone Matching System (PMS) ist ein proprietäres Farbstandardisierungssystem, das weithin im Druck, in der Mode und im Produktdesign verwendet wird. Jede Farbe hat einen eindeutigen Code, der eine konsistente Reproduktion über verschiedene Materialien und Hersteller hinweg gewährleistet.
Verwendung: Markenidentität, kommerzieller Druck, Verpackungsdesign, Textilindustrie
Hinweis: Dies sind ungefähre digitale Darstellungen. Tatsächliche Pantone-Farben können im Druck variieren.
Grundlagen der Farbtheorie
Farben existieren in verschiedenen 'Räumen', die für verschiedene Zwecke optimiert sind. Additive Modelle (RGB) funktionieren durch Hinzufügen von Licht, während subtraktive Modelle (CMYK) durch Absorbieren von Licht funktionieren. Wahrnehmungsmodelle (Lab) richten sich nach dem menschlichen Sehen.
Additives Farbmodell
RGB kombiniert rotes, grünes und blaues Licht. Das Hinzufügen aller drei bei voller Intensität erzeugt Weiß. So funktionieren Bildschirme, Projektoren und digitale Anzeigen.
Subtraktives Farbmodell
CMYK absorbiert (subtrahiert) Lichtwellenlängen von Weiß. Das Kombinieren aller Farben erzeugt (theoretisch) Schwarz. So funktionieren Tinten und Farben.
Wahrnehmungsfarbmodell
Lab und ähnliche Räume sind um die menschliche Wahrnehmung herum gestaltet, was sie ideal für Farbvergleich und -korrektur macht.
Konvertierungshinweise
- RGB ↔ HEX: Verlustfreie Konvertierung, nur Formatänderung
- RGB ↔ HSL/HSV: Verlustfrei innerhalb des Gamuts, kann Präzision verlieren
- RGB ↔ CMYK: Kann Farben außerhalb des Druckgamuts verlieren
- RGB ↔ Lab: Verwendet D65 Illuminant, sRGB Farbraum angenommen
- RGB ↔ YCbCr: Verwendet standardmäßig BT.601 Standard
WCAG-Kontraststandards
Die Web Content Accessibility Guidelines (WCAG) definieren Mindestkontrastanforderungen zwischen Text und Hintergrund, um sicherzustellen, dass alle Benutzer, einschließlich derer mit Sehbehinderungen, den Inhalt lesen können.
Häufige Anwendungsfälle
Häufig gestellte Fragen
Was ist der Unterschied zwischen den Farbformaten HEX, RGB und HSL?
HEX ist eine kompakte sechsstellige Hexadezimalnnotation (z. B. #FF5733), die dieselben Rot-, Grün- und Blaukanäle wie RGB in einem String kodiert. RGB gibt jeden Kanal als Dezimalzahl von 0 bis 255 an. HSL (Farbton, Sättigung, Helligkeit) trennt den Farbwinkel von Lebhaftigkeit und Helligkeit — deutlich intuitiver, wenn man Aufhellungen oder Abschattungen erstellen möchte, ohne RGB-Werte zu schätzen. Alle drei Formate sind vollständig ineinanderkonvertierbar.
Was bedeutet der Alphakanal (A) in RGBA und HSLA?
Der Alphakanal steuert die Deckkraft einer Farbe. In RGBA und HSLA reicht der A-Wert von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) oder von 0 % bis 100 % in CSS-Prozentschreibweise. rgba(255, 0, 0, 0.5) ist z. B. ein Rot mit 50 % Transparenz. Alpha wird für Überlagerungen, Schatten und Hover-Effekte verwendet. Die Standard-HEX-Notation enthält kein Alpha, außer bei 8-stelligem HEX (z. B. #FF573380).
Was ist der Unterschied zwischen HSL und HSV (HSB)?
Sowohl HSL als auch HSV (auch HSB — Farbton, Sättigung, Helligkeit) beschreiben Farben über einen Farbtonwinkel, unterscheiden sich aber in der dritten Dimension. In HSL ergibt 50 % Helligkeit und maximale Sättigung die reine, sättigte Farbe, 0 % ist Schwarz und 100 % ist Weiß. In HSV ergibt 100 % Value und maximale Sättigung die reine Farbe, 0 % Value ist immer Schwarz. HSV ist in Bildbearbeitungsprogrammen wie Photoshop verbreitet, HSL dominiert in CSS und Webdesign.
Wie unterscheiden sich CMYK-Farben von RGB-Farben?
RGB nutzt additive Farbmischung: Alle drei Kanäle bei voller Intensität ergeben Weiß. CMYK nutzt subtraktive Mischung: Tinten absorbieren Licht und erzeugen dunkle Töne. RGB ist das Standard-Farbmodell für Bildschirme und Kameras, CMYK für den Offsetdruck. Konvertieren Sie Farben frühzeitig nach CMYK, da nicht alle lebhaften RGB-Farben im Druck reproduzierbar sind — besonders kräftige Blautöne und elektrische Grüntöne wirken auf Papier oft matter.
Warum sehen Farben auf verschiedenen Bildschirmen unterschiedlich aus?
Das Farbaussehen variiert geräteabhängig aufgrund unterschiedlicher Displaytechnologien, Farbprofile und Hardware-Kalibrierung. Jeder Bildschirm hat einen Farbraum — den Bereich darstellbarer Farben. Einstiegsmonitore decken oft nur 60–72 % des sRGB ab, Profi-Displays 99 % sRGB oder die breiteren P3- bzw. AdobeRGB-Gamüte. ICC-Profile teilen dem Betriebssystem mit, wie numerische Farbwerte für das jeweilige Display zu interpretieren sind. Ohne Kalibrierung kann #FF5733 auf einem Bildschirm orange und auf einem anderen rot-orange wirken. Für präzise Farbarbeit nutzen Sie ein hardware-kalibriertes Display und geben Sie stets den Ziel-Farbraum an.
Verwandte Tools
Bild zu Base64 Konverter
Konvertieren Sie Bilder in Base64-Kodierung mit Unterstützung für PNG, JPG, GIF, SVG, WebP-Formate, generieren Sie Data URI und CSS-Hintergründe
CSS-Minifier & Verschönerer
Komprimieren oder verschönern Sie CSS-Code, entfernen Sie Leerzeichen und Kommentare zur Optimierung der Dateigröße oder formatieren Sie Code für bessere Lesbarkeit
Farbpaletten-Generator
Professioneller Farbpaletten-Generator mit Farbmischung, Gradient-Erstellung, Farbschemata und Export in CSS/SCSS/JSON-Formate
HTML-Kodierer/Dekodierer
Konvertieren Sie Sonderzeichen in HTML-Entitäten mit benannten, dezimalen und hexadezimalen Formaten zur Verhinderung von XSS-Angriffen
Base64-Kodierer/Dekodierer
Schnelles Kodieren und Dekodieren von Base64-Strings mit Unterstützung für Text- und Dateikonvertierung
URL-Kodierer/Dekodierer
Kodieren und dekodieren Sie URLs zur Sicherstellung der Konformität und Nutzbarkeit