Jeśli pamiętacie tak daleko wstecz jak w styczniu, jednym z moich celów na 2013 rok było dowiedzieć się więcej o kolorze i podzielić się z wami tym, czego się nauczę. Mówiłem już wcześniej o tym, jak czuję, że moje umiejętności pracy z kolorem są niewystarczające i powiedziałem, że w pewnym momencie tego roku wezmę kilka książek o kolorze z nadzieją, że to się zmieni.
Jedne urodziny, nieco hojny brat i wysokiej jakości usługa z Amazon później, a asortyment książek (w tym kilka konkretnie o kolorze) są tutaj i czekają na przeczytanie. Dzięki David.
Skończyłem czytać jedną z książek o kolorze, Design Elements: Color Fundamentals, i pomyślałem, że powinienem zacząć się dzielić. Chcę zacząć od tego, jak opisujemy kolory po części dlatego, że to początek, a po części dlatego, że doprowadziło to do pewnej jasności w tym, jak rozumiem kolor.
Jak opisujemy kolor
Istnieją 3 podstawowe sposoby opisywania koloru, a ponieważ książka to dodała, dodam też 4 sposób opisywania koloru.
- Barwa – inne słowo na kolor
- Nasycenie (chroma) – intensywność lub czystość barwy
- Jasność (wartość) – względny stopień czerni lub bieli zmieszany z daną barwą
- Temperatura – postrzegane ciepło lub chłód koloru
Pogłębmy trochę każdy z nich.
Odcienie to kolory, a to, jaki odcień widzimy, zależy od długości fali światła odbitego lub wytwarzanego. Wątpię, że muszę ci powiedzieć, co to jest kolor, a ponieważ kolor i odcień są synonimami, powinieneś wiedzieć, co to jest odcień, jak również. Jedną rzeczą, o której będę Ci przypominał jest to, że każdy z nas postrzega kolor inaczej. Odcień, który widzisz, może nie być tym samym odcieniem, który ja widzę.
Nasycenie odnosi się do tego, jak czysty lub intensywny jest dany odcień. 100% nasycenia oznacza, że nie ma żadnego dodatku szarości do odcienia. Kolor jest całkowicie czysty. Na drugim biegunie barwa o nasyceniu 0% pojawia się jako średnia szarość. Im bardziej nasycony (bliższy 100%) jest kolor, tym żywszy lub jaśniejszy się wydaje. Nienasycone kolory, z drugiej strony, pojawiają się matowe.
Jak nasycony odcień wydaje się również zależy w pewnym stopniu od tego, jakie kolory to obok. Odcień nasycony w 50% umieszczony obok odcienia nasyconego w 25% będzie wydawał się bardziej żywy niż ten sam odcień umieszczony obok odcienia nasyconego w 75%.
Jasność mierzy względny stopień czerni lub bieli, który został zmieszany z danym odcieniem. Dodanie bieli sprawia, że kolor staje się jaśniejszy (tworzy odcienie), a dodanie czerni sprawia, że staje się ciemniejszy (tworzy odcienie). Efekt jasności lub wartości jest względny w stosunku do innych wartości w kompozycji. Możesz sprawić, że kolor wydaje się lżejszy, umieszczając go obok ciemniejszego koloru.
Im większa różnica w wartości między elementami, tym większy kontrast między nimi. Z tego powodu, jasność jest dobrym sposobem na pokazanie kontrastu i wskazanie hierarchii między elementami. Około 7 stopni jasności jest maksymalną różnicą, jaką może dostrzec ludzkie oko. Poza tym staje się trudne do odróżnienia różnic.
Temperatura jest postrzegane ciepło lub chłód koloru. Ciepłe kolory to czerwony, pomarańczowy i żółty, podczas gdy chłodne kolory to zielony, niebieski i fioletowy. Gdzieś w widmie zielonym i fioletowym temperatura zmienia się między ciepłym i cool.
Jak oko rozpoznaje temperaturę koloru może się zmienić w oparciu o źródło światła. Na przykład rzeczywista temperatura monitora komputerowego może wpływać na postrzeganą temperaturę barw.
Cieplejsze kolory mają tendencję do awansu na pierwszy plan kompozycji, podczas gdy chłodniejsze kolory ustępują w tło. Również jak nasycenie i jasność, temperatura może być względna. Umieść ciepły kolor przed cieplejszym jednym i początkowy kolor pojawi się chłodniej niż gdyby został umieszczony przed cool color.
Harmonia kolorów
W pracy z kolorem naszym celem jest wybór palety przyjemnych kombinacji kolorów (z wyjątkiem tych czasów, gdy nieprzyjemne połączenie uzupełnia wiadomość lepiej). Staramy się osiągnąć pewnego rodzaju harmonię kolorów.
Harmonia kolorów może być subiektywna. To, co działa dla Twojego oka, może nie działać dla mojego. Zasady teorii koloru mają na celu zmniejszenie subiektywności poprzez oferowanie wytycznych, które pomagają nam znaleźć pary i grupy kolorów bardziej prawdopodobne, aby pracować dobrze.
Na przykład jedna z głównych zasad utrzymuje, że oko zawsze szuka równowagi i równowagi w kolorze, które prowadzą go do przybycia na neutralnych kombinacji, jak wtedy, gdy odcień jest połączony z jego przeciwieństwem lub uzupełnienie. Jest to jeden z powodów, dla których często widzimy powidoki innego koloru (ale o tym samym nasyceniu i jasności), gdy wpatrujemy się w jeden kolor zbyt długo.
Teoria kolorów nie zawsze prowadzi do przewidywalnych rezultatów. Czasami teoria i praktyka nie do końca się zazębiają, co oznacza, że musimy rozwijać nasze oczy dla koloru i eksperymentować z różnymi kombinacjami odcieni, nasycenia i jasności.
Rozdźwięk w teorii koloru i praktyce kolorystycznej
Jak wspomniałam powyżej, coś mi się rzuciło w oczy podczas czytania Podstaw Koloru. Opisujemy kolor w kategoriach odcienia, nasycenia i jasności (HSL), ale zazwyczaj ustawiamy wartości kolorów na stronach internetowych używając wartości heksadecymalnych i w mniejszym stopniu wartości RGB. Czy nie byłoby sensowniej pracować z systemem, który lepiej opisuje kolor?
Uwaga: HSL to nie to samo co HSB (barwa, nasycenie, jasność) lub HSV (barwa, nasycenie, wartość), które można znaleźć w większości narzędzi kolorystycznych.
Hex i RGB to tak naprawdę dwie wersje tej samej rzeczy. Każdy z nich zapewnia 256 możliwych wartości dla tego, jak dużo czerwonego, zielonego lub niebieskiego jest w danym kolorze. HSL działa inaczej. Nie ma prostego sposobu, aby spojrzeć na coś takiego jak rgb(63, 69, 146) lub jego heksadecymalny odpowiednik #3f4592 i łatwo wiedzieć, że jest w 40% nasycony lub hsl(236, 40, 41).
Jeśli chciałbyś zobaczyć matematykę związaną z dokonywaniem konwersji spójrz na którykolwiek lub wszystkie poniższe linki
- Algorytmy kolorów
- RGB do HSL konwersja kolorów
- HSL do RGB konwersja kolorów
Dlaczego tak jest? Dlaczego istnieje rozbieżność w tym, jak próbujemy zrozumieć kolor i jak próbujemy go używać? Jeśli cokolwiek HSL jest bardziej intuicyjnym systemem, ponieważ faktycznie opisuje kolory, które widzimy i pasuje do teorii koloru.
Uświadamiam sobie, że umiejętności kolorystyczne pochodzą z rozwijania krytycznego oka na kolory i zadawania pytań o to, dlaczego coś działa lub nie działa. I to jest o odpowiadaniu na te pytania, jak obserwować kolory wokół ciebie.
Po prostu wydaje się, jakby to było łatwiejsze, jeśli zarówno teoria i praktyka mówił tym samym językiem. Teraz, gdy doszedłem do tego uświadomienia, postanowiłem zobowiązać się do używania wartości HSL tak bardzo, jak to możliwe w moim kodzie. Przeszkodą jest IE8 i niższe, które nie akceptują hsl() lub rgb(). Potrzebują one wartości szesnastkowych. Jest to jednak w porządku, ponieważ SASS może dokonać konwersji. Możesz użyć hsl() w SASS i mieć wyjście html jako wartość szesnastkową.
Aby iść w parze z moim zaangażowaniem, zacząłem budować proste narzędzie kolorów, aby pomóc mi się uczyć i studiować. To nie jest coś, co chcesz użyć w jego obecnym stanie, aby wybrać paletę kolorów, ale pozwala grać wokół z odcieniem, nasyceniem i wartości jasności, aby zobaczyć, jak każdy wpływa na jeden konkretny kolor i kolory wokół niego. Podzielę się tym narzędziem w dalszej części tygodnia.
Przez jakiś czas podejrzewałem, że matematyczne relacje pomiędzy kolorami mogą zaoferować przewodnik do pracy z nimi i często szukałem tych relacji w wartościach heksadecymalnych kolorów. Mam nadzieję, że używanie hsl() więcej i zabawa z moim prostym narzędziem koloru pomoże mi połączyć teorię z kolorami, których używam w projektowaniu trochę lepiej niż są one połączone dla mnie teraz.
Zachowaj to rozłączenie w tym jak uczymy się o i opisujemy kolor i jak go używamy w umyśle. Realizacja dała mi większe zrozumienie, jak lepiej badać kolor i dlatego chciałem zacząć tę rozmowę od podstaw tego, jak opisujemy kolor. Będę miał więcej postów o kolorze wkrótce, począwszy od końca tygodnia, kiedy mówię o prostym narzędziu, które stworzyłem, aby mi pomóc.
Ściągnij darmową próbkę z mojej książki, Design Fundamentals.