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.

Das Online-Tool »Sorted Colors«

Autor Mustafa Enes ist JavaScript-Entwickler, lebt in Helsinki und hat sein Tool mit einem Filmchen auf Twitter kurz vorgestellt. Einfach auf den Pfeil zum Abspielen klicken, der Film wird im eingebetteten Tweet abgespielt.

So funktioniert’s

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.

Ein paar Beispiele

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.

Schreiben Sie einen Kommentar