Koło kolorów

Koło kolorów wynalazł w 1666 r. sir Isaac Newton, który w ten sposób położył podwaliny pod nowoczesną teorię koloru. Zainteresowanie tą tematyką popchnęło go do eksperymentów z przepuszczaniem białego światła przez pryzmat, w którym światło białe rozdzielało się na całe spektrum kolorów. Zjawisko to zainspirowało Newtona do uporządkowania kolorów w formie okręgu, który stał się pierwszym kołem kolorów. Ten pomysłowy diagram pokazywał wzajemne związki kolorów i stanowił usystematyzowany sposób przedstawienia ich interakcji i łączenia. Koło kolorów sir Isaaca Newtona pozostaje jednym z fundamentalnych narzędzi w obszarach nauki i sztuki.

Zazwyczaj standardowe koło kolorów zawiera 12 barw: trzy podstawowe (czerwony, żółty i niebieski), trzy pochodne/drugorzędowe (pomarańczowy, zielony i fioletowy) oraz sześć trzeciorzędowych (czerwono-pomarańczowy, żółto-pomarańczowy, żółto-zielony, niebiesko-zielony, niebiesko-fioletowy i czerwono-fioletowy).

Zaawansowane koła kolorów obejmują szersze spektrum odcieni, barw i tonów, umożliwiając bardziej zniuansowane projektowanie kolorystyki, co szczególnie przydaje się w projektowaniu treści cyfrowych i interfejsu użytkownika. To szersze spektrum daje projektantom bardziej precyzyjną kontrolę nad doborem kolorów, ułatwiając tworzenie złożonych i wyrafinowanych motywów oraz palet barwnych.

Użycie koła kolorów to prosty i skuteczny sposób na stworzenie atrakcyjnej oraz spójnej palety barw do dowolnego projektu. Oto zalecane kroki:

Krok 1: Wybierz kolor bazowy.

Użyj selektora kolorów, aby wybrać na kole kolor bazowy. Będzie on podstawą Twojej palety, nadającą ton i nastrój tworzonemu projektowi oraz wpływającą na wybór kolorów uzupełniających.

Krok 2: Wybierz schemat kolorów.

Wybierz schemat kolorów. Z każdym schematem wiąże się inny efekt wizualny:

• Schemat dopełniający daje maksymalny kontrast na skutek użycia kolorów leżących bezpośrednio naprzeciw siebie.
• Schemat triadyczny cechuje się żywym, a jednocześnie zrównoważonym wyglądem dzięki użyciu kolorów układających się w trójkąt.
• Schemat analogiczny tworzy efekt harmonii wynikający z sąsiedztwa kolorów.
• Schemat dopełniający z podziałem cechuje się dużym kontrastem o zmniejszonym napięciu dzięki użyciu koloru bazowego i dwóch sąsiadujących kolorów jako jego dopełnienie.
• Schemat kwadratowy zwiększa różnorodność dzięki czterem kolorom równomiernie rozmieszczonym na kole.
• Schemat monochromatyczny wykorzystuje moc jasności (odcieni) i ciemności (cieni), tworząc subtelne przejścia i uderzające kontrasty oparte na kolorze bazowym.

Krok 3: Zastosuj schemat w swoim projekcie.

Gdy znajdziesz optymalną paletę kolorów do swojego projektu, zastosuj ją, aby osiągnąć pożądany efekt wizualny.

Teoria koloru daje projektantom pewne ramy ułatwiające stworzenie idealnej palety barw oraz wywołanie zamierzonego wrażenia, na przykład wyrafinowania dzięki głębokim odcieniom fioletu i złota lub spokoju dzięki delikatnym błękitom i zieleniom. Niezależnie od tego, czy chcesz przyciągnąć uwagę kontrastowymi zestawieniami, czy stworzyć atmosferę harmonii, musisz poznać teorię koloru. Poniżej znajduje się omówienie wybranych ważnych pojęć:

Jakie są kolory podstawowe (model RYB)

Kolory podstawowe w modelu RYB to czerwony, żółty i niebieski (ang. red, yellow, blue — stąd nazwa modelu). Te trzy barwy stanowią podstawę koła kolorów i mogą być mieszane w różnych proporcjach w celu stworzenia pozostałych kolorów.

Jakie są kolory pochodne

Kolory pochodne (drugorzędowe) zajmują na kole kolorów miejsce między kolorami podstawowymi i powstają przez zmieszanie dwóch kolorów podstawowych. Na przykład ze zmieszania czerwonego i niebieskiego powstaje fioletowy, a połączenie czerwonego i żółtego daje kolor pomarańczowy. Aby zapamiętać, jak powstaje kolor zielony, spójrz na sąsiednie kolory podstawowe: żółty i niebieski.

Jakie są kolory trzeciorzędowe

Pozostały obszar koła wypełniają kolory trzeciorzędowe, czyli pośrednie. Otrzymuje się je przez zmieszanie koloru podstawowego z pochodnym. Na przykład zmieszanie kolorów czerwonego i pomarańczowego daje czerwono-pomarańczowy, który wypełnia przestrzeń między nimi. Przewijane koło kolorów pozwala dobrać żądany odcień barwy czerwono-pomarańczowej w zależności od umiejscowienia na kole. Ponadto można mieszać kolory niebiesko-zielony, niebiesko-fioletowy, czerwono-pomarańczowy, czerwono-fioletowy, żółto-pomarańczowy i żółto-zielony, aby tworzyć unikatowe barwy trzeciorzędowe. Ta możliwość szczegółowego dobierania barw pomaga projektantom produktów znajdować dokładnie takie odcienie i kolory akcentujące, jakich potrzebują.

Jakie są schematy kolorów? Poznaj tych siedem

Schematy kolorów to strategiczne kombinacje barw sprzyjające równowadze wizualnej. Schematy te wykorzystują zasady wypływające z teorii koloru, tworząc projekty przyjemne od strony estetycznej. Istnieje siedem powszechnie stosowanych schematów kolorów:

Kolory dopełniające

Schemat dopełniający łączy barwy z przeciwnych stron koła kolorów, dając duży kontrast. Aby znaleźć barwę dopełniającą (komplementarną), wystarczy wybrać kolor, a następnie przesunąć koło kolorów o 180°. Niektóre schematy z kolorami dopełniającymi są dobrze znane i popularne, na przykład czerwono-zielony. Takie schematy kolorów mogą być skuteczne, jeśli chcesz połączyć w projekcie barwy zarówno ciepłe, jak i chłodne.

Kolory dopełniające dla #693EFE

Kolory dopełniające z podziałem

Kolory dopełniające z podziałem to takie połączenia barw, w których kolor bazowy jest połączony z dwiema sąsiednimi barwami trzeciorzędowymi położonymi po obu stronach koloru przeciwległego. W ten sposób powstaje zestawienie trzech kolorów, które pomaga stworzyć subtelniejszą paletę barw.

Kolory dopełniające z podziałem dla #693EFE

Kolory monochromatyczne

Kolory monochromatyczne prawdopodobnie są najłatwiejsze do zrozumienia, ponieważ stanowią po prostu jaśniejszą i ciemniejszą wersję barwy podstawowej. Monochromatyczny schemat kolorów eliminuje złożoność procesu decyzyjnego dotyczącego użycia kilku kontrastujących kolorów i zazwyczaj pozwala projektantom na subtelne, a przy tym skuteczne wykorzystanie barw. Aby stworzyć monochromatyczną paletę kolorów, należy wybrać jaśniejszą i ciemniejszą wersję koloru podstawowego oddalone od niego o tę samą wartość.

Kolory monochromatyczne dla #693EFE

Kolory analogiczne

Kolory analogiczne to grupy trzech barw położonych obok siebie na kole kolorów. Tworzą one łagodniejszą, bardziej naturalną paletę kolorów. W końcu w przyrodzie funkcjonuje wiele blisko powiązanych odcieni. Wystarczy pomyśleć o liściach na drzewie czy subtelnych różnicach w kolorystyce oceanu. Analogiczny schemat kolorów jest stosunkowo harmonijny i może pomóc w zintegrowaniu różnych elementów tworzących projekt.

Kolory analogiczne dla #693EFE

Schemat triadyczny

Triadyczny schemat kolorów obejmuje trzy równomiernie kontrastujące barwy. Są one równomiernie rozmieszczone na kole kolorów, tworząc trójkąt równoboczny. W przypadku projektowania z triadycznym schematem kolorów najlepiej jest wybrać jeden kolor podstawowy i użyć dwóch pozostałych jako barw akcentowych. Triadyczne schematy kolorów zazwyczaj są bardziej odważne i wesołe.

Kolory triadyczne dla #693EFE

Schemat tetradyczny (podwójnie dopełniający)

Co łączy Google i Microsoft? Obie firmy w swoim logo wykorzystują tetradyczną paletę kolorów. Przymiotnik „tetradyczny” oznacza grupę czterech elementów, a w tym przypadku chodzi o wybranie na kole kolorów czterech barw tworzących prostokąt. Barwy te obejmują dwa zestawy kolorów dopełniających, dając żywą i energiczną paletę. Tetradyczny schemat kolorów czasami nazywa się schematem „podwójnie dopełniającym”.

Kolory tetradyczne dla #693EFE

Schemat kwadratowy

Podobnie jak w przypadku schematu tetradycznego kwadratowy schemat kolorów obejmuje cztery barwy, ale w tym przykładzie są one równomiernie rozmieszczone na kole kolorów i tworzą kwadrat. W efekcie powstaje bardziej zrównoważony wygląd niż w mocno kontrastowych schematach tetradycznych. Podobnie jak w przypadku schematów tetradycznych najlepiej jest wybrać jeden kolor dominujący i użyć pozostałych jako barw akcentowych.

Kolory ciepłe kontra chłodne

Na kole kolorów można dokonać rozróżnienia między odcieniami ciepłymi i chłodnymi. Kolory ciepłe, takie jak czerwony, pomarańczowy i żółty, wyrażają intensywność. Odcienie chłodne, takie jak fioletowy, niebieski i zielony, wywołują uczucie spokoju i odprężenia. Czy zastanowiło Cię, że w aplikacji do medytacji Calm używany jest głównie kolor niebieski? Został on celowo wybrany, aby wywoływać uczucie spokoju.

Model kolorów to system ułatwiający przedstawianie barw za pomocą wartości liczbowych. Na tej stronie są używane cztery modele kolorów:

1. Czerwony, zielony i niebieski (RGB)
2. Cyjan, magenta, żółty i kluczowy (CMYK)
3. Odcień, nasycenie i jasność (HSL)
4. Kody szesnastkowe

Czerwony, zielony, niebieski (RGB)

Model oparty na kolorach czerwonym, zielonym i niebieskim (red, green, blue — RGB) jest podstawą każdego projektu wizualnego wyświetlanego na ekranie. Swoimi korzeniami model ten sięga ludzkiego sposobu postrzegania kolorów i specyfiki interakcji naszego wzroku ze światłem. Te „kolory addytywne” można mieszać w szeroką gamę barw, które codziennie widzimy na naszych ekranach.

Cyjan, magenta, żółty i kluczowy (CMYK)

Natomiast model CMYK jest fundamentem projektowania wszystkich materiałów przeznaczonych do druku. Jest złożony z „kolorów subtraktywnych”, czyli pochłaniających światło o określonej długości fal, które wierniej odpowiadają barwnikom występującym w rzeczywistym świecie.

• Cyjan (C):cyjan to kolor niebieskawo-zielony. Kiedy na daną powierzchnię naniesiemy cyjanowy tusz, będzie on pochłaniał czerwone światło i dla ludzkiego oka będzie się wydawał niebiesko-zielony.
• Magenta (M):magenta to kolor fioletowo-czerwony. Pochłania światło zielone, dając wrażenie czerwonawo-fioletowego odcienia.
• Żółty (yellow – Y): kolor żółty pochłania światło niebieskie, co na wydruku daje barwę żółtą.
• Klucz (K) lub czarny: litera „K” w modelu CMYK oznacza „klucz”, który odnosi się do składowej czarnej. Czarny tusz służy do wzmacniania głębi i kontrastu obrazów oraz tekstu. Ponadto użycie czarnego tuszu pomaga zapobiec rozmyciu kolorów, które może wystąpić, gdy próbujemy uzyskać czerń przez mieszanie innych barw.

Odcień, nasycenie i jasność (HSL)

Odcień oznacza kolory widoczne na kole kolorów. Jest to jakby spektrum zamknięte w 360-stopniowym okręgu. Poruszając się po tym okręgu, napotykamy różne odcienie.

• Odcień koloru: definicja odcienia jest złożona, ale zasadniczo termin ten odnosi się do barw widocznych na kole kolorów. Koło kolorów to okrąg o 360 stopniach, a poruszając się po nim, można napotkać różne odcienie.
• Nasycenie: jaskrawość lub intensywność odcienia, nazywana nasyceniem, odzwierciedla jego bogactwo i czystość.Na zewnątrz koła kolorów widoczne są odcienie w pełni nasycone. Gdy przemieszczamy się w kierunku środka koła, odcień staje się mniej intensywny. Aby zmniejszyć intensywność odcienia, domieszkujemy do niego czerń i biel (tj. szarość).
• Jasność: Jasność określa, ile czerni lub bieli mieszamy z danym kolorem. Możemy uzyskać pastelowe barwy, dodając więcej bieli, lub głębszą, ciemniejszą paletę, dodając więcej czerni.

Cieniowanie i odcienie dla #693EFE

Odcienie

Odcienie

Kody szesnastkowe

Kody szesnastkowe (nazywane też heksadecymalnymi) informują komputer, ile koloru czerwonego, zielonego i niebieskiego powinien zmieszać, aby uzyskać określoną barwę piksela na ekranie.

Każdy piksel na ekranie komputera składa się z trzech elementów barwnych, które emitują światło czerwone, zielone i niebieskie. Te elementy barwne (zwane subpikselami) są tak małe, że dla ludzkiego oka wyglądają jak jeden kolor.

Dzięki mieszaniu różnych ilości światła czerwonego, zielonego i niebieskiego każdy piksel może wyświetlać do 16 milionów kolorów, co przekracza możliwości rozróżniania barw przez ludzkie oko.

W każdym pikselu można mieszać 256 wartości czerwieni, 256 wartości zieleni i 256 wartości niebieskiego, co daje 16 milionów możliwych kolorów. (Pomnóż 256 x 256 x 256, a otrzymasz ponad 16 milionów). Komputer przesyła te wartości do każdego piksela w postaci kodu binarnego, czyli języka składającego się z jedynek i zer. Na przykład wartość czerwieni 200 byłaby przedstawiona w kodzie binarnym jako 11001000. Ponieważ kod binarny jest niezrozumiały dla ludzi, jako czytelną alternatywę stosuje się system szesnastkowy.

Jak działa kod szesnastkowy?

Kod szesnastkowy zawiera trzy wartości — po jednej dla koloru czerwonego, zielonego i niebieskiego, przy czym każda jest reprezentowana przez dwie cyfry. Na przykład wartość #F234A2 zawiera następujące kolory składowe:

• czerwony: F2
• zielony: 34
• niebieski: A2

O co chodzi z tymi literami? W przeciwieństwie do naszego zwykłego systemu dziesiętnego podstawą systemu szesnastkowego jest 16. Jego wartości liczy się od 0 do 9, a następnie od A do F (aby przedstawić liczby od 10 do 15).

Jakie są zasady konwersji kodów szesnastkowych na wartości RGB?

Ponieważ kody szesnastkowe i wartości HSL to po prostu różne sposoby reprezentowania modelu kolorów RGB, można dokonywać między nimi konwersji. Konwersji kodu szesnastkowego na wartość RGB raczej nie wykonuje się ręcznie, ale można ją przeprowadzić za pomocą kilku szybkich obliczeń. Dla każdej z trzech wartości:

• Weź pierwszą cyfrę (lub literę) i pomnóż ją przez 16.
• Dodaj drugą cyfrę (lub literę).

W przypadku kodu #E234A2 pierwsza wartość to E2. Reprezentuje ona liczbę 226 (14 * 16 + 2). Ta liczba to wartość RGB koloru czerwonego. A #E234A2 ma następujące wartości RGB:

• czerwony: 226
• zielony: 49
• niebieski: 152

(Można także konwertować kody szesnastkowe lub wartości RGB na wartości HSL, ale to już nieco wyższy poziom zaawansowania)!

Profile kolorów w projektowaniu cyfrowym: sRGB i P3

Różne urządzenia, monitory, przeglądarki i aplikacje korzystają z różnych technologii renderowania kolorów, co może prowadzić do rozbieżności wizualnych między urządzeniami. Tworząc projekty dla platform cyfrowych, należy koniecznie uwzględnić profile kolorów, ponieważ zapewniają one spójny standard definiowania i renderowania kolorów pod kątem konkretnego ekranu.

Profile kolorów stosowane w obszarze projektowania cyfrowego, takie jak sRGB i P3, zapewniają spójne odwzorowanie kolorów na różnych urządzeniach. Profil sRGB od dziesięcioleci jest standardem internetowym wśród twórców treści i projektantów stron. Zapewnia spójność wizualną na większości urządzeń konsumenckich. Profil Display P3, często skracany do postaci P3, umożliwia renderowanie żywszego spektrum kolorów, odwzorowując o 49% więcej rozróżnialnych barw niż profil sRGB. Jednak korzystanie z profilu P3 na urządzeniach takich jak smartfony lub laptopy zaprojektowane pod kątem profilu sRGB może prowadzić do nadmiernego zużycia energii, ponieważ urządzenie musi pracować intensywniej, aby odwzorować szerszy zakres kolorów. Jeśli projektujesz materiały na platformy takie jak iOS lub ekrany o wysokiej rozdzielczości/retina, najlepszym wyborem jest profil Display P3, ale nie wszystkie aplikacje i programy w pełni obsługują jego szerszy zakres kolorów.

Dowiedz się tutaj, jak Figma obsługuje profil kolorów P3.

WCAG i ułatwienia dostępu dotyczące kolorów

W 1999 r. ukazała się pierwsza wersja wytycznych dotyczących ułatwień dostępu do treści internetowych (WCAG) opublikowana przez World Wide Web Consortium (W3C). Celem tego dokumentu technicznego jest zapewnienie dostępności treści internetowych dla wszystkich użytkowników. Zalecenia sformułowane przez W3C są uznawane za światowy standard ułatwień dostępu w Internecie i w znacznym stopniu wpływają na działania społeczności zajmujących się tworzeniem stron internetowych i projektowaniem treści cyfrowych. Organizacja ta na bieżąco publikuje aktualizacje, aby uwzględnić postęp technologiczny i nowe potrzeby w zakresie ułatwień dostępu.

W najnowszym dokumencie, czyli WCAG 2.1, rozszerzono wytyczne dotyczące ułatwień dostępu do stron internetowych, uwzględniając szerszy zakres niepełnosprawności, w tym zaburzenia poznawcze i korzystanie z urządzeń mobilnych, oraz tworząc bardziej inkluzywne środowisko internetowe. Jednym z kluczowych aspektów omówionych w wytycznych są wizualne ułatwienia dostępu, a w szczególności znaczenie kontrastu w projektowaniu kolorów. Odpowiedni kontrast sprawia, że tekst i elementy interaktywne odróżniają się od kolorów tła, co jest niezbędne dla użytkowników z wadami wzroku, takimi jak daltonizm lub ograniczone możliwości widzenia.

Zalecenia WCAG określają minimalne współczynniki kontrastu tekstu i obrazów, aby zapewnić dostęp do informacji wszystkim użytkownikom, niezależnie od zdolności wzrokowych. Przykładowo zalecany minimalny współczynnik kontrastu dla normalnego tekstu wynosi 4,5:1. W przypadku większego tekstu ten współczynnik musi wynosić co najmniej 3:1.

Obecnie trwają prace nad dokumentem WCAG 3.0 i zapowiada się, że będzie on jeszcze bardziej kompleksowy. Spodziewane jest wprowadzenie bardziej szczegółowych wytycznych dotyczących kontrastu kolorów, a także innych ulepszeń.

Dowiedz się więcej o WCAG 2.1

Ułatwienia dostępu dla #693EFE

Symulacje kolorów dla #693EFE

Protanopia

Deuteranopia

Tritanopia

Achromatopsja