von ,
Twittern 15 Teilen 2

CSSPrism: Anzeigen und bearbeiten des Farbspektrums aus einem beliebigen CSS-File

CSSPrism ist ein Tool, das man schnell lieb gewinnt, wenn man viele Kundenwebsites zu verwalten hat. Über ein schlankes Web-Interface übergibt man CSSPrism den Pfad zu einer beliebigen CSS-Datei. Das Tool analysiert die verwendeten Farbwerte und zeigt sie am Bildschirm an. Per Hover über die farbig angelegte Balkendarstellung erfährt man die Hex-Werte.

CSSPrism: Farbspektrum analysieren, anzeigen und bearbeiten auf jeder Website

Allein diese kompakte Darstellung der verwendeten Farben mitsamt ihrer Werte macht CSSPrism schon zu einem wertvollen Tool für den schnellen Farbcheck zwischendurch. Anwendungsfälle gibt es zumindest in meiner Praxis viele. Eigentlich bin ich ständig auf der Suche nach irgendeinem korrekten Farbwert. CSSPrism hilft mir hier wirklich effektiv.

cssprism startseite
CSSPrism: Die Startseite. Viel falsch machen kann man nicht...

Bei der Darstellung der Farben/Farbwerte macht CSSPrism indes noch nicht Schluss. Vielmehr ist es durch Klick auf eine der angezeigten Farben zudem möglich, den Wert per Colorpicker oder Eingabe eines Hex-, RGB- oder HSB-Wertes zu verändern. Sehr nützlich, nicht nur wenn man mit Printdesignern zusammen arbeitet. Die mit den entsprechend geänderten Werten versehene Stylesheet-Datei kann sogar heruntergeladen werden, um sie einfach gegen die Ursprungsfassung austauschen zu können.

cssprism beispiel
CSSPrism: Das Farbspektrum einer Beispielwebsite

CSSPrism lässt sich als Bookmarklet installieren. So kann per simplem Klick auf das Bookmarklet das CSS-Farbspektrum jeder beliebigen Website angezeigt werden, auf der man sich gerade befindet. Nützlich, wenn man mal wieder Inspiration braucht...

cssprism edit
CSSPrism: Die Farbwerte können auch bearbeitet werden

CSSPrism basiert auf dem Python-Framework Django unter Verwendung von jQuery und dem jQuery-Plugin Color Picker. Es kann kostenlos genutzt werden.

Weitere Artikel zu CSS

Kommentare: 7 Tweets: 15 Facebook-Likes: 2
24.06.2011

7 Answers

  1. von michsch 24.06.2011 (16:47Uhr) 1.

    Eigentlich ein tolles kleines Werkzeug, aber leider werden @import Angaben in CSS-Dateien ignoriert. Das schließt dann unter Umständen viele Farben aus bzw. das ganze YAML-Framework. Schade eigentlich.

  2. von Christian 24.06.2011 (16:57Uhr) 2.

    Na das ist ja mal genial. Jetzt muss man nicht erst umständlich über Firebug die Farben herausfinden.

  3. von dpetereit 24.06.2011 (17:01Uhr) 3.

    @michsch: Hast Recht. Dass es mit YAML nicht funktioniert ist mir auch eben aufgefallen. Das benutze ich nämlich auf meiner eigenen Seite. Bei all meinen Kunden funktionierte CSSPrism tadellos...

  4. von CSSPrism: Anzeigen und bearbeiten des Fa… 24.06.2011 (18:36Uhr) 4.

    [...] Weiterlesen bei t3n >> [...]

  5. von Bärbel Loy 25.06.2011 (08:48Uhr) 5.

    Nettes und auch nützliches Werkzeug. Bleibt ja zu hoffen, dass es in der nächsten Version vielleicht eine Unterstützung für yaml geben wird.

  6. von lineman 26.06.2011 (15:31Uhr) 6.

    hmm... Ich finde das irgendwie unnütz. Gut man kann sich die Farbpalette anschauen, aber warum nicht gleich TopStyle4 dafür verwenden? Gut kostet ein bisschen Geld und ist wohl mit solch einem Tool nicht vergleichbar, weil ein richtiger Editor, kann aber dermaßen viel mehr und Palettenbearbeitung in Reinkultur ist enthalten, wie in keinem anderen CSS-Editor. TopStyle4 macht solche Tools absolut überflüssig.

  7. von dpetereit 26.06.2011 (15:43Uhr) 7.

    Hmm. Na ja, es gibt immer eine Vielzahl an Lösungen für das gleiche Problem. Das ist auch gut so...

Deine Meinung


(wird nicht veröffentlicht)