Projektanci i programista stron internetowych często używają kodu sześciokątnego w swoich plikach CSS, aby powiedzieć, jaki kolor będzie określony. Ta metoda ma swoje własne zalety i wady. Pomaga ogromnie, ponieważ standaryzuje cały przepływ pracy wśród różnych programistów.Możesz użyć różnych rodzajów wyświetlacza o różnej dokładności kolorów i nadal przykleić się do oryginalnej palety kolorów bez zamieszania. Ale często kłopotliwe jest użycie kodów sześciokątnych do reprezentowania kolorów. Sama liczba nie znaczy dla ludzkiego dewelopera, która może utrudniać kreatywność.Podczas gdy możesz użyć wielu kolorowych zbieraczy od Adobe do W3Schools HTML Picker, przełączanie między nimi a redaktorem.

Aby zaradzić tej sytuacji, spójrzmy na zbieracza kolorów, który można zainstalować jako wtyczkę do edytora tekstu Atom, dzięki czemu cały proces jest znacznie płynniejszy. Musisz zainstalować atom w swoim systemie. Po zainstalowaniu możesz zainstalować ten konkretny pakiet na nim. Ma więcej niż 1.7 milionów pobrań, co wyróżnia, jeśli zdecydujesz się wyszukać sam za pośrednictwem Edytora Atomu.

Instalowanie kolorowego zbieracza

Otwórz Ustawienia [Ctrl +,] w edytorze atomowym i w zainstalować Poszukiwanie sekcji nowych pakiety.

Zainstaluj narzędzie do wybierania kolorów (wersja 2.3.0 lub później), a po zainstalowaniu pamiętaj o Włączać To.

Po zakończeniu tego wszystkiego. Możesz iść naprzód i otworzyć nowy plik tekstowy, a my możemy rozpocząć testowanie.

Różne opcje zbierania kolorów

Otwórz nowy plik wewnątrz atomu, a za nim otwórz użyj klawisza [Ctrl+Alt+C], jeśli jesteś w systemie Windows lub Linux lub użyj [CMD+Shift+C] Jeśli używasz Mac OSX.

Po prawej stronie zobaczysz wiele suwaków i różnych barów. Najbardziej na prawej jest wybranie koloru pozostawionego do niego, jest pasek, który określa krycie twojego koloru, a kwadrat na środku decyduje, jaki odcień danego koloru zostanie wybrany.

Możesz przejść wyjątkowo jasny odcień, który wyglądałby na biały, bez względu na początkowy wybór twojego koloru, lub możesz wybrać całkowicie szarowaną wersję lub czerń. Normalny przypadek użycia polega na wybraniu czegoś pomiędzy tym, co pasuje do twojego przypadku użycia.

Na przykład ludzie używają różnych kolorów dla tego samego elementu, aby strona była nieco bardziej interaktywna. Hiperłącze można przypisać kolorom niebieski, a po unoszeniu nad nim myszy kolor zmienia się na czarny.

Krycie to kolejny ważny czynnik, którego programiści używają do ukrycia elementów pod kolorową łatką, a kiedy użytkownik wykonuje określoną akcję, krycie sięga do zera, a element pod spodem jest widoczny.

Różne standardy

Zauważysz, że kolory można wyświetlić w różnych standardach, w szczególności w formatach RGB (czerwony zielony i niebieski), sześciokątne i HSL.

Zacznijmy od formatu sześciokątnego, ponieważ jest on dość używany, przynajmniej na poziomie początkującego.

Jest to po prostu cyfra szesnastkowa (czyli system liczby, który wzrasta od 0 do 9, a następnie ma A Reprezentuj 10, B reprezentują 11 i tak dalej, do 15, które jest reprezentowane przy użyciu F). Wybierz kolor za pomocą pakietu Color Picker, kliknij przycisk sześciokątny poniżej widżetu, a zobaczysz, że odpowiedni kod sześciokątny dla tego koloru jest wklejony w edytorze.

Następny standard wykorzystuje RGB, który pokazuje, jaki procent koloru jest czerwony, jaki procent jest zielony, a ile jest niebieski.

Ten sam kolor jak powyżej ma reprezentację RGB w następujący sposób

Na koniec musisz wiedzieć o HSL, który oznacza odcień, nasycenie i lekkość.

Hue reprezentuje, jaki kolor ma element. Może się obejmować od czerwonego końca spektrum aż do niebieskiego i po prostu ignoruje kolory jako kombinacje czerwonego, zielonego i niebieskiego (przynajmniej z punktu widzenia programisty). Jest to często opisywane jako koło kolorów z czerwonym, zielonym i niebieskim 60 stopni oprócz siebie, ale kolorowy zbieracz otworzył go do jednego paska po prawej stronie.

Następną rzeczą, o którą należy się martwić, jest nasycenie, które opisuje, jak intensywny będzie kolor. Całkowicie nasycone kolory nie mają odcieni szarości, 50% nasycone to jaśniejsze kolory, a 0% są nie do odróżnienia od szarości. Kwadratowa przestrzeń jest idealna do wyboru tego.

Lekkość opisuje, jak jasne będą kolory. 100% jasnych kolorów jest nie do odróżnienia od białych, a 0% wydają się całkowicie czarne. Na przykład, jeśli Twoja witryna ma dużo materiałów do czytania, chcesz, aby czytelnik ułatwiał mniej jasne rozwiązanie. Więc to jest HSL.

Wniosek

Redaktorzy, tacy jak Atom i Visual Studio Code mają cały etos przydatnych pakietów i motywów wokół nich. Kolor Picker to tylko jeden przykład, którego programista może użyć do rezygnacji z niepotrzebnych podróży do W3Schools lub przepełniania stosu. Korzystanie z Color Picker nadal wymaga dokładnego wyświetlacza kolorów, który jest prawidłowo skalibrowany.

Jednak po ustaleniu palety kolorów swojego projektu możesz zacząć budować projekty szybciej i gładsze przy użyciu pakietów takich jak Color Picker.