Tag: farbe

Webdesign: Farbspiele, Typografie und mehr

Mit Farben lässt sich nicht nur in Bildbearbeitungsprogrammen spielen: Zur kommenden Seite Method of Action wurde das Spiel Color entwickelt, in dem es darum geht, möglichst schnell Farben und Farbpaare anhand eines Farbkreises zuzuordnen. Was zu Beginn relativ einfach durch die Werte "Hue" und "Saturation" zu bewerkstelligen ist, wird später schon etwas schwieriger, wenn analoge oder ternäre Farbschemata erkannt werden müssen.
Das Spiel ist sehr gelungen und hilft in jedem Fall dabei, Farben und deren Anordnungen besser zu verstehen. Zudem stehen noch zwei weitere Spiele bereit, mit denen sich typografische Details studieren lassen: Bei Shape Type und Kern Type können sowohl die Pfade einzelner Buchstaben als auch deren Laufweite in ganzen Wörtern analysiert und abgeschätzt werden.

Bei der Seite "Method of Action", die sich derzeit in einer Preview-Phase befindet, wird es unter Anderem darum gehen, ein besseres Verständnis für Design zu vermitteln. In "Missionen" können Benutzer bestimmte Design-Tasks erledigen und von erfahrenen Benutzern bewerten lassen. Nach und nach werden dann komplexere Missionen freigeschaltet und mit jeder erfolgreich abgeschlossenen Mission steigt auch die virtuelle "Erfahrung", die dann auch dazu genutzt werden kann, über eingereichte Design-Tasks von anderen Benutzern zu entscheiden. Man darf also gespannt sein.

ColorJack: Viele bunte Tools für Farbpaletten

Für die Erstellung von Farbpaletten eignet sich nicht nur Photoshop, sondern auch diverse Online-Tools wie ColorRotate oder der Color Scheme Designer. Nicht fehlen in dieser Sammlung darf die ColorJack Sphere, die erstklassige Werkzeuge zum Mischen und Erstellen von Farbpaletten bietet. Über einen Farbkreis können verschiedene Farbschemata zusammengestellt und angepasst werden.

Auf der Website von ColorJack finden sich weitere interessante Tools, die schon seit geraumer Zeit zur Verfügung stehen. Damals berichtete ich über SketchPad, einem interaktiven Zeichen-Werkzeug mit vielen Möglichkeiten. Auf der Seite ColRD.com finden sich neben Farben, Paletten oder Mustern ebenfalls ausgereifte Tools und Regler, mit denen sich Farbtöne sehr genau mischen lassen. Die neueste Kreation von ColorJack ist der CSS Background Generator, mit dem sich in Echtzeit Website-Hintergründe farblich anpassen lassen.

Webdesign: HEX-Farbwerte in RGBA umwandeln

Farben müssen in CSS schon längst nicht mehr nur als HEX-Werte deklariert werden, sondern können auch durch RGB- oder HSL-Angaben definiert werden. Zudem können Farbwerte mit einer Transparenz belegt werden, so dass dahinter liegende Hintergrundfarben oder -bilder je nach Transparenz-Wert sichtbar werden. Die Opazität wird durch die Angabe des Alpha-Kanals geregelt, daher die Bezeichnungen "RGBA" und "HSLA" (Hue / Saturation / Luminance / Alpha).
RGBA-Zuweisungen sehen in etwa so aus:

• .klasse {
• color:rgba(255, 125, 255, 0.55);
• }

Um HEX-Werte schnell und einfach in einen derartigen Wert zu konvertieren, kann ein Tool wie der HEX 2 RGBA Color Calculator verwendet werden. Nachdem der HEX-Wert eingefügt wurde, kann die Transparenz per Schieberegler eingestellt werden.

Als Ausgabe wird ein entsprechender RGBA-Wert geliefert, der in Stylesheets eingefügt werden kann. Das Online-Tool ist unkompliziert und in bestimmten Fällen sicher eine kleine Hilfe.

Ultimate CSS Gradient Generator: Verläufe im Browser

Alex Sirota, der Entwickler hinter ColorZilla, hat ein sehr schönes Online-Werkzeug zum Erstellen von Farbverläufen veröffentlicht. Mit dem "Ultimate CSS Gradient Generator" lassen sich wie in Photoshop Verläufe mit mehreren Punkten (Stops) erstellen, so dass verschiedene Effekte und Beleuchtungen simuliert werden können. Das Verschieben der Punkte ändert die Darstellung des Verlaufs in Echtzeit, so dass der Effekt direkt betrachtet werden kann.

Bei dem Verlaufswerkzeug liegen bereits etliche Presets vor, die per Klick auf den aktuellen Verlauf angewendet werden können. Zudem können die Größe des Verlaufsbereichs sowie die Richtung (Orientation) des Verlaufs eingestellt werden. Als Ausgabe wird CSS3-Code generiert, der in Firefox, Safari und Chrome funktioniert — für Internet Explorer wird ein Fallback-Verlauf ausgegeben, der allerdings keine Stops beinhaltet.
Neben dem eigentlichen Zweck, CSS3-Code zu erstellen, eignet sich das Tool auch für das Experimentieren mit Farbverläufen an, da es eine Echtzeit-Vorschau bietet und zudem mit einem sehr guten Farbwähler (Color Picker) ausgestattet ist.

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.