Teoria kolorów w projektowaniu stron internetowych: Jak znaleźć właściwą paletę barw dla Twojej strony?

7 Min.
Wprowadzenie do teorii kolorów dla projektantów stron internetowych

Prawdopodobnie każdy z nas mgliście pamięta teorię kolorów z zajęć plastycznych: znaczenie kolorów podstawowych, drugorzędnych i trzeciorzędnych. Jako projektant stron internetowych, pracujesz z teorią kolorów każdego dnia - czy to podświadomie, czy świadomie. W tym poście pokażę Ci, jak używać właściwych zasad i narzędzi do tworzenia dobrych kombinacji kolorów dla Twojego następnego projektu internetowego.

Teoria kolorów: Dlaczego odświeżenie wiedzy jest czasem konieczne

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 odbywa się na zasadzie przeczucia. Nieustannie widzimy i analizujemy kolory wokół nas. Efektem tego jest 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 Twoich klientów i stron internetowych, nieodzowna jest solidna wiedza z zakresu 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 również ograniczeniom technicznym, które mamy w przypadku mediów drukowanych. To daje Ci jako projektantowi: in erstmal wspaniałą swobodę pełnego rozwoju.

Koło barw, temperatura i chromatyczność

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.

Barwy podstawowe, drugorzędne i trzeciorzędne

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, tinty, 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 coOdcienie, ale tutaj dodajemy do nich 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żna również przekazać wrażenie głębi. Dlatego zimne kolory wydają się bardziej odległe niż ciepłe. Kolory o intensywnym ciepłym odcieniu mogą również sprawić, że zimne kolory wydadzą 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 wyglądają raczej nieciekawie same w sobie, dlatego potrzebują przynajmniej jednego koloru, aby się wyróżnić. Wyjątki potwierdzają regułę, ponieważ istnieją minimalistyczne czarno-białe layouty, 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 monochromatycznym projekcie.

Kolory podstawowe kontrastują ze sobą. Jest jeszcze jeden sposób na stworzenie kontrastu. Patrząc na kolory, które są około 3 kwadraty od siebie na kole kolorów. Takie połączenia mogą łatwo doprowadzić do dysharmonii. To dlatego, że gryzą się nawzajem. Jednak odpowiednio użyte, np. jako wezwanie do działania, mogą nadać projektowi ciekawy kontrast.

Osiem zasad tworzenia 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
Rozdziel kolory uzupełniające 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 kolorystyczna łą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.

Inspiracja i narzędzia online

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 do przeglądania, która uczy się, które kolory mówią do Ciebie coś szczególnego i tworzy odpowiednie kombinacje. Zdecydowanie polecam jako szybką inspirację dla kolorów i zestawień.
  • Coolors to platforma, na której możesz czerpać inspiracje i tworzyć własne palety kolorów. Oferuje również rozszerzenia dla Chrome i Adobe.

Colourco działa podobnie do Adobe Color Wheel. Możesz określić zasadę, według której ma być tworzona Twoja paleta kolorów. Przez proste najechanie możesz 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

Dodatkowo, atrakcyjnie zaprojektowana strona do poznawania różnych kolorów i ich efektów, oferuje Ci https://emotivefeels.com/.

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 na RAIDBOXES ? Następnie śledź nas na Twitterze, Facebooku lub poprzez nasz newsletter.

Po ukończeniu studiów z zakresu projektowania gier i twórczego pisania w malowniczym Auckland (w Nowej Zelandii) Sonja Hoffman zadecydowała o tym, by dalej rozwijać się jako webdesigner oraz specjalista ds. tworzenia aplikacji i ich rozwoju. Zajmuje się grywalizacją (to wykorzystanie elementów gier i technik projektowania gier w kontekście niezwiązanym z grami) i badaniami nad motywacją i doświadczeniami użytkownika. Łączy swoją profesję z własnym zainteresowaniem nowościami technologicznymi.

Komentarze do tego artykułu

Napisz komentarz

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