Wtyczki i narzędzia do pracy z kolorami na stronach www

Nie każdy developer jest urodzonym grafikiem, jednak trudno przecenić znaczenie koloru w projektowaniu stron www. Identyfikacja wizualna, graficzny tone of voice, nawet odbiór strony przez użytkownika i część UX – to wszystko zależy od koloru.

Aby ułatwić zadanie twórcom stron www, powstało wiele wtyczek, narzędzi i bibliotek, które pomagają zarządzać kolorem. My przygotowaliśmy dla was listę 6 narzędzi, dzięki którym dobierzesz kolorystykę strony na podstawie zdjęcia, stworzysz paletę kolorów przyjazną dla użytkownika czy edytujesz zdjęcie za pomocą biblioteki JavaScript.

Colorify.js
Colorify to niezwykle lekka biblioteka JavaScript, dzięki której wyodrębnisz kolor dominujący z obrazu za pomocą API modyfikującego kolory. Barwa, którą wyodrębnisz na podstawie zdjęcia, może posłużyć jako wypełnienie tła w czasie ładowania głównego obrazu, tworzenie gradientów tła lub po prostu dopasowania interfejsu do obrazu.

Coolors
Coolors to narzędzie do wybierania kolorów, aby stworzyć interesujący interfejs. Przeciągnij i upuść kolory z palety, aby stworzyć swój własny zestaw – dzięki temu na bieżąco sprawdzisz, jak kolory harmonizują ze sobą i wprowadzisz trochę porządku w sam proces twórczy. Po założeniu konta będziesz mógł zapisać swoje zestawy.

VibrantJS
Masz zdjęcie, którego chcesz użyć jako headera na stronie i zastanawiasz się, jak dobrać kolory? VibrantJS określi podstawowy kolor na podstawie obrazu; posiada także kilka API, dzięki którym przetworzysz wybrany kolor, np. zmienisz jego format lub sprawdzisz, jak komponuje się z tłem i fontem na stronie. Możesz użyć VibrantJS do podrasowania interfejsu twojej strony – na przykład zanim zdjęcie załaduje się do końca, VibrantJS podmieni kolor tła na skorelowany z obrazem lub stworzy aplikację webową do generowania próbek koloru.

CSS Drive
CSS Drive to narzędzie podobne do VibrantJS. Aplikacja tworzy paletę na podstawie zdjęcia i umożliwia pobranie w pliku .css lub jako próbki Photoshop.

GradifyCSS
GradifyCSS to biblioteka, która pobiera dwa dominujące kolory z twojej strony i generuje CSS ich gradientu. Podobnie jak w przypadku VibrantJS, możesz użyć stworzonego przejścia między kolorami jako wypełnienia nie do końca załadowanego obrazu lub jako koloru wiodącego.

Crls
Pierwotna funkcja aplikacji crls miała na celu redefiniowanie domyślnych kolorów stron www na bardziej przyjazne i mniej męczące dla oczu. Teraz aplikacja doradza zestawienia i kombinacje kolorów dla lepszej dostępności. Możesz rozmieścić kolory za pomocą NMP, Gem (Ruby) oraz próbek Photoshop i Illustrator.

Color Safe
Color Safe to internetowy generator palet kolorów dla stron www. Co go różni od konkurencji? Generuje tylko takie kolory, których kontrast jest zgodny ze standardem WCAG dotyczącym dostępności stron dla osób z upośledzeniami.

A jakie narzędzia do zarządzania kolorem wy znacie? Z jakich korzystacie? Napiszcie nam o tym w komentarzach!

Zapisz

Zapisz

Zapisz

Zapisz

Zapisz

Zapisz

Zapisz

Zapisz

Zapisz