Tag: farbe

201303Nov

Colourcode: Farbschemata entwickeln und exportieren

Adobe Kuler stellt längst nicht mehr das einzige Online-Werkzeug für das Erstellen von interessanten Farbschemata dar: Mit ColorJack, ColorBlendy, ColorRotate und dem Color Scheme Designer stehen bereits vielseitige Alternativen zur Auswahl.
Aktuell gibt es eine weitere Entwicklung auf diesem Gebiet, die Colourcode getauft wurde und das Definieren von großen Farbflächen über Mausbewegungen erlaubt.

Colourcode - Find your colour scheme

Das Konzept ähnelt dem Piknik Color Picker und wurde erweitert um vordefinierte Farbkontraste (monochrom, analog, triadisch, komplementär, etc.), wobei sich Farbkombinationen auch frei erstellen lassen.
Interessant dürften vor allem die Export-Möglichkeiten für Webdesigner und -entwickler sein, da sich die Farbschemata im SCSS- oder LESS-Code abspeichern lassen. Alterativ können die Farben auch als PNG-Grafik heruntergeladen oder als permanenter Link verwendet werden. Bei GitHub gibt es übrigens den Quellcode der Online-Anwendung.

201315Jul

Silk: Interaktive generative Kunst im Browser

Experimentelle Online-Tools für das Erstellen von generativer Kunst gibt es inzwischen mehr als genug: Vor über 4 Jahren berichtete ich über die Flash-Anwendung MyOats, mit der sich abstrakte Gebilde zeichnen lassen. Livebrush stellt eine ähnliche Anwendung dar und wer Java installiert hat, ist mit dem Flame Painter gut bedient.
Eine weitere Anwendung dieser Art wäre Silk, die im Gegensetz zu den anderen Tools nicht installiert werden muss und auch kein Plugin benötigt, da sie auf dem HTML5-Canvas-Element basiert.

Silk - Interactive Generative Art

Mit der Zeichenanwendung können abstrakte Formen erzeugt werden, die durch einfache Mausbewegungen generiert werden können. Lediglich ein Spiegel-Modus, die Zeichenfarbe und die Anzahl der gleichzeitig gezeichneten Formen können eingestellt werden. Zusammen mit der entspannenden Hintergrundmusik stellt Silk einen netten Zeitvertreib für zwischendurch dar.

201225Jan

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.

Method of Action - Color

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.

201124Okt

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.

ColorJack - Sphere

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.

201126Jul

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.

Devoth's HEX 2 RGBA Color Calculator

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.

201007Okt

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.

Ultimate CSS Gradient Generator

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.

201026Aug

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.

ColorBlendy - Blend colors with different modes like multiply, overlay, dodge

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.

201014Aug

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.

Color

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.