Przeglądając statystyki odwiedzin bloga, w tym w szczególności zapytania do Google, które prowadzą potem na stronę, zauważyłem, że często pojawia się hasło schematów kolorystycznych do wykorzystania na stronach WWW.
O kolorach już było kilkakrotnie (o widzeniu kolorów i projektowaniu uwzględniającym accessibility, wykorzystaniu w ramach tworzenia e-brandu, o znaczeniu psychofizjologicznym) – stąd zapewne przekierowania z Google – ale o schematach nie. Stąd – wychodząc na przeciw potrzebom 🙂 – dzisiaj właśnie schematy kolorystyczne. Skąd u mnie tak duży nacisk na kwestie kolorystyczne w ramach projektowania interfejsów? Powodów jest kilka. Choćby takie dwa:
- około 96 % informacji nt. świata zyskujemy w ramach percepcji wzrokowej (to m.in. dlatego tak istotne są dzisiaj badania z wykorzystaniem techniki eyetracking). Ludzkie oko jest wyposażone w aparaturę umożliwiającą widzenie barw oraz widzenie jasności – resztę roboty wykonuje juz mózg. To wyspecjalizowanie – nadwrażliwość na kolory – powoduje, że podczas oceny tego, co widzimy, olbrzymią rolę odgrywa to, czy dana rzecz spełnia nasze oczekiwania kolorystyczne. Zatem: lepiej mieć nad tym panowanie, niż zdawać się na przypadek.
- McLuhan w ramach teorii mediów twierdził, że sposób prezentowania treści zawiera już w sobie treść. Nic dodać, nic ująć, w przypadku sposobu prezentacji treści wykorzystującego kolory.
Przy pomocy kilku zasad tworzenia zestawów kolorystycznych, otrzymujemy schematy kolorów harmonijnych: zarówno monochromatyczne, pastelowe, jak i kontrastowe.
W ramach tworzenia zestawów harmonijnych korzysta się m.in. z zasad:
- zasada komplementarności: weź dowolne dwa kolory leżące naprzeciw siebie w kole barw,
- zasada triady: weź dowolne trzy kolory leżące na kole barw od siebie w jednakowych odległościach, tworząc tym samym trójkąt,
- weź cztery dowolne kolory leżące na kole barw, które leżą od siebie tak, że tworzą wierzchołki prostokąta,
- i innych.
Korzystając ze strony Adobe Kuler można przekonać się na własne oczy jak to działa.
Zestawy kolorów monochromatycznych uzyskać bardzo łatwo – np. weź dowolny kolor i, z jednej strony, dodawaj do niego +20%, +40%, + 60%, +80% białego oraz, z drugiej strony, +20%, +40%, + 60%, +80% koloru czarnego. Jednak w przypadku kolorów monochromatycznych pamiętajmy o odpowiednim kontraście, który będzie ważny ze względu na czytelność tekstu i tła, na którym tekst się znajduje.
Zestawy barw pastelowych uzyskujemy z odległych od siebie barw ale posiadających podobne cechy, na przykład niski stopień nasycenia.
Jeśli chodzi o schematy kontrastowe, to wystarczy połączyć ze sobą barwy dopełniające się.
***
33 schematy kolorystyczne [do wykorzystania na strony WWW]*
#6B2E50 | #B24D89 | #D293B7 | #E1B7CF | #F0DBE7 | #D8E1B7
#FB6BB3 | #FF99CC | #FFB3D9 | #FFCDE6 | #FFE7F3
#663355 | #663366 | #CC66CC | #887788 | #BBAABB | #EEBBEE | #EEBBDD | #EEDDEE
#340034 | #750074 | #DD71BD | #F7D4E6 | #F7E4EE | #FEFFFF
#DCC8C7 | #BF9FAA | #B295CD | #773A5B | #C39B9C | #87707A
#DEBAD2 | #B875A5 | #703860 | #98867B | #FFBB47
#666666 | #330033 | #663366 | #996699 | #FFCC66
#929690 | #B4CD99 | #648040 | #90AE60 | #E1E2A3 | #E8E8E4 | #E19857
#948068 | #C0BB93 | #90A07B | #7E8C8D | #666962
#5C2810 | #CAB36F | #AFB06C | #DED791 | #C2A182
#888C71 | #44381E | #C3D5C7 | #565038 | #DCDDB1
#98B564 | #C7DDA0 | #C6CDB9 | #DDDDDD
#335533 | #668844 | #99BB66 | #DDEEBB | #888877
#497019 | #99C089 | #B3B590 | #E6F5BC | #D8E6AB | #A3AC59 | #FAE56E
#3C5787 | #477265 | #528C44 | #5CA622 | #67C100
#567500 | #759933 | #8DC42B | #B1CA25 | #CEF415 | #E6F33F
#89974A | #C3D73A | #BBC971 | #E1E9AD | #EBF2BE | #EBE06D | #C54836
#6FA9E1 | #679BE4 | #9CD821 | #EA7F2D
#C1DA84 | #8BB5B7 | #AAC9CB | #CADDDE | #7A7A7A | #C8C8C8 | #B6B6B6
#595B66 | #404251 | #D1D7FA | #555A74 | #2C2D38
#D2D0E8 | #F0EFF4 | #A9AFD1 | #525C91
#000000 | #313C42 | #6B797B | #EFC310 | #FFFFFF
#DEDACA | #C0B99A | #8D8870 | #5E5945 | #7799AA | #5B8092 | #335566 | #223344
#6A7276 | #B4BEC2 | #828A8C | #EAB646 | #FAD68A | #EEECE8
#F3E690 | #B2BDFF | #928F90 | #BBA095 | #FEFAE9
#D5BF90 | #8F968F | #FFCD50 | #8597A5 | #FEFED9 | #76763A
#C7A485 | #E2D2BD | #FFEFE3 | #FFCAB9
#4D435B | #683653 | #EED4E1 | #7A848D | #E2E7ED | #AFC3CE
#313531 | #CED8C6 | #59777D | #4A3139 | #B6AC8E | #848370 | #E7BFCB
#798488 | #92987C | #A59680 | #A58080 | #827988
#83815A | #CDC282 | #D1C5AF | #DEC0BE | #D87A94 | #57393B
#F7DFC7 | #E3AEA8 | #5C433F | #F9D0A2 | #DA826C | #F6AC6D
#CA091E | #F91A1D | #D80B29 | #FF5812 | #FFA723
* Schematy wybrane z bogatej galerii znajdującej się na stronie ColorSchemer.
