Online-Tool zum Ordnen von Farbnamen

Einfache Farbnamen wie black und white haben für den Einstieg in HTML und CSS den Vorteil, dass man nichts erklären muss, und zumindest die Grundfarben sind auch in English verständlich. Zum spielenden Kennenlernen von Farbnamen gibt es ein pfiffiges Online-Tool.

Inhaltsverzeichnis

• Das Online-Tool »Sorted Colors«
• Kurzes Video zur Vorstellung des Tools
• Galerie mit ein paar konkreten Beispielen
• Farbnamen in der Praxis

Das Online-Tool »Sorted Colors«

Autor Mustafa Enes ist JavaScript-Entwickler, lebt in Helsinki und hat ein tolles Tool zum Sortieren von Farben nach Farbnamen entwickelt. Und so funktioniert’s:

1. Die Webseite enes.in/sorted-colors/ im Browser aufrufen.
2. Mit dem Schieberegler ganz oben eine Farbe auswählen.
3. Die darunter angezeigten Farbschattierungen mit Namen begutachten.
4. Ein Klick auf eine Farbe zeigt deren Werte für #hex, rgb() und hsl().

Der schwarz-weiß gefüllte Kreis ganz rechts neben dem Schieberegler zeigt die Farbnahmen für die sieben Schattierungen von grau zwischen black und white.

Kurzes Video zur Vorstellung des Tools

Mustafa Enes hat sein Tool mit einem Filmchen auf Twitter kurz vorgestellt. Einfach auf den Pfeil zum Abspielen klicken, der Film wird im eingebetteten Tweet abgespielt.

Galerie mit ein paar konkreten Beispielen

Die folgende Galerie zeigt ein paar Beispiele.

Farbnamen in der Praxis

Für helle Grautöne nutze ich inzwischen tatsächlich gerne Namen wie whitesmoke (statt #f5f5f5) und gainsboro (statt #dcdcdc), aber so praktisch Farbnamen für den Einstieg sind, auf Dauer haben Sie zwei Probleme:

• Jenseits der Grundfarben sind die englischen Bezeichnungen nicht sehr aussagekräftig. Namen wie chartreuse oder thistle wecken meist nur wenig farbliche Assoziationen.
• Früher oder später möchte man einen Farbton verwenden, der zwischen den definierten Farbnamen liegt, zum Beispiel ein dunkles Grau zwischen black und dimgrey.

Daher gibt es in CSS noch diverse andere Farbmodelle zur Definition von Farbwerten wie #hex, rgb() oder hsl(), mit denen man die Farben nuancierter definieren kann.