HTML Farbcodes: Wähler & Konverter

Was sind HTML Farbcodes und was zeigt Ihnen dieses Tool?

HTML Farbcodes sind die Standardschreibweisen, mit denen ein Browser eine Farbe versteht. Üblich sind ein HEX Code wie #31C48D, Kanalwerte wie rgb(49, 196, 141) und die hsl() Schreibweise. Außerdem funktionieren Farbnamen wie teal. Ein Bildschirm mischt jede Farbe aus rotem, grünem und blauem Licht. Jeder Kanal kennt 256 Stufen von 0 bis 255; deshalb ergeben die drei Kanäle zusammen 16.777.216 mögliche Farben.

Dieses Tool rechnet einen Wert gleichzeitig in fünf Formate um. Das heißt, der RGB Wert eines Kunden, der HSB Wert aus Figma und die CMYK Angabe für die Druckerei stehen auf einem Bildschirm. Außerdem erledigt das Tool vier weitere Aufgaben.

• Es sucht den passenden CSS Farbnamen und setzt ≈ davor, wenn kein exakter Name existiert.
• Vier hellere und vier dunklere Töne erscheinen, dazu komplementäre, analoge und triadische Harmonien.
• Zwei Karten zeigen das WCAG Kontrastverhältnis auf Weiß und auf Schwarz.
• Ein Klick auf eine der 40 gängigen HTML Farben wählt sie aus und kopiert den HEX Code.

Zudem laufen alle Berechnungen in Ihrem Browser. In Projekten zur Markenidentität legen mein Team und ich zuerst eine feste Liste von Farbcodes an. Darauf bauen wir dann die übrige Arbeit an der Markenidentität auf.

Wie lesen Sie einen HEX Code, und wann helfen Kurzform und achtstellige Form?

Ein HEX Code schreibt die drei Kanalwerte im Hexadezimalsystem nebeneinander: #RRGGBB. Die ersten zwei Stellen stehen für Rot, die nächsten zwei für Grün und die letzten zwei für Blau. Im Hexadezimalsystem entspricht 00 dem Wert null und FF dem Wert 255. Zum Beispiel bedeutet DC in #DC143C den Wert 220 im Rotkanal. Ebenso steht 14 für 20 im Grünkanal und 3C für 60 im Blaukanal, also zeigt das Tool rgb(220, 20, 60).

CSS akzeptiert vier HEX Formen, und das Tool liest alle vier.

• Kurzform #RGB: der Browser verdoppelt jede Ziffer, also entspricht #F60 dem Code #FF6600.
• Langform #RRGGBB: die übliche sechsstellige Schreibweise.
• Alphaformen #RGBA und #RRGGBBAA: die letzte Stelle oder das letzte Paar trägt die Transparenz. 00 ist völlig transparent und FF voll deckend, während 80 etwa 50 % Deckkraft ergibt.

Groß- oder Kleinschreibung spielt keine Rolle; #dc143c und #DC143C sind dieselbe Farbe. Trotzdem empfehle ich im Team eine einheitliche Schreibweise. Denn zwei Schreibweisen derselben Farbe übersieht man leicht, wenn man eine Designdatei durchsucht. Das Tool gibt Codes immer in Großbuchstaben aus und erkennt sie auch ohne Rautezeichen.

RGB, HSL oder HSB: Welche Schreibweise passt wofür?

Alle drei beschreiben dieselbe Farbe; allerdings eignet sich jede für eine andere Aufgabe. RGB ist die Sprache des Bildschirms: drei Kanäle von 0 bis 255. Vor allem in Bildbearbeitung und Code ist es das vertrauteste Format.

HSL beschreibt eine Farbe über Farbton (0 bis 360°), Sättigung und Helligkeit (Lightness). Für hellere und dunklere Varianten in CSS ist das die praktischste Schreibweise. Sie ändern also nur L, und der Farbton bleibt gleich. Bei L gleich 100 erscheint jede Farbe weiß, bei 0 schwarz.

HSB (in manchen Programmen HSV) begegnet Ihnen im Farbwähler von Designtools wie Figma und Photoshop. B steht hier für Brightness, also Leuchtkraft, und der Wert 100 ergibt die kräftigste Version des Farbtons statt Weiß. Zum Beispiel hat #1F8FFF in der HSL Zeile eine Helligkeit von 56 %. Die HSB Zeile zeigt für dieselbe Farbe eine Brightness von 100 %.

In der Praxis nehme ich HEX oder HSB aus der Designdatei und schreibe HEX oder HSL ins CSS. Für Kundenberichte nutze ich RGB. Im Beitrag Webdesign mit Figma beschreibe ich die Designseite dieses Ablaufs. Tippen Sie einen HSB Wert als hsb(210, 88%, 100%) ein, dann rechnet das Tool auch ihn in HEX um.

CSS Farbnamen: Können Sie allen 148 Namen trauen?

CSS kennt heute 148 Farbnamen. Sechzehn davon sind die Grundfarben aus HTML 4.01; die Tabelle oben listet sie mit ihren Codes. Die meisten übrigen Namen stammen aus der X11 Farbliste und sind seit CSS Color Level 3 Standard. Der jüngste Name ist rebeccapurple. Die aktuelle Liste finden Sie in der Spezifikation W3C CSS Color Module Level 4.

Manche Namen sind zwei Schreibweisen derselben Farbe: gray und grey, aqua und cyan, fuchsia und magenta liefern identische Werte. Folglich stehen die 148 Namen für 139 verschiedene Farben. Namen lesen sich leicht, allerdings stecken ein paar Fallen darin.

• Dunkel ist nicht immer dunkler: darkgray ist #A9A9A9, gray dagegen #808080.
• Keine Transparenz: jeder Name steht für eine deckende Farbe; nur das Schlüsselwort transparent ist völlig durchsichtig.
• Schreibweise egal: DodgerBlue und dodgerblue ergeben dieselbe Farbe.

Hat Ihre Farbe einen exakten Namen, zeigt das Tool ihn an. Bei mehreren Namen sehen Sie alle, zum Beispiel darkgray / darkgrey. Ohne exakten Namen schlägt das Tool den Namen mit dem kleinsten Abstand im CIELAB Farbraum vor und markiert ihn mit ≈. Dieser Hinweis hilft also beim Finden eines ähnlichen Tons. Er ersetzt aber nicht den Code; schreiben Sie ins CSS weiterhin den HEX Wert.

Warum stimmt der CMYK Wert im Druck nie exakt?

Ein Bildschirm erzeugt Farbe mit Licht, der Druck dagegen mit Tinte. RGB ist additiv: Stehen alle drei Kanäle auf dem Höchstwert, sehen Sie Weiß. CMYK ist subtraktiv; Cyan, Magenta, Gelb und Schwarz nehmen dem Papier das Weiß. Deshalb erreichen manche leuchtende Bildschirmfarben, vor allem kräftiges Grün und Blau, im Druck nicht dieselbe Intensität.

Die CMYK Zeile in diesem Tool nutzt eine einfache, geräteunabhängige Formel. Konkret kennt diese Formel weder Papiersorte noch Farbsatz noch das Farbprofil der Druckerei. Für Druckaufträge im Corporate Design gehe ich deshalb in drei Schritten vor.

1. Fragen Sie die Druckerei nach dem Farbprofil für Papier und Maschine.
2. Legen Sie für die Hauptfarben des Logos Pantone Referenzen oder CMYK Werte passend zu diesem Profil fest.
3. Bestellen Sie vor der Auflage einen Proof und vergleichen Sie die Farbe mit dem Proof statt mit dem Bildschirm.

Der CMYK Wert hier bleibt trotzdem nützlich. Er ist ein guter Ausgangspunkt für Präsentationen, Büroausdrucke oder ein erstes Briefing an die Druckerei. Wer ein gedrucktes Erscheinungsbild ins Web bringt, geht den umgekehrten Weg. Mein Beitrag Corporate Design digital umsetzen beschreibt diesen Übergang Schritt für Schritt.

Wie verwalten Sie HTML Farbcodes für eine Marke?

Markenfarben vermehren sich mit der Zeit. Ein Code steckt in der Website, ein zweiter in der Social Media Vorlage und ein dritter in der Präsentation. Bald existiert dasselbe Blau in fünf Versionen. Dagegen führe ich in jedem Projekt eine kurze Farbliste.

• Hauptfarbe: ein HEX Code, auf jedem Kanal derselbe.
• Farbtöne: hellere und dunklere Versionen aus der Leiste Farbtöne für Hover Zustände, Hintergründe und Rahmen.
• Neutraltöne: zwei oder drei Grautöne für Text, Flächen und Linien.
• Statusfarben: eigene Farben für Erfolg, Warnung und Fehlermeldungen.

Die Leiste Farbtöne mischt die Farbe mit Weiß zu 72 %, 54 %, 36 % und 18 %. Zur dunklen Seite mischt sie mit Schwarz zu 16 %, 32 %, 48 % und 64 %. So bleibt der dunkle Hover Ton in derselben Familie wie die Hauptfarbe. Legen Sie die Liste als CSS Variablen an, zum Beispiel --marke: #31C48D. Dann ändern Sie eine Farbe auf der ganzen Website an einer Stelle. In größeren Teams lebt dieselbe Idee in einem Design System.

Nutzen Sie denselben Code außerdem für QR Codes, Social Media Grafiken und E-Mail Signaturen. Zum Beispiel verlangt der QR Code Generator einen HEX Wert für die Codefarbe. Wählen Sie einen dunklen Ton auf hellem Grund, dann lesen Handys den Code zuverlässiger.

Wie prüfen Sie Harmonien und Kontrast zusammen?

Der Reiter Harmonien sucht die rechnerischen Partner einer Farbe auf dem Farbkreis. Das Tool hält Sättigung und Helligkeit fest und dreht nur den Farbton.

• Komplementär (180°): der stärkste Gegensatz, für Akzente und Call to Action Buttons.
• Analog (-30° und +30°): benachbarte Töne, für ruhige und geschlossene Paletten.
• Triade (+120° und +240°): ausgewogene, aber lebendige Dreiklänge, nützlich in Illustrationen und Diagrammen.

Diese Partner sind ein Startpunkt, keine Regel. Nach meiner Erfahrung brauchen die meisten Firmenwebsites eine Hauptfarbe, eine Akzentfarbe und Neutraltöne. Zudem wirkt eine Seite schnell unruhig, wenn alle drei Farben einer Triade gleich viel Fläche bekommen.

Denken Sie bei der Auswahl auch an die Lesbarkeit. WCAG 2.2 verlangt für normalen Text mindestens 4,5:1 und für großen Text 3:1. Deshalb messen die zwei Karten im Panel die Farbe auf Weiß und auf Schwarz. Jede Karte stuft das Ergebnis als AAA erfüllt, AA erfüllt, nur großer Text oder zu gering ein. Weil das Verhältnis symmetrisch ist, gilt der Wert der weißen Karte auch für weiße Schrift auf dieser Farbe. Ein Klick auf eine Karte öffnet den Kontrastrechner mit derselben Farbe. Dort sehen Sie dann den nächsten Farbton, der die Schwelle erreicht.

Den größeren Rahmen beschreibt mein Beitrag barrierefreie Website nach WCAG und BFSG. Möchten Sie das Farbsystem Ihrer Website von Grund auf planen? Unser Webdesign Angebot behandelt Palette, Typografie und Kontrast gemeinsam.