Tag: farbe
Color Blender: Abstufungen einer Farbe ermitteln
Manche Dinge sind zeitlos und bewähren sich auch auf lange Sicht. Ein derartiges Projekt, das vielleicht nicht jedem bekannt ist, stellt Color Blender vom CSS-Guru Eric Meyer dar. Mit dem kleinen Werkzeug lassen sich Abstufungen von zwei Farbwerten erzeugen, die als Hex- oder RGB-Wert ausgegeben werden können. Neben einer Auswahl an vordefinierten Farben können auch eigene Farbwerte eingegeben werden. Per Knopfdruck erstellt die kleine Webanwendung entsprechende Farbabstufungen (maximal 10).
Das Tool kann sehr hilfreich sein, wenn man ein Farbschema für eine Website erstellen oder verfeinern möchte. In Photoshop stehen solche Abstufungen als Farbbibliotheken (im Farbwähler) zur Verfügung, allerdings handelt es sich dabei um Druckfarben wie PANTONE- oder HKS-Farbwerte.
Eric Meyer bietet neben weiteren Werkzeugen auch seinen beliebten CSS Reset zum Download an, der als Basis für CSS-Projekte genutzt werden kann.
Color Blender ist bestimmt eine gute Ergänzung zu Farbwerkzeugen wie Color Explorer oder dem Color Scheme Designer.
Contrast-A: Gute Kontraste für Screendesign
Lesbarkeit und Kontrast sind zwei wichtige Punkte, wenn es um Textgestaltung geht. Bildschirmschriftarten können sehr schnell unlesbar werden — zwar brechen wie bei Druckerzeugnissen keine Flächen oder Konturen durch Druckfarbe weg (Über- bzw. Unterfüllung), jedoch können Subpixel (halbtransparente Pixel, die zur Kantenglättung dienen) durch zu kleine Schriftgrößen oder schlechte Kontraste schwer erkennbar werden. Dass man bei Screendesign auf Serifenschriften im Fließtext verzichten sollte, dürfte allgemein bekannt sein.
Unabhängig von der Schriftart und -größe ist der gewählte Kontrast das entscheidende Kriterium. Dieser sollte nicht zu stark aber auch nicht zu monoton sein. Um einen guten Kontrast zwischen zwei Farben zu finden, lässt sich nun das Tool Contrast-A nutzen. Die schicke Adobe AIR-Anwendung von Annika Hamann bietet viele Optionen, um den bestmöglichen Farbkontrast zu ermitteln. Dabei werden die Richtlinien der Web Content Accessibility Guidelines (WCAG) 2.0 und 1.0 eingehalten.
Das Verhältnis der beiden gewählten Farben wird von dem Programm analysiert und ausgewertet. Durch Symbole wird signalisiert, wie gut sich der Kontrast eignet — berücksichtigt werden normale Sehfähigkeiten, Rotgrünblindheit, Grünblindheit, Blaublindheit oder generelle Farbenblindheit.
Die Farbkombinationen können als Paletten gespeichert und exportiert (PDF) werden. Der Kontrast lässt sich bei Bedarf gleich an einem Beispieltext testen. Beeindruckend sind auch die Schwellenwerte, die angezeigt werden können (Visualize Thresholds).
Die Auswahl der Farben ist zwar nicht so komplex wie bei ColoRotate, aber die Farbwähler erfüllen ihren Zweck voll und ganz. Das Werkzeug ist sehr nützlich, wenn es um die Wahl von Vorder- und Hintergrundfarben bei Texten geht.
CSS Prism: Farbwerte auflisten und editieren
Der Designer und Programmierer Ryan Berg hat ein schönes Werkzeug für das Ermitteln und Verändern von CSS-Farbwerten entwickelt. Das Projekt heißt CSS Prism und funktioniert unkompliziert: Man füttert die Webanwendung mit dem absoluten Pfad einer Stylesheet-Datei, woraufhin alle verwendeten Hex-Farbwerte der CSS-Datei aufgeschlüsselt werden. Jede Farbe wird dabei auf schwarzen, grauen und weißen Hintergrundflächen gezeigt, um die Kontrastwirkung besser darzustellen.
Der Benutzer hat die Möglichkeit, in einen Bearbeitungsmodus zu wechseln und jeden einzelnen Farbwert mittels jQuery-Colorpicker (Farbwähler im Photoshop-Stil) anzupassen.
Die Änderungen können per Knopfdruck in eine dynamische Kopie der geladenen CSS-Datei eingefügt werden, so dass sich das neue Stylesheet anschließend herunterladen lässt.
Als Ergänzung zu "Check My Colours" ist CSS Prism eine tolle Möglichkeit, Farben von Webprojekten zu analysieren.
Color Explorer: Farbpaletten erstellen und speichern
Ein neue Seite, um Farben und Farbpaletten zu erstellen, ist online gegangen: Color Explorer kommt mit vielen Möglichkeiten, digitale Farben zu mischen. Der Webdienst von Port80.biz bietet neben der Grundfunktion des Farbwählers auch etliche Funktionen zur Anpassung von Farben an bestehende Farbsysteme — so können erstellte Farbwerte in Druckfarben (RAL, TOYO, FOCOLTONE, TRUMATCH) oder in Farben eines digitalen Farbsystems (Websafe, W3C-Paletten) konvertiert werden.
Die erstellten Farbpaletten können anschließend vom Benutzer gespeichert werden. Dabei sind die Formate ASE, ACO, PNG und TXT möglich. Die Farben können zudem noch durch Filter (wärmer, kälter, Sepia, usw.) angepasst werden.
Color Explorer enthält noch weitere Werkzeuge zum Einstellen von Farben: Dazu gehören Farbton, Sättigung, R/G/B-Anpassungen und auch Farbharmonien (analog, komplementär, triadisch, ColorMatch 5K, etc.). Ein wirklich cooles Feature ist die automatische Benennung von erstellten Farben, da jede Farbe eine Bezeichnung erhält (z.B. "Light grey with green tint").
ColorRotate: Farben in 3D mischen
Man kennt die üblichen Online-Tools zum Mischen von Farben: Adobe Kuler, Color Scheme Designer oder ColorBlender sind wahrscheinlich die beliebtesten Werkzeuge zum Erstellen von Farbharmonien und -kombinationen. Innovation kommt nun von mit ColorRotate von der Non-Profit-Agentur Idea — mit der interaktiven Flash-Applikation lassen sich Farben im dreidimensionalen Raum mischen und verändern. Der Benutzer kann dabei einen Kegel drehen und neigen, um die Farben anzupassen. Die Bedienung ist anfangs etwas gewöhnungsbedürftig, aber man versteht schnell, wie das Werkzeug funktioniert: Unterhalb des 3D-Kegels befinden sich die Schaltflächen "View", "Hue", "Blend" und "Tint", von denen immer eine Auswahl aktiv ist. Anschließend können die Punkte auf dem Kegel verschoben werden, um die entsprechende Wirkung zu erzielen.
Das Werkzeug bietet noch mehr Funktionen: Über die kleinen Schaltflächen rechts oben lässt sich das Verhältnis aller erstellten Farben zueinander einstellen. So kann man alle Farben gleichzeitig im 3D-Kegel bewegen und damit die Helligkeit oder den Kontrast des Farbsets verändern.
Mit ColorRotate lassen sich bis zu 16 Farben pro Farbset definieren und nach einer Registrierung auf der Website lassen sich die erstellten Farbharmonien auch abspeichern. Man hat daher auch Zugriff auf die Sets der anderen Benutzer und kann diese nach Belieben verändern.
Die Entwickler der Anwendung gehen noch weiter: Benutzer können sich auf der Website zudem auch über Farbtheorie und Farbwirkung informieren. Ein Highlight ist schließlich das geplante Adobe CS4-Plugin, das sich in die Creative Suite 4 als Panel integrieren lässt und im Herbst für 39 USD erhältich sein wird.
Color Scheme Designer: Farben mit dem Farbkreis
Ein harmonisches Farbschema ist wahrscheinlich das wichtigste Wiedererkennungsmerkmal einer Website — gut aufeinander abgestimmte Farben kommen jedoch nicht von ungefähr. Ein gutes Farbschema zeichnet sich durch verhältnismäßige und ästhetische Farben aus. Jede Farbfläche steht auf einem Hintergrund (Figur-Grund-Beziehung) und somit immer in einem Kontrast. Daher sollten die Farben in sich stimmig sein. Doch wie definiert man stimmig? Gerade bei Farben herrscht eine große Subjektivität, jedoch lassen sich die Naturgesetze nicht verändern — bestimmte Assoziationen zu Farben sind gegeben und daher haben Farben eine entsprechende Wirkung auf den Menschen. Farben können Empfindungen beim Betrachter anregen und verschiedene Botschaften übermitteln: Attraktivität, Dynamik, Schnelligkeit, Sympathie, Zuverlässigkeit und so weiter.
Farbe ist ein sehr komplexes Thema und erfordert viel Experimentierfreude und ein Gespür für Ästhetik. Man sollte mit der additiven Farbmischung vertraut sein und den dazugehörigen Farbkreis kennen, denn hier kommt der Knackpunkt: Der additive Farbkreis basiert auf den drei Grundfarben rot, grün und blau (RGB), welche aus dem natürlichen Farbspektrum resultieren. Nach dem Prinzip der additiven Farbmischung arbeiten neben dem menschlichen Auge auch Monitore, Scanner und Kameras.
