Tag: farbe

ColorBlendy: Farben im Browser mischen

In Bildbearbeitungsprogrammen lassen sich über die "Blending Modes" mehrere Ebenen miteinander mischen. Dabei können verschiedene Methoden der Überblendung eingestellt werden (wie etwa "Überlagern", "Negativ multiplizieren" oder "Abdunkeln"). Je nach Modus entstehen unterschiedliche Belichtungen und Effekte.
Um mit Farben experimentieren zu können, bieten sich solche Überblendungen an. Ein Projekt, welches beim 10K Apart-Contest eingesandt wurde, bietet genau diese Möglichkeit: Mit ColorBlendy lassen sich 2 Farbwerte durch verschiedene Überblendungsmethoden mischen, so dass eine dritte Farbe entsteht.

Bei ColorBlendy müssen lediglich die beiden HEX-Codes der gewünschten Farbwerte eingegeben — anschließend können die Farben über 5 Methoden vermischt werden.
Der Entwickler, Andrey Petrov, hat die Überblendungen zudem nicht mit dem HTML5-Element "canvas", sondern mit JavaScript umgesetzt. Dadurch funktioniert das kleine Tool auch unter Internet Explorer.

Webdesign: Farben großflächig auswählen

Farben sind im Bereich des Webdesigns ein wichtiger Aspekt, der wesentlich über das Erscheinungsbild einer Website entscheidet. Wenn eine Farbe ausgewählt werden soll, bieten sich mittlerweile gute Tools wie Adobe Kuler, Color Explorer oder Color Blender an. Wer es ganz konventionell mag, kann das Color-Werkzeug von Arne Martin Aurlien ausprobieren. Dabei wird die komplette Fläche des Browserfensters mit einer Farbe gefüllt, die durch Mausbewegungen definiert werden kann.

Der überdimensionierte Farbwähler bietet zudem schöne Optionen an, durch die sich ein Farbwert, der mit der linken Maustaste fixiert werden kann, als RGB-, HEX- oder HSL-Wert kopieren lässt. Wer also wieder einmal auf der Suche nach einer guten Farbe ist, kann diese mit dem Online-Tool zuvor großflächig begutachten.

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.

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:

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.

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.

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.

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