Tag: farbe

201025Mai

What The Hex: Farben durch HEX-Werte erkennen

Ein Spiel für zwischendurch, das an Farbspezialisten und Hexadezimal-Begeisterte gerichtet ist, stellt What The Hex dar: Je nach Schwierigkeitsgrad erhält der Spieler unterschiedlich viele Farbflächen und einen Hexadezimal-Wert, welcher dann der zutreffenden Fläche zugeordnet werden muss. Bei Stufe 48 gilt es schließlich, aus 48 Farben den entsprechenden HEX-Code zuzuordnen. Die Farbwerte werden dabei zufällig generiert.

What The Hex

Neben dem Zweck des reinen Zeitvertreibs dürfte das Spiel vor allem mit einem Lerneffekt verbunden sein — das Verständnis von Hexadezimal-Werten im Bezug auf Farbdefinitionen wird dadurch sicherlich positiv beeinträchtigt. Eine hilfreiche Tabelle zu dieser Thematik gibt es bei Wikipedia, welche die Bedeutungen der Hex-Werte verdeutlichen soll:

Hex-Wert RGB-Anteil Leuchtkraft
00 0 0%
40 64 25%
80 128 50%
C0 192 75%
FF 255 100%

Weiterhin gibt es viele gute Online-Tools wie den "RGB Color Calculator" oder den Web-color-circle, wodurch sich die Verhältnisse der Farbwerte besser verstehen und ausprobieren lassen. Ein weiteres Werkzeug für die Bestimmung von Farbabstufungen eines HEX-Werts steht mit 0to255 bereit.

201013Apr

0to255: Farbabstufungen eines HEX-Werts zeigen

Wenn es um die Farbwelt einer Website geht, können schon kleine Nuancen das komplette Erscheinungsbild maßgeblich verändern. Adobe Photoshop bietet ausgereifte Werkzeuge für das exakte Auswählen von Farben und Abstufungen. Für unterwegs lässt sich die Seite 0to255 nutzen: Hier kann ein HEX-Wert eingetragen werden, woraufhin die Anwendung die Farbabstufungen von schwarz (#000000) bis weiß (#FFFFFF) anhand der Basisfarbe darstellt.

0to255

Auf diesem Weg lassen sich schnell und einfach Variationen einer Farbe bestimmen und direkt als HEX-Code kopiert werden. Die Webanwendung ist unkompliziert und funktioniert sehr gut. Der Autor, Shaun Chapman, hat das Werkzeug entwickelt, da er den HSV-Farbmodus von Photoshop als weniger intuitiv empfindet. Man sollte sich die Seite einfach ansehen, um sich ein Urteil davon machen zu können.

200927Dez

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).

Color Blender

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.

200916Sep

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.

Contrast-A

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.

200929Jul

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.

CSS Prism

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.

200910Jun

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.

Color Explorer

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").

Tags: ,
200915Mai

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.

ColorRotate

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.

200909Feb

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.

Color Scheme Designer

Weiterlesen...