CoderTools

Farbwähler/Konverter

Wählen Sie Farben und konvertieren Sie zwischen verschiedenen Formaten

Noch kein Verlauf
Gute Übereinstimmung ΔE: 0.00

Alternative Übereinstimmungen:

Textdarstellung Vorschau

The quick brown fox jumps over the lazy dog

Kontrastverhältnis
5.48:1
WCAG AA
Normaler Text Großer Text
WCAG AAA
Normaler Text Großer Text
color: #6366f1;
background-color: #6366f1;
border-color: #6366f1;

Über Farbformate

Farben können in vielen verschiedenen Formaten dargestellt werden, jedes mit seinen spezifischen Anwendungsfällen und Vorteilen. Dieses Tool unterstützt die Konvertierung zwischen den am häufigsten verwendeten Farbformaten.

Das Verständnis verschiedener Farbmodelle ist für Webentwicklung, UI-Design und die Erstellung digitaler Kunst unerlässlich.

Unterstützte Farbformate

HEX

#RRGGBB

RGB

0-255, 0-255, 0-255

HSL

0°-360°, 0-100%, 0-100%

HSV

0°-360°, 0-100%, 0-100%

CMYK

0-100%, ×4

YCbCr

16-235, 16-240, 16-240

Lab

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).

Bereich: #000000 (schwarz) bis #FFFFFF (weiß) Beispiel: #FF5733 = R:255, G:87, B:51

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.

Bereich: Jeder Kanal 0-255 (8-Bit) oder 0,0-1,0 (normalisiert) Beispiel: rgb(255, 87, 51) oder rgba(255, 87, 51, 0.5) mit Alpha

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.

Bereich: H: 0°-360°, S: 0%-100%, L: 0%-100% Beispiel: hsl(14, 100%, 60%) = warme Orangefarbe

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.

Bereich: H: 0°-360°, S: 0%-100%, V: 0%-100% Beispiel: hsv(14, 80%, 100%) = lebhaftes Orange

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.

Bereich: Jeder Kanal 0%-100% Beispiel: cmyk(0%, 66%, 80%, 0%) = Orangeton

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.

Bereich: Y: 16-235 (digital), Cb/Cr: 16-240 (zentriert bei 128) Beispiel: Y:166, Cb:90, Cr:198 ≈ Orange

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.

Bereich: L*: 0-100, a*: -128 bis +127, b*: -128 bis +127 Beispiel: L*:70, a*:45, b*:65 ≈ Orange

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.

Format: PANTONE [Nummer] C/U/M (Coated/Uncoated/Matte) Beispiel: PANTONE 186 C (Coca-Cola Rot), PANTONE 286 C (IBM Blau)

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.

L* a* b*

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.

AA Level AA: Mindestens 4,5:1 für normalen Text, 3:1 für großen Text
AAA Level AAA: Mindestens 7:1 für normalen Text, 4,5:1 für großen Text

Häufige Anwendungsfälle

CSS-Farbeinstellungen in der Webentwicklung
Farbschemata im UI/UX-Design
Markendesign und visuelle Identität
Überprüfung der Barrierefreiheitsdesign-Konformität
Farbkonvertierung für Druckdesign
Farbgebung von Datenvisualisierungsdiagrammen