Jak dobrać kolory

Chyba każdy natknął się w sieci na strony (czy to zrobione przez początkujących czy też przez ludzi, którzy wzięli za to pieniądze) na których dobór kolorów okazuje się piętą achillesową (czasem nie jedyną, ale jakże rzucającą się w oczy) jej twórcy. Często spotykam się z wyjaśnieniem w stylu “Jakoś mi to nie wychodzi” albo “Nie mam daru do łączenia kolorów”. OK nie każdy jest w tym kierunku utalentowany i wykształcony. Oczywiście można mieć wątpliwości, czy w takim wypadku powinien brać pieniądze za tworzenie layoutów, ale nie o to chodzi w tym wpisie. Przecież przy odrobinie dobrej woli i niewielkim wsparciu bardzo poręcznych programów daje się dobrać przyjemną i harmonijną kolorystykę dla tworzonego serwisu. Trzeba tylko wiedzieć gdzie szukać pomocy. Jak to gdzie? Oczywiście w Internecie. Po co wyważać drzwi otwarte już dawno przez innych?

Color schemes generator 2

Na początek opiszę dość prosty ale dający całkiem sporo możliwości skrypt o nazwie Color schemes generator 2 (dostępny w angielskiej, czeskiej i hiszpańskiej wersji językowej).

Obsługa skryptu jest bardzo prosta. Na panelu widać koło barw, pod nim przyciski za pomocą których wybieramy z ilu barw ma się składać nasz layout. Po prawej na bieżąco wyświetlany jest schematyczny layout złożony z wybranych kolorów oraz gody wybranych kolorów w notacji szesnastkowej.

Do dyspozycji mamy układ monochromatyczny, kontrastowy, trójbarwny, czterobarwne oraz układ zwany analogicznym (w zależności od wyboru komponentu jest to układ trójbarwny zbliżony do monochromatycznego lub czterobarwny zbliżony do kontrastowego).

Ponad to mamy możliwość zawężenia wybranej palety do palety kolorów “bezpiecznych” (Web Safe). Na prawym panelu każdy kolor jest reprezentowany przez cztery odcienie. Jeden z nich jest prezentowany jako podstawowy i trzy dodatkowe. W obrębie każdego koloru można zmieniać hierarchę odcieni w ramach jednego koloru). Ostatecznie jeśli dobrane kolory nam nie odpowiadają można (klikając na jego reprezentację na panelu – małe aktywne kolorowe kwadraciki) zmienić wybrany odcień na inny wybrany z palety kolorów. Wybrany schemat kolorów można obejrzeć w różnych wersjach nasycenia kolorów (domyślny, pastelowy, ciemny pastelowy, jasny pastelowy, kontrastowy i wyblakły). Na koniec można podejrzeć jak dany schemat będą widziały osoby z różnymi wadami wzroku (taka ciekawostka jak dla mnie).

Pisząc w skrócie, uważam, że to bardzo poręczny, wygodny bo w pełni myszkolubny i użyteczny skrypt pomagający w doborze kolorów. Na dodatek opracowaną paletę można sobie zapamiętać w formie adresu url.

Kuler

Podobnie, działa generator Kuler udostępniony przez Adobe. Wadą tego skryptu jest to, że bardzo wolno się ładuje i wymaga zainstalowania Adobe Flash Player 10, a ja nie lubię jak się mnie do czegoś zmusza. Jednak możliwości skryptu przynajmniej częściowo mi rekompensują te niedogodności.

Za pomocą tego skryptu możemy wygenerować schemat złożony z palety 5 kolorów. Pierwsza dostępna metoda to po prostu ręczny dobór kolorów, które możemy wprowadzać we wszystkich podstawowych formatach a także za pomocą suwaków. Można też korzystać z siedmiu zdefiniowanych reguł, które dopasują nam cztery kolory do wybranego koloru bazowego.

Inny sposób pozwala na generowanie schematu kolorów na podstawie wczytanej grafiki. Przesuwając pięć aktywnych punktów, możemy wybierać kolory. W tym trybie można skorzystać z automatu, który sam wybierze pasujące do siebie kolory z obrazka kierując się różnymi kryteriami.

Na koniec można załadować gotowe zestawy wybierając ze zbioru zawierającego kilkanaście tysięcy propozycji podzielonych w na różne kategorie (najnowsze, najbardziej popularne, najwyżej oceniane itp).

Unsafe Colormatch

Tym co nie lubią sobie szczególnie komplikować życia a jednocześnie lubią zobaczyć, przynajmniej z grubsza, efekt swojej pracy, może się spodobać skrypt Unsafe Colormatch. Główną część zajmuje widok schematycznego layoutu na którym prezentowanych jest szesnaście elementów dla których można niezależnie dobierać kolory. Powyżej schematu widać szesnaście aktywnych pól reprezentujących poszczególne elementy. Wystarczy kliknąć na wybrane pole i dopasować kolor z palety widocznej po lewej strony panelu.

Sam skrypt bardzo prosty. Od razu widać, efekt. Jednak przy doborze kolorów trzeba się kierować własną oceną i intuicją, gdyż nie ma żadnego wsparcia w postaci gotowych zestawów, czy reguł ułatwiających dobór kolorów.

ColorJack

W przeciwieństwie do Unsafe Colormatch skrypt
ColorJack nie prezentuje wygenerowanego schematu w formie typowego layoutu, ale za to oferuje sporo trybów automatycznego doboru kolorów (znacznie więcej niż Color schemes generator 2 czy Kuler). Ponadto dobrane kolory można obejrzeć zarówno na białym jak i na czarnym tle. Oczywiście nie ma konieczności korzystania z gotowych schematów. Niestety nie można dobierać kolorów niezależnie. Za to dostępne schematy można wygodnie edytować przeciągając punkty po kole barw. Zmieniając suwaków składowe RGB i HSB. Dostępna paletę można zawęzić do palety WebSmart lub WebSafe.

Skrypt daje możliwość wyeksportowania wygenerowanego schematu do Ilustratora, PhotoShopa a także w formie linku, który daje możliwość wczytania schematu i jego edycji w późniejszym czasie.

ColorToy 2.0

O wiele prostszy od poprzedników ale też posiadający mniejsze możliwości jest skrypt ColorToy 2.0. W tym wypadku wystarczy wpisać wybrany przez siebie bazowy kolor w notacji RGB albo szesnastkowej. Generator automatycznie przelicza kolor do drugiej notacji i dobiera osiem pasujących kolorów. Jeśli nie mamy pomysłu nawet na kolor bazowy zawsze możemy użyć opcji ‘random’ generującej zgrabny komplet.

To niezbyt wyszukany skrypt ale może okazać się pomocny, szczególnie dla tych, którzy nie lubią za dużo kombinować.

ColorBlender

Do równie prostych jak ColorToy 2.0 można zaliczyc skrypt ColorBlender. Tym razem schemat możemy skomponować jedynie z sześciu kolorów. Kolory od których chcemy zacząć zabawę musimy podawać w formacie RGB albo HSV. Na szczęście na schemacie prezentowane są również w notacji szesnastkowej więc nie trzeba sobie niczego przeliczać z powrotem.

W przeciwieństwie do skryptu ColorToy 2.0 kolor możemy zmieniać suwakami, ustawiając poszczególne jego składowe. Wybierając tryb AutoMatch lub Direct Edit możemy edytować cały schemat (pięć kolorów dopasowuje się automatycznie do koloru bazowego) albo pojedyncze kolory kierując się własnym wyczuciem.

Po ustawieniu koloru za pomocą suwaków możemy go modyfikować korzystając z prezentowanego po prawej schematu siedmiu odcieni wybranego koloru. Wypracowany schemat można zapisać na czas sesji, aby móc w dowolnym momencie sesji do niego wrócić (na przykład w celu porównania go z innym schematem). Możliwy jest również zapis w formie adresu URL który można przechowywać i wykorzystać w późniejszym czasie. Adres URL można sobie po prostu zapisać lub przesłać pocztą na dowolny adres.

Podsumowanie

Jak widać w sieci można znaleźć wiele skryptów za pomocą których z łatwością dobierzemy kolory do tworzonej właśnie strony. Opisałam tylko te, na które sama się natknęłam poszukując w swoim czasie takich narzędzi i które warto polecić. Oczywiście zdaję sobie sprawę, że może gdzieś w sieci są jeszcze fajniejsze skrypty, których nie odkryłam, ale w opisanym zbiorze chyba każdy znajdzie coś w sam raz dla siebie. Oczywiście nie pogardzę jeśli ktoś poda mi link do ciekawych narzędzi.

W sieci można również znaleźć programy przeznaczone do pracy na dysku lokalnym, ale o tym pewnie napisze kiedy indziej.