Teoria kolorów brzmi naukowo. W praktyce to mały zestaw narzędzi, do którego dobry projektant sięga bez zastanowienia. Siedem klasycznych harmonii obejmuje 95% pracy z paletami — znajomość każdej i wiedza, kiedy jej użyć, to różnica między paletą, która wydaje się zamierzona, a taką, która wydaje się przypadkowa.

Koło to kompas

Każda reguła harmonii definiuje pozycje na 12-segmentowym kole kolorów. Wybierasz odcień bazowy, a reguła mówi ci, gdzie na kole znaleźć resztę. Reguły nie określają nasycenia ani jasności — te wymiary możesz dostroić sam.

Komplementarna (Odcienie przeciwne)

Dwa kolory bezpośrednio naprzeciw siebie na kole: czerwony i turkusowy, pomarańczowy i niebieski, purpura i żółty. Maksymalny kontrast. Używane, gdy potrzebujesz czegoś, co wyróżni się na tle — przycisku CTA na stronie docelowej, podświetlenia na wykresie danych.

Pułapka: przy pełnym nasyceniu pary komplementarne niekomfortowo wibrują. Przyciemni jeden z nich (zmniejsz nasycenie, rozjaśnij lub przyciemnij) i użyj drugiego jako akcentu.

Triadyczna (Trzy równomiernie rozmieszczone)

Trzy odcienie w odstępach 120°: czerwony-żółty-niebieski, pomarańczowy-zielony-purpura. Zrównoważona i energiczna. Popularna dla ilustracji, produktów dla dzieci i marek, które chcą czuć się żywe bez przytłoczenia.

Pułapka: wszystkie trzy przy równym nasyceniu konkurują o uwagę. Wybierz jeden, który dominuje (60% twojego projektu), jeden do wspierania (30%), jeden do akcentów (10%).

Analogiczna (Sąsiednie na kole)

Trzy do pięciu sąsiadujących odcieni: żółty-żółto-zielony-zielony lub niebieski-niebieski-fiolet-fiolet. Najspokojniejsza harmonia — brak konfliktu, ponieważ żaden kolor nie walczy z innym. Naturalne sceny (zachody słońca, lasy) są niemal zawsze analogiczne.

Pułapka: palety analogiczne mogą wyglądać płasko. Dodaj komplementarny akcent (małą dawkę przeciwności twojego środkowego koloru) dla punktów kontrastu.

Półkomplementarna (Dwie blisko-przeciwne)

Wybierz kolor bazowy, a następnie weź dwa kolory sąsiadujące z jego dopełnieniem zamiast samego dopełnienia. Miększe niż czysta komplementarna, ale nadal mocne. Dobry domyślny wybór dla projektantów, którzy uważają zwykłą komplementarną za zbyt agresywną.

Tetradyczna (Dwie pary komplementarne)

Cztery odcienie tworzące prostokąt na kole: np. czerwony + zielony + pomarańczowy + niebieski. Najbogatsza harmonia — wiele różnorodności — ale najtrudniejsza do zbilansowania. Najlepsza, gdy jeden kolor dominuje, a pozostałe trzy pełnią rolę wspierającą.

Pułapka: palety tetradyczne łatwo czytają się jako chaotyczne. Zdecyduj, który kolor nosi tożsamość, i zdegraduj pozostałe trzy do mniejszych ról.

Monochromatyczna (Jeden odcień, wiele wartości)

Jeden odcień z różnym nasyceniem i jasnością. Maksymalna spójność, zero kontrastu odcienia. Idealna dla interfejsów, gdzie chcesz, aby zawartość (zdjęcia, typografia) niosła zainteresowanie wizualne, a nie chrome interfejsu.

Większość minimalistycznych narzędzi SaaS opiera się na monochromatycznym — marka to jeden odcień niebieskiego, wszystko inne to skala szarości.

Trendujące (Łamanie zasad z intencją)

Siódmy tryb, który obejmujemy w naszym Color Palette Generator: 177 ręcznie wyselekcjonowanych palet społeczności od ColourLovers, Coolors i projektantów branżowych. Palety te często celowo łamią klasyczne reguły — działają, ponieważ projektant miał specjalną twórczą intencję — i są świetnym źródłem inspiracji, gdy czysta teoria daje coś zbyt bezpiecznego.

Którą wybrać?

Redakcyjne, spokojne, naturalne → analogiczna.
Punch, CTA, energia → komplementarna lub półkomplementarna.
Żywa marka, ilustracja → triadyczna.
Bogata redakcja, odważne kampanie → tetradyczna.
Minimalistyczny UI, pełny zdjęć → monochromatyczna.
Czujesz się zagubiony → przeglądaj Trendujące.

Poza zasadami

Wszystkie siedem harmonii ignoruje dwa krytyczne wymiary: kontrast (czy tekst będzie czytelny na tym tle?) i kolor semantyczny (czerwony oznacza niebezpieczeństwo w zachodnim interfejsie użytkownika niezależnie od teorii). Zawsze uruchom swoją ostateczną paletę przez sprawdzenie kontrastu WCAG — Color Palette Generator pokazuje ci wskaźniki AA/AAA dla każdej pary jednym kliknięciem — i nie wybieraj koloru niebezpieczeństwa tylko dlatego, że koło mówi, że wygląda ładnie.

Reguły to punkty wyjścia, nie punkty końcowe. Wygeneruj pięć palet, je skrytykuj, dostosuj. Dobre palety pochodzą z iteracji, nie z pojedynczego rzutu kostką.

Zasady harmonii kolorów: Komplementarne, triadyczne, tetradyczne i kiedy używać każdej