Dziś przedstawię narzędzie do komponowania palety kolorów na stronę WWW, którego używam najczęściej. Wydaje mi się ono bardziej wygodne i elastyczne od poprzedniego ale możliwe, że jest to tylko moje subiektywne odczucie.

Kuler, bo o nim będę dzisiaj pisał, znajduje się pod adresem kuler.adobe.com/#create/fromacolor. Domyślnym trybem Kulera jest Create From a Color. Tu podobnie jak w Color Scheme Designer podstawowym elementem jest koło kolorów. Możemy przesuwać po nim punkty kolorów komponując swoją paletę. Do dyspozycji mamy 7 modeli palety kolorów. Wybieramy je w Selec a rule. Kilka z nich ma swoje odpowiedniki w Color Scheme Designer. W każdym modelu mamy do zdefiniowania pięć kolorów, z których jeden wyróżniony podwójnym obramowaniem jest kolorem głównym (Base Color). Pięć kwadratów pod kołem kolorów prezentuje te barwy. Każdy kolor można ustawić jako główny – wystarczy kliknąć Set as Base

W większości modeli kolory można swobodnie przesuwać na kole kolorów. Przesunięcie koloru głównego bliżej środka koła powoduje zmianę nasycenia całej palety, natomiast dla pozostałych czterech barw nasycenie możemy zmieniać niezależnie. Oprócz tego dla każdego koloru możemy regulować jego jasność. Wystarczy kliknąć odpowiedni punkt lub kwadrat o odpowiedniej barwie, a nad kwadratami palety, tuż pod kołem kolorów pojawia się suwak, którym możemy dany kolor przyciemnić aż do czerni. Tu ponownie regulacja koloru głównego wpływa na pozostałe kolory, natomiast regulacja innego koloru zazwyczaj nie wpływa na pozostałe (są od tego wyjątki).

Pod każdym kolorowym kwadratem mamy definicję koloru w czterech różnych modelach definiowania kolorów: HSV, RGB, CMYK i LAB. Oprócz tego podana jest definicja koloru w modelu RGB z użyciem wartości szesnastkowej czyli najczęściej używanej przy tworzeniu stron WWW. Wybierając jeden z tych modeli dostajemy do dyspozycji trzy lub cztery suwaki do modyfikacji koloru w tych modelach. Możemy też wpisać wartości liczbowe w odpowiednich polach. Modyfikacja jednego koloru wpływa na pozostałe.

Drugim trybem Kulera jest Create From an Image. Tu zamiast korzystać z narzuconego modelu palety kolorów, wybieramy pięć różnych kolorów ze zdjęcia. Domyślne zdjęcie można zmieniać i to zarówno na zdjęcie z flickr.com jak i z własnego dysku. Ten tryb sprawdza się doskonale gdy dobieramy kolory do gotowego zdjęcia, które ma zdominować stronę, a kolory są nam potrzebne tylko do linków, nagłówków, ramek itp.

Moim zdaniem Kuler generuje ciekawsze palety i daje większe możliwości ich dopracowania. Oczywiście może to być moje jak najbardziej subiektywne odczucie. Dlatego wszystkich zainteresowanych zapraszam do testowania i dzielenia się swoimi doświadczeniami w komentarzach poniżej.

Generalnie twórcy internetowi dzielą się na dwie grupy. Na wspaniałych profesjonalnych programistów, którzy potrafią na stronie zrobić cuda. Tylko że te cuda wcale tak cudownie nie wyglądają. Źle dobrane kroje pisma, kolory, nie pasujące do niczego elementy graficzne. I z drugiej strony graficy, webdesignerzy wymyślające niesamowite obrazy, od których ciężko oderwać oczy. Osoby skupiające w jednym ciele umiejętności obu stron, należą do rzadkości.

„Sekrety programistów” czytają głównie, tu duża niespodzianka , programiści – często początkujący, albo dopiero przyszli. Wielu z Was, podobnie zresztą jak i ja, nie zawsze potrafi dobrać odpowiedni zestaw kolorów na stronę. Liczenie na własny zmysł estetyczny lub szczęśliwy przypadek bywa zwykle zawodne i potrzebna jest pomoc z zewnątrz. Na szczęście tę pomoc można znaleźć w Internecie w postaci narzędzi komponujących palety kolorów. Wybór tych narzędzi jest dość duży, ale nie wszystkie do końca spełniają swoją rolę. Ja przedstawię dwa z nich, które najlepiej sprawdziły się w mojej pracy min. przy tworzeniu strony serwan.pl, ale też stron, które powstają w tej chwili.

Pierwszego narzędzia używam do wstępnego wyboru głównych kolorów. Jest to Color Scheme Designer. Głównym elementem tego narzędzia jest koło kolorów. Można je kliknąć w dowolnym miejscu wybierając kolor podstawowy. Do tego koloru zostaną dobrane inne kolory i utworzona z nich paleta, która znajduje się po prawej stronie koła. Zaznaczenie okienka „Show text” pod paletą kolorów spowoduje wyświetlenie napisu na każdym kolorze palety. Na dobór kolorów można wpływać poprzez ustawienia. Nag kołem kolorów mamy sześć modeli kompozycji.

Mono dobiera paletę na podstawie pojedynczego koloru. Przydatność tej palety jest dosyć ograniczona. Można jej użyć do prostych stron jako dodatku do czarnego tekstu na białym tle.

Complement nie ma nic wspólnego z komplementem. Ten model do wybranego koloru dodaje kolor komplementarny, mocno skontrastowany z wybranym kolorem. Kolorystyka tego modelu jest dość ryzykowna i nie sprawdza się przy każdej tematyce strony, ale oba wybrane kolory mogą być dobrym punktem wyjścia do komponowania palety w drugim narzędziu, które opiszę przy następnej okazji.

Triad do wybranego koloru dobiera dwa inne o równej odległości na kole kolorów od barwy podstawowej. Odległość tę można zmieniać poprzez przesunięcie na kole punktu symbolizującego jeden z dobranych kolorów, lub klikając na „Angle” po prawej stronie nad kołem i ustawiając odpowiedni kąt. Regulacja w tym modelu ograniczona została zakresem od 5 do 90 stopni. Kąt mierzony jest od nieistniejącego w tym modelu koloru komplementarnego. Uzyskana paleta jest ciekawsza niż w poprzednim modelu aczkolwiek nadal dość mocno skontrastowana. Paleta często sprawdza się na różnych stronach o tematyce rozrywkowej, dziecięcej lub młodzieżowej. Raczej należy jej unikać przy stronach biznesowych, finansowych czy informacyjnych. Wyjątkiem może być strona informacyjna czy biznesowa związana z grafiką, sztuką wizualną lub multimediami.

Tetraddo wybranego koloru dobrane są trzy inne w tym jeden kontrastowy pozostałe dwa też są względem siebie skontrastowane. Możemy jednak zmieniać odległości pomiędzy obiema parami kolorów, co może dać dość ciekawy efekt. Otrzymana w ten sposób paleta jest bardziej uniwersalna od poprzedniej. Nadal jednak są obszary, w których użycie takiej palety może wiązać się z ryzykiem nie trafienia do grupy docelowej.

Analogic jest modelem trójkolorowym podobnie jak Triad. Różnica między nimi jest niewielka, ale za to dosyć istotna. Regulacja odległości dodatkowych kolorów odbywa się również w zakresie 5 – 90 stopni, ale w stosunku do koloru podstawowego. Przy wartościach kąta poniżej 50 paleta wynikowa jest wystarczająco stonowana, by użyć jej tam, gdzie model Triad wydawał się być nieodpowiedni. Jest to model używany przeze mnie wraz z modelem następnym najczęściej, aczkolwiek ostateczną paletę komponuję w następnym z opisywanych narzędzi.

Accented analogic do modelu poprzedniego jest dodany kolor kontrastowy do koloru głównego. Uzyskana paleta jest bogatsza przy zachowaniu wszystkich zalet i zastosowań palety poprzedniej.

Skomponowane w ten sposób palety możemy dodatkowo wyregulować. Pod kołem kolorów znajdują się dodatkowe zakładki. Kliknięcie w „Adjust Scheme” przeniesie nas do narzędzia regulacji jaskrawości, nasycenia, kontrastu i jasności palety. Na zakładce „Color List” mamy próbki wszystkich kolorów z palety wraz z ich kodami szesnastkowymi gotowymi do użycia na stronie www.

Pod paletą kolorów znajdują się zakładki „Light page example” i „Dark page example” Kliknięcie ich powoduje wyświetlenie przykładowej strony używającej danej palety w wersji jasnej lub ciemnej.

W menu górnym Color Scheme Designer mamy możliwość cofania ostatnio wprowadzonych zmian, przywracania cofniętych zmian, wylosowania dowolnej palety, zasymulowania jak daną paletę widzą ludzie z różnymi zaburzeniami postrzegania barw i eksportu palety w różnych formatach.

Mam nadzieję, że opisane narzędzie pomoże Wam w wyborze odpowiednich kolorów na swoją stronę. Wybór kolorów jest ogromny, nie zawsze jednak zupełnie dowolny, często pojawia się potrzeba dobrania palety do loga lub innego elementu graficznego. Dobrze jest wtedy ten kolor z loga ustawić jako kolor główny i do niego dobierać paletę. Poszczególnym barwom nadaje się też różne znaczenie psychologiczne np. kolor niebieski oznacza autorytet, zielony – naturę, żółty – komunikację, a czerwony – namiętność. O tym też warto pamiętać, ale bez przywiązywania nadmiernej wagi. Żółty tekst na białym tle będzie raczej mało komunikatywny.

Zachęcam do korzystania z opisanego narzędzia i dzielenia się swoimi uwagami i spostrzeżeniami poniżej.