Ganz hübsch, aber kann ich das auch nochmal kurz in Grün sehen?

Ein Satz dem jeden Maler den Pinsel in der Hand zur Waffe werden ließe. Webdesigner hingegen müssen sich ständig damit auseinandersetzen. Viele CMR Templates bieten inzwischen eine ganze Reihe vorgefertigter Farbschema an, aber oft muss noch ganz händisch eine CSS-Datei angepasst werden.

Immer wieder steht man als Webdesigner vor dem Problem, ein vorhandenes Farbschema anpassen zu müssen. Dutzende aufeinander abgestimmte Farbwerte gilt es zu verändern. Manche stehen als HEX-Wert im CSS, andere in der RGB-Schreibweise. Viele unterscheiden sich nur minimal und sollten mit ebenso minimalen Abweichungen auf das neue Schema migriert werden. Sollte sich das nicht mit einem kleinen Programm automatisch lösen lassen? Die Idee ist doch, dass alle Farbtöne, die vorher in Beziehung zueinander standen, auch im neuen Schema miteinander harmonieren. Im einfachsten Fall möchte man alle ähnlichen Farbtöne auf einen Streich in eine andere Schattierung schieben können – unter Beibehaltung des Abstandes der Farben untereinander. Also sollen zum Beispiel alle Blautöne grün werden, wobei das Dunkelblau eben ein Dunkelgrün wird und so weiter.

Der Wicssard

Vor einiger Zeit habe ich zu diesem Zweck ein kleines Java-Tool entwickelt, das genau diesen einfachsten Fall schnell erledigen kann. Das Programm ist unter dem Namen Wicssard inzwischen frei auf GitHub verfügbar.

Screenshot

Die Benutzung ist ziemlich simpel:

1. Eine CSS Datei wird geladen
2. Der Nutzer Künstler wählt alle Farben aus, die er gemeinsam migrieren möchte
3. Eine der Farben wird als „führend“ markiert
4. Diese Farbe wird verändert
5. Wicssard verändert automatisch alle anderen markierten Farben im gleichen Abstand
6. Wiederholen der Schritte 2 bis 5 bis das ganze Farbschema migriert ist
7. Abspeichern der ganzen Datei oder der Differenz zum vorherigen Schema

Et voilà, wir haben alle Farben in das neue Schema migriert.

Screenshot

Das Tool zeigt im unteren Teil die Selektoren an, die die gewählte Farbe verwenden. Außerdem versucht es den Nutzer zu unterstützen, indem es die Farben ihrer Ähnlichkeit nach sortiert. Was den Entwickler übrigens zu der Frage bringt, wie man eine dreidimensionale Farbe sinnvoll auf eine sortierfähige Dimension herunterbricht. Hier habe ich mich dafür entschieden, alle drei Werte aus dem HSV-Farbraum miteinander zu multiplizieren, wobei die Gewichtung stark auf dem Farbwert (H) liegt.

Ausblick

Einige Anwendungsfälle werden von Wicssard noch nicht abgebildet. Zum Beispiel gibt es bislang keine Möglichkeit, Farben zu invertieren, um etwa ein helles Farbschema in ein dunkles umzuwandeln. Trotzdem hat mir das kleine Tool schon bei so mancher Templatemigration geholfen.