Der folgende Beitrag wurde von Tyler Sticka verfasst. Tyler hat ein Tool namens Colorpeek entwickelt. In diesem Artikel stellt er vor, was die Web-App leistet und warum, und wie die Chrome-Erweiterung diese erweitert. Bleiben Sie dann *morgen* dran, wenn Tyler zeigt, wie er die Chrome-Erweiterung erstellt hat.
Vor einiger Zeit fand ich mich bei einer eintönigen Aufgabe wieder, die die meisten Designer nachvollziehen können. Nachdem ich eine Farbpalette in der jeweiligen Design-Anwendung, die ich an diesem Tag bevorzugte, sorgfältig ausgewählt hatte, war es an der Zeit, diese Farbwerte mit meinen Mitarbeitern zu teilen.
Ich hätte eine Reihe von Hex-Tripletts in eine E-Mail packen und es dabei belassen können. Aber bis wir alle ein enzyklopädisches Wissen über das RGB-Farbmodell entwickelt haben, ist es wahrscheinlich am besten, auch eine Art von Bild beizufügen.
Also habe ich pflichtbewusst Photoshop herausgeholt und etwas Ähnliches wie dieses gemacht, zum gefühlt tausendsten Mal
Das ist besser. Aber es ist auch unmöglich, Text daraus zu kopieren und mühsam zu aktualisieren. Dennoch erstellen wir weiterhin manuell diese einfachen Paletten-Mockups immer und immer wieder.
Top-Forscher auf dem Gebiet der Farbwissenschaft schätzen, dass jedes Jahr etwa drei Zillionen neue Farb-Apps auf den Markt kommen. [Beleg benötigt] Viele davon sind wirklich cool. Aber der Rest ist ziemlich kompliziert, und keiner macht genau das, was ich will.
Also habe ich in meiner Freizeit eine Web-App namens Colorpeek erstellt.
Lernen Sie Colorpeek kennen
Colorpeek hilft Ihnen, Farben in jeder CSS-Notation, die Sie bereits verwenden, schnell zu sehen und zu teilen. Es unterstützt Hex, RGB(a), HSL(a), benannte Farben und sogar einige nicht standardmäßige Markenfarben. Alle werden in einem einfachen, responsiven Layout angezeigt.
Einige Beispiele
- Hex: colorpeek.com/#a899f2
- RGB mit Alpha: colorpeek.com/#rgba(221,78,133,0.5)
- Farb-Schlüsselwort: colorpeek.com/#lightcoral
- Mehrere Farben (gemischte Formate): colorpeek.com/#hotpink,rgb(77,196,94),hsl(212,73,67)
- Einige Markenfarben: colorpeek.com/#facebook,twitter,youtube
Wenn Sie eher visuell denken und Ihr Browser Drag & Drop und die File API unterstützt, können Sie Farben hinzufügen, indem Sie Bilder direkt in Colorpeek ziehen. Es extrahiert die prominentesten Farben dank Lokesh Dhakars magischem Color Thief Skript.
Sobald Sie eine Colorpeek-Palette haben, können Sie deren Notation festlegen, indem Sie auf die Schaltfläche 
tippen oder klicken. Die Schaltfläche 
ermöglicht es Ihnen, die Seite zu teilen oder in eine Reihe von Formaten zu "exportieren" (Klartext, JSON, LESS, SCSS oder Stylus).
Problem gelöst! (Fast...)
Ich habe Colorpeek im Mai gestartet, aber bald ein Problem festgestellt. Colorpeek machte das *Teilen* von Farben einfacher, aber es half wenig beim *Empfangen* davon. Ich bekam immer noch E-Mails wie diese
Hier sind die Farben, die wir verwenden
Blau: #2b95d2
Grün: #2cc96b
Rot: #ed4d55
Dunkelblau: #20303c
(Entschuldigung an den namenlosen realen Freund, den ich hier öffentlich passiv-aggressiv beschäme. Du hättest es besser wissen müssen.)
Mein erster Instinkt war, Cerebro zu benutzen, um telepathisch die Allgegenwart von Colorpeek in den Köpfen aller Anwesenden und zukünftigen Mitarbeiter sicherzustellen. Mein Mangel an telepathischer Fähigkeit, gepaart mit der verheerenden Erkenntnis, dass die X-Men fiktiv sind, hat diese Pläne schnell durchkreuzt.
Also habe ich stattdessen eine Chrome-Erweiterung erstellt.
Nach der Installation können Sie
- Paletten aus Textauswahlen erstellen (wie im vorherigen E-Mail-Beispiel);
- alle CSS-Farben auf einer Webseite sehen;
- und die prominentesten Farben aus Bildern auf einer Seite extrahieren.
Die Erweiterung ist kostenlos und jetzt im Chrome Web Store erhältlich. Hier ist eine kurze Video-Demo, wenn Sie sie in Aktion sehen möchten.
Was kommt als Nächstes
Ich habe Colorpeek für mich selbst entwickelt. Ich habe den Umfang klein gehalten, damit ich es schnell nutzen konnte. In diesem Sinne ist das Projekt "abgeschlossen". Aber ich bin ein Bastler mit vielen Ideen. Wenn das Publikum da ist, würde ich gerne das Teilen und die Zusammenarbeit bei Farben noch einfacher machen.
Sie können @Colorpeek auf Twitter folgen, wenn Sie wissen möchten, was die Zukunft bringt.
Danke Tyler,
Sehr edle Web-App und Chrome-Erweiterung, ganz zu schweigen davon, dass sie auch nützlich ist. Ich werde versuchen, sie in meinen Workflow zu integrieren.
Ich freue mich auf den morgigen Artikel darüber, wie du die Chrome-Erweiterung erstellt hast.
Was für ein tolles Produkt. Das sollte jedem eine riesige Menge Zeit sparen. Ich muss sagen, ich hätte es lieber als Firefox-Erweiterung gehabt, da das meine bevorzugte Entwicklungsumgebung ist, ich bevorzuge einfach Firebug, aber ich werde es wohl viel nutzen. Gute Arbeit Tyler. Tolles Logo auch.
Das ist wirklich schön - und ja, erstaunliches Logo! Danke fürs Teilen. Lade gerade die Erweiterung herunter.
Das sieht toll aus ~ und ist unglaublich nützlich, genau zur richtigen Zeit für mich :)
Werde es gleich ausprobieren - danke! :)
Alle Farben auf der Seite zu identifizieren ist ziemlich cool. Ich habe das viel nerdigere Chrome Dev Tools Snippet AllColors.js verwendet, um etwas Ähnliches zu tun http://bgrins.github.io/devtools-snippets/
Ich benutze http://colorto.me, um Farbpaletten mit anderen zu teilen. Diese Seite bietet sogar eine Möglichkeit, einen einfachen Bild-Swatch der Farben herunterzuladen, den Designer in Illustrator oder Photoshop einfügen können.
Der Link zu Marc Roman (conceived.nl) funktioniert nicht.
Es hat einige großartige passende Farben hervorgebracht. Sehr nett und hilfreich
Um ehrlich zu sein, ich habe dein Konzept des Teilens von Farbnuancen geliebt, tolle Web-App. Ich werde deine Farbbasis bei meinem nächsten Design ausprobieren und bin sicher, dass es wirklich hilfreich sein wird.
Danke und Cheers Tyler.
Schönes Werkzeug! Ich mag es :) Vielen Dank, dass du das erstellt hast! Ich hoffe, du entwickelst dieses praktische Werkzeug weiter und... du bist großartig, dass du das kostenlos machst!
Schönes Werkzeug. Ich werde es zu meinem Chrome hinzufügen und sehen, wie es funktioniert. Bisher habe ich ColorZilla benutzt, das gute Arbeit geleistet hat. Dein Werkzeug ist viel mehr, ich glaube, ich werde es benutzen. Danke!
Das sieht großartig aus! Ich werde es jetzt installieren und ausprobieren. Super Arbeit, danke! :)
Was für ein erstaunliches Werkzeug! Sehr sehr nützlich... Danke für den großartigen Artikel auch Tyler!
Es scheint nicht 100% genau zu sein. Nicht alle Farben werden ausgewählt. Ich habe ein Experiment mit der Homepage der css-tricks.com Webseite durchgeführt. Für Rot sagt es #FF0000, obwohl es gar nicht #FF0000 ist, und es gibt viele andere Variationen von Rot auf der Seite (Titel bestimmter Textfelder, Rot in Anzeigen: WUFOO, Foxycart). Oder vielleicht soll dieses Werkzeug etwas anderes tun, das mir nicht so offensichtlich ist.
Übrigens gefällt mir das Konzept. Es wäre großartig, wenn es einzelne Farben wie das Pipettenwerkzeug von Illustrator auswählen könnte. Vielleicht gibt es alternative Werkzeuge, aber normalerweise erstelle ich einen Screenshot eines Bereichs mit der gewünschten Farbe, platziere das Bild in einem Illustrator-Dokument, erstelle eine beliebige Form, wähle das Pipettenwerkzeug aus und weise diese Farbe der Form zu. Ich dachte, dein Werkzeug würde dasselbe außerhalb von Illustrator tun.
Großartig, ich habe das gerade für ein aktuelles Mockup verwendet ;)
Der Topstyle-Editor, der leider nur für Windows verfügbar ist, hat eine großartige Funktion, die ich bei keinem anderen Editor gesehen habe. Für eine geöffnete CSS-Datei können Sie ein Fenster aktivieren, das jede in der Datei verwendete Farbe zusammen mit ihrem Swatch auflistet. Für das Problem in diesem Blogbeitrag könnten Sie einfach eine grundlegende CSS-Datei codieren, die alle Farben auflistet, und sie würde die Swatches erstellen. Sie könnten die Datei dann an einen Entwickler weitergeben und er könnte sie als Ausgangspunkt verwenden.
Er listet auch die Anzahl und den Selektor der Vorkommen jeder Farbe auf, so dass er auch nützlich ist, wenn man eine unordentliche Seite erbt. Ein Entwickler hat möglicherweise schlecht ähnliche Farben abgetastet, so dass Sie diese konsolidieren und die Anzahl der Farben sehr einfach reduzieren können.
Er fungiert auch als Ankerliste, um zu bestimmten Selektoren zu springen, und ist großartig, wenn ein Kunde fordert, dass das Farbschema geändert wird, insbesondere wenn die Seite komplex ist. Warenkörbe zum Beispiel haben tendenziell viele definierte Farben, aber es wäre schwer, sie auf der eigentlichen Seite zu finden (zu viele Seiten/Routen durch die Seite), wenn man sie nicht kennt.
Genial, großartige Erklärung im Video, habe sofort die Chrome-Erweiterung installiert. Danke für die Entwicklung dieses schicken Tools!
Danke! Es ist erstaunlich!
Tolles Werkzeug! Das einzige, was ich immer tun möchte, ist, auf die Farbe zu klicken und einen Farbwähler zu erhalten. Ja, ich kann das in den Entwicklertools tun, aber für mich wäre das ein schönes Feature.
Tolle Web-App. Ich werde das auf jeden Fall benutzen.
Zukünftige Anfrage: Möglichkeit, Farben zu kommentieren. "Dies ist der Rand", "Dies sind Tabs", "Hauptlinkfarbe" "Hover-Linkfarbe" usw. So können wir dies als vollständiges Referenzblatt für Websites verwenden.
Drag & Drop-Reihenfolge von Farben.
Auch möglicherweise speicherbare Paletten (für angemeldete Benutzer), mit der Möglichkeit, die Palette zu benennen (und möglicherweise URLs) z. B.: http://colorpeek.com/#myspecialsideprojectaleternatecolorshceme
Sehr schön!!! Tolles Werkzeug