Farbformate und Farbräume
Farben auf dem Bildschirm werden je nach Kontext in verschiedenen Formaten dargestellt. HEX (#RRGGBB oder die #RGB-Kurzschreibweise) wird in CSS und HTML verwendet. RGB und RGBA (Rot, Grün, Blau, Alpha) verwenden ganzzahlige Werte von 0 bis 255 pro Kanal oder Bruchwerte von 0,0 bis 1,0 in einigen APIs. HSL (Farbton, Sättigung, Helligkeit) und HSV/HSB (Farbton, Sättigung, Wert/Helligkeit) beschreiben Farben in Begriffen, die der menschlichen Wahrnehmung näher sind — der Farbton dreht sich auf einem 360-Grad-Rad, während Sättigung und Helligkeit Prozentsätze verwenden.
CMYK (Cyan, Magenta, Gelb, Schwarz) ist das subtraktive Farbmodell für den Druck. Im Gegensatz zu RGB, das Licht hinzufügt, subtrahiert CMYK Licht vom weißen Papier. Die Konvertierung einer RGB-Farbe in CMYK ergibt eine Annäherung, die für Design-Mockups geeignet ist; eine genaue Druckreproduktion erfordert ein Farbprofil und ICC-fähige Software. Dieser Konverter verarbeitet alle diese Formatübersetzungen in Echtzeit.
Der Alpha-Kanal (A in RGBA und HSLA) steuert die Deckkraft von 0 (vollständig transparent) bis 1 (vollständig opak). CSS unterstützt auch die moderne `color()`-Funktion und CSS Color Level 4-Syntax mit leerzeichengetrennten Werten und optionalem Alpha, aber HEX, RGB und HSL bleiben die am häufigsten verwendeten Formate für Webentwicklung und UI-Design.
Praktische Anwendungen in Web- und UI-Design
Design-Systeme und CSS-Custom-Properties basieren auf konsistenten Farbwerten über alle Formate hinweg. Wenn ein Designer eine Markenfarbe in HEX bereitstellt, benötigt ein Entwickler möglicherweise den entsprechenden HSL-Wert, um programmgesteuert hellere und dunklere Töne mit CSS `calc()` zu generieren. Dieser Konverter macht diese Übersetzung sofort.
Barrierefreiheitsstandards (WCAG 2.1) erfordern ein minimales Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Das Kontrastverhältnis wird aus der relativen Luminanz zweier Farben berechnet, die von den RGB-Werten abhängt. Das Verständnis der RGB-Darstellung einer Farbe ist daher wesentlich für die Überprüfung der Barrierefreiheitskonformität. Viele Entwickler verwenden HSL, um die Helligkeit systematisch zu variieren und dabei Farbton und Sättigung konstant zu halten, was ein vorhersehbares Kontrastverhalten über eine Farbskala sicherstellt.
CSS-Präprozessoren (Sass, Less) bieten Farbmanipulationsfunktionen wie `lighten()`, `darken()`, `saturate()` und `mix()`, die alle intern auf HSL oder RGB operieren. Tailwind CSS und andere Utility-Frameworks definieren Farbpaletten als nummerierte Abstufungen (50–950), die durch Anpassung der HSL-Helligkeit generiert werden. Wenn Sie Ihre HSL-Ausgangswerte kennen, können Sie Farben präzise in diesen Skalen platzieren.
Grundlagen der Farbtheorie
Das Farbtonrad teilt das sichtbare Spektrum in einen 360-Grad-Kreis: 0° und 360° sind Rot, 120° ist Grün, 240° ist Blau. Komplementärfarben liegen 180° auseinander (Rot/Cyan, Blau/Orange, Gelb/Violett). Triadische Farbschemata verwenden drei Farbtöne im Abstand von 120°. Analoge Schemata gruppieren Farbtöne in einem Bogen von 30 bis 60°. Das Verständnis von Farbtonsbeziehungen hilft Ihnen, harmonische Paletten zu erstellen.
Sättigung misst die Farbreinheit. Eine Sättigung von 100 % ist die lebhafteste Schattierung eines Farbtons; 0 % ergibt Grau, unabhängig vom Farbton. Die Helligkeit in HSL reicht von 0 % (Schwarz) bis 100 % (Weiß), wobei 50 % den reinen Farbton ergibt. Der Wert in HSV ist die maximale Helligkeit: 0 % ist Schwarz, 100 % ist die hellstmögliche Version des Farbtons bei voller Sättigung.
Benannte CSS-Farben (wie `tomato`, `steelblue`, `rebeccapurple`) werden alle spezifischen HEX/RGB-Werten zugeordnet. Dieser Konverter akzeptiert benannte Farben und jeden gültigen CSS-Farbausdruck und löst sie in alle numerischen Formate auf. Verwenden Sie die Kopierschaltflächen neben jedem Format, um Werte direkt in Ihren Code-Editor, Ihr Design-Tool oder Ihre CSS-Datei einzufügen.