Auszug aus dem Bild
Bild hier ablegen, einfügen (Strg+V), oder
Neueste Farben
Color Picker Hex & Image Extractor
An einem Wochenende verbrachte ich viel zu viel Zeit mit dem Versuch, ein lilafarbenes Logo eines Kunden in Figma abzugleichen, um dann festzustellen, dass der Hexadezimalcode, den ich kopiert hatte, nicht ganz korrekt war, weil ich ihn aus einem komprimierten JPEG-Screenshot und nicht aus der Originaldatei übernommen hatte. Der Unterschied zwischen #895BF5 und #8B5CF6 ist auf dem Bildschirm im Grunde unsichtbar, es sei denn, man legt sie nebeneinander auf einen weißen Hintergrund, und dann ist es unglaublich offensichtlich und ärgerlich. Das ist die Art von Dingen, die mich dazu gebracht haben, einen Farbwähler zu wollen, der alles an einem Ort macht - die Farbe nehmen, sie in jedem Format sehen, prüfen, wie sie gegen Text aussieht, fertig. Verwenden Sie die obige Anwendung, wählen Sie Ihre Farbe oder fügen Sie ein Bild ein, und Sie haben HEX, RGB, HSL, HSV und CMYK auf einen Schlag.
Was ist hier drin?
Die Hauptauswahl bietet ein Sättigungs-Helligkeits-Pad mit einem Farbton-Schieberegler darunter, was ziemlich Standard ist, aber der Teil, den ich tatsächlich am meisten benutze, ist die Bildextraktion. Man legt einen Screenshot ab oder fügt ihn aus der Zwischenablage ein und klickt auf eine beliebige Stelle, um exakte Farben zu erhalten. Das ist viel zuverlässiger, als mit dem Auge im Photoshop-Farbsampler zu suchen, vor allem, wenn man von einem Referenzfoto oder einem Marken-Asset ausgeht, das einem jemand als PNG-Datei geschickt hat. Die Leiste mit den zuletzt verwendeten Farben hält Ihre letzten Auswahlen sichtbar. Das klingt nach einer Kleinigkeit, aber es spart eine absurde Menge an Hin- und Herbewegungen, wenn Sie versuchen, eine Palette von Grund auf neu zu erstellen.
Jede Farbe wird in fünf Formaten ausgegeben: HEX, RGB, HSL, HSV und CMYK. Es gibt eine Schaltfläche “Alle Formate kopieren”, wenn Sie alles auf einmal in die Zwischenablage kopieren möchten. Das ist wirklich nützlich, wenn Sie einen Styleguide dokumentieren und alle Werte in eine Kalkulationstabelle oder eine Notion-Tabelle einfügen müssen. Letztes Jahr habe ich ein Google Sheet mit Farbspezifikationen für etwa vierzig verschiedene Websites geführt, und das Kopieren und Einfügen jedes einzelnen Formats aus dem DevTools-Farbwähler von Chrome hat mich zur Verzweiflung gebracht, so mühsam war es für etwas, das nur eine Sekunde dauern sollte.
Der Bereich Farbharmonien erzeugt komplementäre, analoge, triadische, geteilt-komplementäre, tetradische und quadratische Paletten aus den von Ihnen gewählten Farben. Jede Harmonie verfügt über eine Schaltfläche “CSS kopieren”, mit der Sie den gesamten Satz als benutzerdefinierte CSS-Eigenschaften erhalten. Ehrlich gesagt sind die triadischen und tetradischen Modi diejenigen, zu denen ich greife, wenn ich schnell ein Farbschema benötige - komplementär ist für die meisten Projekte zu offensichtlich, und analog kann etwas flach wirken, es sei denn, Sie streben absichtlich einen monochromen Look an. Das heißt, wenn Sie etwas bauen, das sich beruhigend oder zusammenhängend anfühlen soll, wird analog unterschätzt und funktioniert besser, als die Leute ihm zutrauen.
Es gibt auch einen Streifen für Farbtöne und Schattierungen, der hellere und dunklere Variationen Ihrer ausgewählten Farbe in gleichmäßigen Schritten erzeugt, was die Art von Dingen ist, die Tailwind CSS automatisch mit seinen Farbskalen macht, die Sie aber sonst manuell berechnen müssten, indem Sie den Helligkeitswert in HSL anpassen. Die Kontrastvorschau oben zeigt Ihre Farbe mit dunklem und hellem Text überlagert, so dass Sie mit dem Auge sehen können, ob sie die Zugänglichkeitsprüfungen bestehen wird - es ist kein vollständiger WCAG-Kontrastverhältnis-Rechner, wenn Sie also exakte Verhältnisse für die Konformität benötigen, sollten Sie einen speziellen Kontrastprüfer dafür verwenden. Aber für einen schnellen Bauch-Check bei der Auswahl von Markenfarben oder UI-Akzenten erfüllt es seine Aufgabe.
Eine Sache, die ich zu den CMYK-Werten erwähnen möchte: Sie werden aus RGB berechnet, was bedeutet, dass es sich um Näherungswerte handelt. Wenn Sie tatsächlich etwas an eine kommerzielle Druckerei schicken - Visitenkarten, Verpackungen, was auch immer - müssen Sie in InDesign oder Illustrator mit einem richtigen CMYK-Farbprofil arbeiten und nicht von Bildschirmfarben konvertieren. Die CMYK-Ausgabe ist gut geeignet, um eine ungefähre Vorstellung davon zu bekommen, wie eine Farbe im Druck aussieht, und sie ist nah genug für digitale Mockups, aber sie wird nicht mit einem Pantone-Farbmuster übereinstimmen. Gut zu wissen.
FAQ
Was ist der Unterschied zwischen HEX-, RGB- und HSL-Farbformaten?
Das sind drei Möglichkeiten, um genau dieselbe Farbe zu beschreiben. HEX ist ein sechsstelliger Code, der in CSS und Design-Tools verwendet wird - #895BF5 zum Beispiel. RGB unterteilt die Farbe in rote, grüne und blaue Kanalwerte von 0 bis 255, so wie Bildschirme Farbe tatsächlich wiedergeben. HSL beschreibt die Farbe in Form von Farbton (die Position des Farbrads, 0-360°), Sättigung (wie lebendig sie ist) und Helligkeit (wie hell oder dunkel). Die meisten Webentwickler verwenden standardmäßig HEX, weil es kompakt ist, aber HSL ist wohl intuitiver, wenn Sie versuchen, eine Farbe von Hand anzupassen - die Helligkeit um 10% zu erhöhen, ist viel einfacher, als zu erraten, welcher RGB-Kanal zu ändern ist.
Kann ich exakte Farben aus einem hochgeladenen Bild extrahieren?
Ja - legen Sie ein Bild auf den Extraktionsbereich oder fügen Sie es mit Strg+V aus der Zwischenablage ein und klicken Sie dann auf eine beliebige Stelle, um die Farbe an diesem Pixel zu erfassen. Wenn es sich um ein komprimiertes JPEG-Bild handelt, kann es sein, dass die von Ihnen ausgewählten Farben aufgrund von Kompressionsartefakten leicht vom Original abweichen. Besonders auffällig ist dies bei Farbverläufen und einfarbigen Markenfarben, die durch die Komprimierung in sozialen Medien gelaufen sind. Die genauesten Ergebnisse erzielen Sie, wenn Sie ein PNG oder eine unkomprimierte Quelldatei verwenden.
Sind die CMYK-Werte genau genug für den Druck?
Es sind Näherungswerte. Die CMYK-Werte werden mathematisch aus RGB umgewandelt, einem Farbmodell für den Bildschirm, das weder das Verhalten der Tinte noch das Papiermaterial oder das spezifische Farbprofil Ihres Druckers berücksichtigt. Für eine grobe Referenz oder ein digitales Mockup sind sie völlig in Ordnung. Wenn Sie jedoch Dateien für Visitenkarten oder Verpackungen an eine kommerzielle Druckerei senden, sollten Sie in InDesign oder Illustrator mit einem speziellen CMYK-Profil arbeiten, idealerweise mit Pantone-Referenzen. Die Diskrepanz zwischen RGB-konvertiertem CMYK und der tatsächlichen Druckausgabe kann überraschend groß sein, insbesondere bei hellen Violett- und gesättigten Grüntönen, die in CMYK einfach nicht gut wiedergegeben werden.
Wie funktioniert die Farbharmonie?
Farbharmonien beruhen auf geometrischen Beziehungen auf dem Farbkreis. Komplementärfarben sind zwei Farben, die sich direkt gegenüberliegen (z. B. Violett und Gelbgrün), Analogfarben sind benachbarte Farben auf dem Farbkreis, und Dreifarben sind drei Farben, die gleichmäßig 120° voneinander entfernt sind. Die Berechnung erfolgt in HSL - komplementär addiert einfach 180° zum Farbton, triadisch addiert 120° und 240°, und so weiter. Diese Gruppierungen sind nicht willkürlich, sondern beruhen auf farbtheoretischen Prinzipien, die seit Jahrhunderten in der Malerei und im Design verwendet werden. Die Schaltfläche “CSS kopieren” exportiert die vollständige Harmonie als benutzerdefinierte Eigenschaften, sodass Sie sie direkt in ein Stylesheet einfügen können.
Prüft die Kontrastvorschau die Einhaltung der WCAG-Barrierefreiheit?
Nicht vollständig. In der Vorschau wird Ihre Farbe mit dunklem und hellem Text überlagert, so dass Sie auf einen Blick sehen können, ob der Text lesbar ist, aber es wird kein spezifischer Wert für das Kontrastverhältnis berechnet. WCAG 2.1 verlangt ein Mindestverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text - wenn Sie diese genauen Zahlen für die Einhaltung der Zugänglichkeit überprüfen müssen, gibt Ihnen ein spezielles Kontrastverhältnis-Prüfprogramm die genauen Werte und ein Pass/Fail-Ergebnis. Die Vorschau hier ist eher eine schnelle Überprüfung, während Sie die Farben auswählen, und kein Ersatz für eine richtige Prüfung.