Wprowadzenie do teorii kolorów dla projektantów stron internetowych

Teoria kolorów w projektowaniu stron internetowych: właściwa paleta kolorów dla twojej strony internetowej

Pamiętamy teorię kolorów z zajęć plastycznych: znaczenie koła barw, temperaturę i chromatyczność. Jako projektant stron internetowych codziennie pracujesz z teorią kolorów - nieświadomie lub świadomie. W tym artykule pokażę ci, jak używać odpowiednich zasad i narzędzi do tworzenia dobrych kombinacji kolorów w twoim następnym projekcie internetowym.

Teoria kolorów: kolejność kolorów

Pierwsze wzmianki o teorii koloru i kole barw pochodzą co najmniej z początku XVII wieku. Pochodzenie kolorów, odbicie światła, proces zachodzący w ludzkim oku - to wszystko zajmuje ludzkość od dawna.

My, projektanci, często jesteśmy przede wszystkim wzrokowcami. Tworzenie kombinacji kolorystycznych często pochodzi z wnętrza. Nieustannie widzimy i analizujemy kolory wokół nas. W ten sposób powstaje intuicyjny sposób obchodzenia się z kolorami.  

Jednak wiedza faktograficzna na temat kolorów i ich efektów jest nie tylko niezbędna do wyjaśnienia wyboru i rozmieszczenia kolorów. Jest to również ważne przy podejmowaniu decyzji odbiegających od normy.

Aby znaleźć optymalne kombinacje kolorów dla swoich klientów i stron internetowych, nieodzowna jest solidna znajomość teorii kolorów.

W porównaniu z mediami drukowanymi, my jako projektanci powierzchni cyfrowych mamy zdecydowaną przewagę: to, ile kolorów ostatecznie użyjemy i na jakie odcienie się zdecydujemy, nie ma wpływu na koszt produktu. Ma to jednak zastosowanie tylko tak długo, jak długo Twój projekt pozostaje w formie cyfrowej.

Nie podlegasz też ograniczeniom technicznym, jakie mamy w przypadku mediów drukowanych. To daje ci, jako projektantowi, wspaniałą wolność rozwijania swojego pełnego potencjału.

"*" wyświetla wymagane pola

Chcę otrzymywać newsletter, aby być informowanym o nowych artykułach na blogu, e-bookach, funkcjach i nowościach dotyczących WordPress. Mogę wycofać swoją zgodę w dowolnym momencie. Należy zapoznać się z naszą Polityką prywatności.
To pole służy do weryfikacji i nie powinno być zmieniane.

Kolory podstawowe, drugorzędne i trzeciorzędne

Nasze ekrany są zazwyczaj oparte na systemie RGB (Red, Green, Blue) - znanym również jako Additive Color System. Zasadą jest, że wszystko, co odbija światło, jest oparte na systemie kolorów addytywnych. W tej strukturze, używamy kolorów podstawowych jako punktu wyjścia. Biały powstaje przez połączenie wszystkich kolorów, podczas gdy czarny reprezentuje brak kolorów.

Wyjaśnione na przykładzie prostego koła kolorów: Kolory podstawowe to żółty, czerwony i niebieski. Kolory drugorzędne są tworzone, gdy mieszasz kolory podstawowe razem. Kolory trzeciorzędowe powstają z mieszanek, które zawierają kolory podstawowe i drugorzędowe.

Teoria kolorów w projektowaniu stron internetowych
Koło barw opisuje i dzieli kolory.

Barwy, odcienie i chroma

Barwy, lub odcień, opisuje sześć niezmieszanych kolorów podstawowych i drugorzędnych:

  • Tinta opisuje zabarwienie, które występuje po dodaniu bieli do koloru.
  • Odcienie działają na tej samej zasadzie, co odcienie — ale tutaj dodajemy czerń.
  • Chroma, zwana również nasyceniem lub tonem, jest tym, co nazywamy mieszaniem odcieni z szarościami lub neutralnymi kolorami, takimi jak biały i czarny. Jeśli podążymy za tą definicją, to odcienie i barwy również należą do Chromy.

Temperatura i kontrast

Teoria kolorów w projektowaniu stron internetowych
Temperatura i kontrast kolorów

Można również sklasyfikować kolory w temperaturach. Obowiązuje tu kilka zasad:

Ciepłe kolory wyglądają bardziej dominująco, gdy zestawisz je z chłodnymi.

W ten sposób możesz również przekazać wrażenie głębi. Dlatego zimne kolory wydają się bardziej odległe niż ciepłe. Kolory intensywnie ciepłe mogą również sprawić, że kolory zimne będą wydawać się jeszcze zimniejsze.

Szary, a także odcienie szarości, biel i czerń należą do grupy kolorów neutralnych. Beż i brąz są również często przypisywane do kolorów neutralnych. Przy czym ja osobiście zgadzam się tylko częściowo, bo odcień szarości zdecydowanie może wydawać się ciepły lub zimny. Ja również zaliczam beże i brązy do ciepłych odcieni. Neutralne kolory są zdefiniowane dla mnie jako biały i czarny i wszystkie odcienie szarości pomiędzy, do których nie dodano żadnego innego koloru.

Neutralne kolory same w sobie wyglądają nieciekawie, dlatego potrzebują przynajmniej jednego koloru, który będzie się wyróżniał. 

Wyjątki potwierdzają regułę, ponieważ istnieją minimalistyczne czarno-białe układy, które radzą sobie bez żadnych innych kolorów. Brąz i beż mogą być również bardzo atrakcyjne jako kolor dominujący, np. w projekcie monochromatycznym.

Kolory podstawowe kontrastują ze sobą.

Jest jeszcze jeden sposób tworzenia kontrastu. Patrząc na kolory, które znajdują się w odległości trzech kwadratów od siebie na kole kolorów. Takie połączenia mogą łatwo doprowadzić do dysharmonii. Jednak jeśli zostaną użyte prawidłowo, na przykład jako wezwanie do działania, mogą dodać interesujący kontrast do twojego projektu.

8 zasad harmonijnej palety kolorów

Kolory uzupełniające

Kolory komplementarne to dwa kolory, które są bezpośrednio naprzeciwko siebie są połączone w tej koncepcji, jak w przykładzie Youtube Culture & Trends Report.

Teoria kolorów w projektowaniu stron internetowych
Kolory uzupełniające w kole barw

Dwa uzupełniające się kolory wyróżniają się od siebie maksymalnie. W ten sposób powstaje kontrastujący, ale harmonijny schemat kolorów. Te wzory nadają się do dynamicznych, przyciągających uwagę projektów. Dlatego należy upewnić się, że odzwierciedla ona również produkt, który chcemy przekazać.

Kombinacja trójkątów

Kombinacja trójkąta opisuje trzy kolory, które są równomiernie oddalone od siebie na kole kolorów.

Podobnie jak poprzednie kombinacje, ta również jest dość prosta i łatwa w użyciu. Oferuje więcej różnorodności, ale jesteś po bezpiecznej stronie z nim. Z podstawowej zasady nie ma prawie żadnej harmonijnej kompozycji. Te palety kolorów szczególnie dobrze sprawdzają się w przypadku stron, które powinny trafiać w gusta szerokiego grona użytkowników.

Nadal należy wybrać kolor, który dominuje w projekcie. Zapewnia to przejrzysty projekt i większą harmonię. Pokazuje to również przykład Slaveryfootprint.org.

Teoria kolorów w projektowaniu stron internetowych
Kombinacja trójkątów na przykładzie strony internetowej
Teoria kolorów w projektowaniu stron internetowych
Połączenie trójkątów w kole kolorów

Rozdziel kolory uzupełniające

Podzielone kolory komplementarne opisują podobną koncepcję do kolorów komplementarnych. Tutaj rozdziela się tylko jedna strona. Zamiast komplementarnego koloru podstawowego, używasz teraz otaczających go kolorów trzeciorzędowych. Ta paleta oferuje więcej możliwości kombinacji.

Dodanie trzeciego koloru do komplementarnego schematu dodaje nieco więcej równowagi do układu. Ta kombinacja jest dość często stosowana w sieci. Przy czym kolorystyka nie musi być tak krzykliwa jak w tym przykładzie

Trzeci kolor jest często używany przez projektantów jako kolor akcentowy i używany bardzo oszczędnie. Dzięki tej zasadzie możesz nadać swoim stronom internetowym delikatny kontrast.

Teoria kolorów w projektowaniu stron internetowych
Rozdzielenie kolorów uzupełniających w kole barw
Teoria kolorów w projektowaniu stron internetowych
Rozdzielenie kolorów uzupełniających na stronie internetowej

Kwadratowa kombinacja kolorów

Podobnie jak w przypadku koncepcji trójstronnej, kwadratowa kombinacja kolorów łączy w sobie cztery kolory. Ze wszystkich przedstawionych do tej pory kombinacji ta jest najtrudniejsza do opanowania. 

Tutaj również łączymy dwie pary kolorów uzupełniających się. W tym przypadku wymagana jest jednak wrażliwość w rozmieszczeniu hierarchii. Na tej stronie, czerwony odcień jest używany oszczędnie, aby nie zdominował pozostałych kolorów. Zamiast tego, jako dominujące kolory zastosowano zimny błękit i neutralny beż.

Kiedy używasz tej zasady, pamiętaj, aby używać ciepłych i chłodnych kolorów w harmonii z sobą.

Teoria kolorów w projektowaniu stron internetowych
Kwadratowa kombinacja kolorów w kole kolorów
Teoria kolorów w projektowaniu stron internetowych
Kwadratowa kombinacja kolorów na stronie internetowej

Kwadrat podzielony kolorami uzupełniającymi

Składa się z dwóch sąsiadujących kolorów i ich kolorów uzupełniających.

Z tych kolorów, można stworzyć paletę kolorów, która daje atrakcyjny kontrast kolorów uzupełniających, a jednocześnie jest bardziej zróżnicowana, jak w tym przykładzie.

Analog

Analogowe palety kolorów to dwa lub więcej kolorów, które leżą obok siebie na kole kolorów. Analogowe palety barw wydają się mniej kontrastowe niż wcześniej opisane kompozycje, ale i tak nie tracą na efektowności. 

Dla Twojej strony internetowej, dobrym pomysłem jest opracowanie hierarchii i użycie kolorów zgodnie z nią. W poniższym przykładzie, Crips Studios wybrało kolor fioletowy jako swój najbardziej dominujący. Kolor ten jest również tym, który nadaje nastrój Twojej stronie.

Teoria kolorów w projektowaniu stron internetowych
Analogowe palety barw w kole barw
Teoria kolorów w projektowaniu stron internetowych
Analogowe palety kolorów na stronie internetowej

Monochromatyczny

Monochromatyczny opisuje różne odcienie i/lub chromy tego samego koloru. Jest to najprostszy sposób na osiągnięcie harmonijnego schematu kolorów. Dobrze użyta może sprawić, że Twoja strona będzie się wyróżniać na tle innych stron.

Zastosowanie monochromatycznych kolorów dodatkowo wzmacnia emocjonalny wpływ koloru źródłowego, a także tworzy elegancję. Minimalne projekty korzystają z monochromatycznej palety kolorów. Należy również wiedzieć, że strony monochromatyczne są niskokontrastowe.

Teoria kolorów w projektowaniu stron internetowych
Monochromatyczne kolory na stronie internetowej

Chroma i odcień

Użycie kolorów o podobnych wartościach chroma lub tinta. W przykładzie Bliss harmonia została stworzona poprzez ciągłe stosowanie pastelowych odcieni.

Teoria kolorów w projektowaniu stron internetowych
Chroma i tinta są ważne w projektowaniu stron internetowych.

Teoria koloru - inspiracja i narzędzia

Jest to już klasyk i nadal jedno z moich ulubionych narzędzi do tworzenia palet kolorów: Adobe Color Wheel.

Jako nowość, możesz również sprawdzić, czy Twój wybór będzie nadal wyświetlany z odpowiednim kontrastem dla użytkowników, którzy cierpią na ślepotę barw.

  • Eggradients dostarcza szeregu inspiracji dlagradientów i stylów CSS, które z nimi współpracują.
  • Khroma to oparta na sztucznej inteligencji aplikacja przeglądarkowa, która uczy się, jakie kolory szczególnie lubisz i tworzy odpowiednie kombinacje. Zdecydowanie polecam jako szybką inspirację dla kolorów i zestawień.
  • Coolors to platforma, na której możesz czerpać inspirację i tworzyć własne palety kolorów. Oferuje również rozszerzenia dla Chrome i Adobe.

Colourco działa w podobny sposób jak Adobe Color Wheel. Możesz ustalić zasadę, według której ma być tworzona Twoja paleta kolorów. Wystarczy najechać kursorem, aby testować i tworzyć kombinacje kolorów. Możesz pobrać swój wybór jako arkusz stylów Sass lub .png.

Teoria kolorów w projektowaniu stron internetowych

Emotive Feels oferuje również atrakcyjnie zaprojektowaną stronę internetową do odkrywania szerokiej gamy kolorów i ich efektów.

Twoje pytania dotyczące teorii kolorów w projektowaniu stron internetowych

Jakie są Twoje doświadczenia z kolorami w projektowaniu stron internetowych? Jakie masz pytania do Sonji? Daj nam znać w komentarzach! Chcesz być informowany o nowych postach w Raidboxes? Obserwuj nas na TwitterzeFacebooku lub poprzez nasz Newsletter.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola wymagane oznaczone są *.