Opis schematów kolorów i kolorów internetowych
Istnieją cztery podstawowe schematy kolorów, które można wykorzystać w witrynie sieci Web. Na każdej stronie tego artykułu przedstawiono obraz schematu kolorów oraz sposób generowania podobnego schematu w programie Photoshop.
- monochromatycznyUżywanie kolorów o tym samym odcieniu. Mogą mieć różne odcienie lub odcienie w zależności od tego, jak dużo białego lub czarnego jest dodawane.
- analogicznyWykorzystuje kolory znajdujące się blisko siebie na kole kolorów.
- uzupełniającyCzęsto jest to postrzegane jako "przeciwne", ponieważ dwa kolory w komplementarnym schemacie kolorów znajdują się naprzeciwko siebie na kole kolorów.
- triadycznaTe kolory są równomiernie rozmieszczone na kole kolorów.
Wszystkie schematy kolorów będą używać tego koloru żółtego jako koloru bazowego.
02 z 10Monochromatyczny system kolorów internetowych
Ten schemat kolorów wykorzystuje żółtawy kolor mojej bazy i dodaje trochę bieli i czerni do odcienia i odpowiednio przyciemnia schemat.
- górny lewy - kolor podstawowy # ffe500
- górny prawy - dodano wypełnienie 50% bieli, aby uzyskać # fff280
- dolny lewy - dodano wypełnienie 75% bieli, aby uzyskać # fff8bf
- prawy dolny - dodano wypełnienie 50% czerni, aby uzyskać # 7f7200
Monochromatyczne schematy kolorów są często najłatwiejsze w oczach wszystkich schematów kolorów. Delikatne zmiany odcienia i odcienia sprawiają, że kolory lepiej się ze sobą przepływają. Użyj tego schematu kolorów, aby Twoja witryna wyglądała na bardziej płynną i zebraną.
03 z 10Bardziej monochromatyczny system kolorów internetowych
Dodano kwadrat 20% czerni, aby uzyskać więcej kolorów w schemacie. Dodanie koloru czarnego lub białego do twoich kolorów może stworzyć nowy kolor do twojej palety bez zniekształcania odcienia strony.
04 z 10Analogiczny schemat kolorów internetowych
Ten schemat kolorów przyjmuje żółty kolor bazowy i dodaje i odejmuje 30 stopni od odcienia w palecie kolorów programu Photoshop.
- górny lewy - kolor podstawowy # ffe500
- górny prawy - +30 stopni, aby uzyskać # 99ff00
- dolny lewy - -30 stopni, aby uzyskać # ff6600
- w prawym dolnym rogu - 100% bieli #ffffff
Analogiczne kolory mogą działać bardzo dobrze razem, ale czasami mogą się mocno zderzyć. Sprawdź te schematy z większą liczbą osób niż Ty, Twoja rodzina i przyjaciele. Kiedy pracują, tworzą stronę, która jest bardziej kolorowa niż schemat monochromatyczny, ale prawie tak płynna.
05 z 10Bardziej analogiczny schemat kolorów internetowych
Dodano kwadrat 20% czerni, aby uzyskać więcej kolorów w schemacie.
06 z 10Uzupełniający system kolorów internetowych
Uzupełniające schematy kolorów, w przeciwieństwie do innych schematów kolorów, zazwyczaj mają tylko dwa kolory. Podstawowy kolor i jego przeciwieństwo na kole kolorów. Photoshop ułatwia uzyskanie komplementarnego koloru - wystarczy wybrać obszar koloru, który chcesz uzupełnić i nacisnąć Ctrl-I. Photoshop odwróci to za Ciebie. Pamiętaj, aby zrobić to na duplikowanej warstwie, aby nie stracić koloru bazowego.
- w lewo - kolor podstawowy # ffe500
- w prawo - dopełnienie # 001aff
Uzupełniające schematy kolorów są często o wiele bardziej uderzające niż w innych schematach kolorów, więc używaj ich z ostrożnością. Najczęściej używane są na elementach, które muszą się wyróżniać.
07 z 10Bardziej uzupełniający schemat kolorów internetowych
Aby uzyskać tę wersję, dodałem 50% bieli do dolnej połowy kolorów i 30% czerni do środkowego kwadratu. Jak widać, daje ci jeszcze kilka opcji, ale wciąż jest to komplementarny schemat kolorów.
08 z 10Triadic Web Color Scheme
Triadyczne schematy kolorów składają się z 3 kolorów mniej lub bardziej równomiernie rozmieszczonych wokół koła kolorów. Ponieważ koło kolorów ma 360 stopni, ponownie użyłem pola barw w selektorze kolorów, aby dodać i odjąć 120 stopni od koloru podstawowego.
- górny lewy - kolor podstawowy # ffe500
- górny prawy - +120 stopni, aby uzyskać # e500ff
- dolny lewy - -120 stopni, aby uzyskać # 00ffe6
- w prawym dolnym rogu - 100% bieli #ffffff
Triadyczne schematy kolorów często generują bardzo żywe strony internetowe. Ale podobnie jak uzupełniające się schematy kolorów, mogą one inaczej wpływać na ludzi. Pamiętaj, aby przetestować.
Można również tworzyć tetradyki lub 4-kolorowe schematy kolorów, w których kolory są równomiernie rozmieszczone wokół koła kolorów.
09 10Więcej Triadic Web Color Scheme
Podobnie jak w przypadku innych przykładów, dodałem do kolorów 30% czarnego kwadratu, aby uzyskać dodatkowe odcienie.
10 z 10Dyskordowe schematy kolorów internetowych
Piękno jest w oku patrzącego, ale to niefortunny fakt, że nie wszystkie kolory idą w parze. Niejednolite kolory to kolory znajdujące się dalej niż koło 30 stopni na kole barw i nie są one komplementarne ani częścią triady.
Niezgodne schematy kolorów mogą być bardzo szokujące i powinny być wykorzystywane wyłącznie do generowania uwagi. Pamiętaj, że ponieważ kolory te często się kolidują, zwracana uwaga może nie być dokładnie tym, czego szukasz.
