Farbwähler und Konverter

Farben visuell mit Transparenzunterstützung auswählen und zwischen HEX, RGBA, HSLA, HSV/HSB und CMYK konvertieren.

Mehr über Farbmodelle

Farbmodelle

Ein Farbmodell ist ein System zur Beschreibung von Farben als Zahlen. Verschiedene Modelle werden in unterschiedlichen Kontexten eingesetzt, je nachdem ob die Ausgabe ein Bildschirm, ein Drucker oder eine Design-Spezifikation ist.

RGB / RGBA
Format

RGB definiert Farben durch Mischung von rotem, grünem und blauem Licht. Jeder Kanal reicht von 0 bis 255. rgb(255, 0, 0) ist reines Rot. rgb(255, 255, 255) ist Weiß. Der A-Kanal (Alpha) fügt Transparenz hinzu, von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig). Zum Beispiel ist rgba(255, 0, 0, 0.5) halbtransparentes Rot. RGB ist das native Farbmodell für Bildschirme und digitale Displays.

Geschichte

Das RGB-Modell hat seinen Ursprung in der Young-Helmholtz-Theorie des trichromatischen Farbsehens aus dem 19. Jahrhundert. James Clerk Maxwell führte 1861 die ersten RGB-Farbfotografie-Experimente durch. RGB wurde mit der Entwicklung von Farb-CRT-Fernsehern in den 1930er und 1940er Jahren zum Standard für elektronische Displays und wurde später für Computermonitore übernommen. Der sRGB-Farbraum wurde im Januar 1997 mit HTML 3.2 als Webstandard formell eingeführt.

HEX / HEXA
Format

HEX ist eine kompakte Schreibweise für RGB-Werte in Hexadezimaldarstellung. #FF0000 entspricht rgb(255, 0, 0). Jedes Paar hexadezimaler Ziffern repräsentiert einen Kanal: #RRGGBB. Die 8-stellige Form #RRGGBBAA fügt einen Alpha-Kanal hinzu, wobei 00 vollständig transparent und FF vollständig undurchsichtig ist. Zum Beispiel ist #FF000080 Rot mit 50 % Deckkraft. Kurzformen wie #F00 werden zu #FF0000 erweitert.

Geschichte

Die Hex-Farbnotation entstand Mitte der 1990er Jahre in frühen Webbrowsern. Die ersten Versionen von Mosaic und Netscape Navigator übernahmen das X11-Farbnamensystem. CSS Level 1, veröffentlicht im Dezember 1996 von Hakon Wium Lie und Bert Bos, standardisierte Hex-Triplets formell als primäre Methode zur Angabe von Farben im Web.

HSL / HSLA
Format

HSL beschreibt Farben als Farbton, Sättigung und Helligkeit. Der Farbton ist ein Grad auf dem Farbkreis (0-360): 0 ist Rot, 120 ist Grün, 240 ist Blau. Sättigung (0-100 %) steuert die Farbintensität. Helligkeit (0-100 %) steuert die Leuchtkraft, wobei 0 % Schwarz und 100 % Weiß ist. HSL ist oft intuitiver als RGB für die Farbauswahl, da Helligkeit und Sättigung unabhängig voneinander angepasst werden können.

Geschichte

HSL wurde erstmals 1978 von George H. Joblove und Donald Greenberg in einem Aufsatz in Computer Graphics beschrieben. Es wurde geschaffen, um ein grundlegendes Problem von RGB zu lösen: Das Mischen von Rot-, Grün- und Blauwerten ist für Menschen nicht intuitiv. HSL ordnet den RGB-Farbraum so um, dass Künstler und Designer in Kategorien von Farbe (Farbton), Lebhaftigkeit (Sättigung) und Helligkeit denken können, was eher der natürlichen Farbbeschreibung entspricht.

HSV / HSB
Format

HSV (Farbton, Sättigung, Hellwert) ist ähnlich wie HSL, verwendet aber „Hellwert“ (Brightness) anstelle von Helligkeit. Bei 100 % Hellwert sind voll gesättigte Farben rein und leuchtend. HSV entspricht natürlicher der Funktionsweise von Farbwählern: Das Sättigungs-/Helligkeitsfeld passt S und V an, während der Farbtonregler H anpasst.

Geschichte

HSV wurde im August 1978 von Alvy Ray Smith beschrieben, während er am Computer Graphics Lab des New York Institute of Technology arbeitete. Es wurde in derselben Ausgabe von Computer Graphics wie HSL veröffentlicht. Smith entwarf HSV für ein frühes digitales Malprogramm, in dem Künstler eine intuitive Möglichkeit zur Farbauswahl auf dem Bildschirm benötigten. Das Zylindermodell von HSV eignete sich natürlicherweise für die Umsetzung als Farbwähler mit Farbtonregler und Sättigungs-/Helligkeitsfeld.

CMYK
Format

CMYK (Cyan, Magenta, Gelb, Schwarz/Key) wird im Druck verwendet. Während RGB additiv ist (Licht), ist CMYK subtraktiv (Tinte). Jeder Wert gibt den Prozentsatz der aufgetragenen Tinte an. cmyk(0, 100, 100, 0) ergibt Rot. Die Umrechnung zwischen RGB und CMYK ist näherungsweise, da sie unterschiedliche Farbbereiche (Gamuts) abdecken.

Geschichte

Die Grundlagen von CMYK gehen auf Jacob Christoph Le Blon zurück, der um 1710 den Halbton-Farbdruck mit separaten Kupferplatten erfand. Ursprünglich verwendete er Rot-, Gelb- und Blauplatten und fügte später eine schwarze Platte für schärfere Konturen und Text hinzu. Das moderne Vierfarbverfahren CMYK wurde erstmals in den 1890er Jahren für farbige Zeitungsillustrationen eingesetzt. Die schwarze Platte wird als „Key“-Platte bezeichnet, weil sie die feinen Details trägt, an denen die anderen Platten ausgerichtet werden.

CSS-Farbformate

Modernes CSS unterstützt verschiedene Farbnotationen:

  • #FF5733 oder #ff5733 (HEX)
  • rgb(255, 87, 51) oder rgba(255, 87, 51, 0.5)
  • hsl(14, 100%, 60%) oder hsla(14, 100%, 60%, 0.5)
  • Benannte Farben: red, cornflowerblue, rebeccapurple (insgesamt 148 benannte Farben)