Designer und Webentwickler verwenden häufig den Hex -Code in ihren CSS -Dateien, um zu sagen, welche Farbe ein bestimmtes Element sein wird. Diese Methode hat ihre eigenen Verdienste und Mängel. Es hilft enorm, da es den gesamten Workflow unter verschiedenen Entwicklern standardisiert.Sie können verschiedene Arten von Displays mit unterschiedlicher Farbgenauigkeit verwenden und sich trotzdem ohne Verwirrung an die ursprüngliche Farbpalette halten. Aber oft ist es mühsam, Hex -Codes zu verwenden, um Farben darzustellen. Die Zahl selbst bedeutet für einen menschlichen Entwickler nichts und das kann die Kreativität behindern.Während Sie eine Vielzahl von Farbpflückern von Adobe bis zum HTML -Farbpicker von W3Schools verwenden können, kann der Umschalten zwischen ihnen und Ihrem Redakteur die Konzentration brechen und Ihr Leben viel schwieriger erschweren.

Um diese Situation zu beheben, schauen wir uns einen Farbpflücker an, den Sie als Plugin -to -Atom -Texteditor installieren können, damit der gesamte Prozess viel glatter ist. Sie müssen Atom auf Ihrem System installieren lassen. Sobald Sie das installiert haben, können Sie dieses spezielle Paket darüber installieren. Es hat mehr als 1.7 Millionen Downloads und das macht es hervor, wenn Sie sich entscheiden, über den Atom -Editor selbst zu suchen.

Installieren Sie die Farbwählerin

Öffnen Sie die Einstellungen [Strg +,] in Ihrem Atom -Editor und in der Installieren Abschnittsuche nach neu Pakete.

Installiere das Farbwähler (Version 2.3.0 oder später) und sobald es installiert ist, denken Sie daran, zu Ermöglichen Es.

Sobald es alles erledigt ist. Sie können eine neue Textdatei öffnen und wir können mit dem Testen beginnen.

Verschiedene Optionen für die Farbauswahl

Öffnen Sie eine neue Datei im Atom und verwenden.

Auf der rechten Seite sehen Sie eine Reihe von Schiebereglern und verschiedenen Balken. Die am meisten rechts ist es, die Farbe auszuwählen, die ihm gelassen wird.

Sie können einen extrem leichten Farbton haben, der weiß aussehen würde, egal wie die erste Wahl Ihrer Farbe war, oder Sie können eine komplett graute Version davon oder schwarz auswählen. Der normale Anwendungsfall beinhaltet die Auswahl von etwas, zwischen dem zu Ihrem Anwendungsfall passt.

Zum Beispiel verwenden Menschen verschiedene Farben für dasselbe Element, damit sich die Website etwas interaktiver anfühlt. Den Hyperlinks kann Farbe blau zugeordnet werden, und wenn Sie Ihre Maus darüber schweben, ändert sich die Farbe in schwarz.

Opazität ist ein weiterer wichtiger Faktor, den Entwickler verwenden, um Elemente unter einem farbigen Patch zu verbergen. Wenn der Benutzer eine bestimmte Aktion ausführt, geht die Opazität auf Null und das darunter liegende Element wird sichtbar gemacht.

Verschiedene Standards

Sie werden feststellen, dass die Farben in unterschiedlichen Standards gezeigt werden können, vor allem in RGB (rotgrün und blau), Hex- und HSL -Formaten.

Beginnen wir mit dem HEX -Format, da es ziemlich viel verwendet wird, zumindest auf der Ebene des Anfängers.

Es ist einfach eine hexadezimale Ziffer (ein Nummerierungssystem, das von 0 bis 9 liegt und dann hat A Repräsentieren 10, B darstellen 11 und so weiter, bis 15, was verwendet wird F). Wählen Sie eine Farbe mit dem Farbpaket -Paket aus, klicken Sie auf die HEX -Button unter dem Widget und Sie werden feststellen, dass der entsprechende Hex -Code für diese Farbe in Ihrem Editor eingefügt wird.

Der nächste Standard verwendet RGB, das zeigt, wie viel Prozent einer Farbe rot sind, wie viel Prozent grün sind und wie viel blau ist.

Die gleiche Farbe wie oben hat die RGB -Darstellung wie folgt

Zuletzt müssen Sie über HSL wissen, das für Farbton, Sättigung und Leichtigkeit steht.

Farbton repräsentiert, welche Farbe das Element hat. Es könnte vom rotem Ende des Spektrums bis zum Blau reichen und die Farben einfach als Kombinationen von Rot, Grün und Blau ignoriert (zumindest vom Standpunkt des Entwicklers). Dies wird oft als Farbrad mit rot, grün und blau 60 Grad voneinander bezeichnet, aber der Farbwähler hatte es bis zu einer einzelnen Balken rechts geöffnet.

Das nächste, worüber man sich Sorgen machen muss, ist die Sättigung, die beschreibt, wie intensiv die Farbe sein wird. Vollständig gesättigte Farben haben keine Graustufen, 50% gesättigt sind leichtere Farben und 0% derjenigen sind nicht von Grau zu unterscheiden. Der quadratische Raum eignet sich perfekt für die Auswahl dieser.

Leichtigkeit beschreibt, wie hell die Farben erscheinen werden. 100% leichte Farben sind nicht von Weiß zu unterscheiden und 0% scheinen völlig schwarz zu sein. Wenn Ihre Website beispielsweise viel Lesematerial enthält, möchten Sie, dass eine weniger helle Lösung es dem Leser erleichtert, sich zu engagieren. Das ist also HSL.

Abschluss

Redakteure wie Atom und Visual Studio Code haben ein ganzes Ethos von nützlichen Paketen und Themen, die um sie herum aufgebaut sind. Color Picker ist nur ein Beispiel, mit dem ein Entwickler unnötige Reisen auf W3schools oder Stapelüberlauf verzichten kann. Die Verwendung von Color Picker erfordert weiter.

Sobald Sie die Farbpalette für Ihr Projekt entschieden haben, können Sie jedoch mit Paketen wie Color Picker Projekte schneller und reibungsloser erstellen.