Harmonia Kolorów | mysimulator.uk

HSL: kolor jako kąt, a nie trzy oddzielne kanały

RGB przechowuje kolor jako trzy niezależne intensywności kanałów, co jest wygodne dla wyświetlacza, ale bezużyteczne do rozumowania o kolorach "podobnych" lub "przeciwnych". HSL – odcienie, nasycenie, jasność – ponownie parametruje tę samą przestrzeń barw, gdzie odcień to pojedynczy kąt od 0 do 360 stopni wokół koła, nasycenie to odległość od środka szarości, a jasność określa, jak blisko kolor jest czerni lub bieli. Ponieważ odcień jest dosłownie kątem, zasady harmonii barw stają się prostymi zasadami geometrii: wybierz kąty o określonej relacji, a uzyskane kolory mają tendencję do wyglądać intencjonalnie, a nie przypadkowo.

demo na żywo · powiązana symulacja● LIVE

Klasyczna harmonia kolorów, patrząc na kąty

Kolory komplementarne (różniące się o 180°), kolory + 180° zapewniają maksymalny kontrast, stanowią 1 parę. Kolory split-komplementarne (różniące się o 150° oraz 210°) dają kontrast, lecz mniej napięcia niż w przypadku kolorów komplementarnych. Kolory trójkolorowe (różniące się o 120° oraz 240°) są zbalansowane, żywe i równomiernie rozłożone. Kolory tetradeczne (w kształcie kwadratu) – kolory różniące się o 90°, 180°, 270° – są bogate i wymagają wyznaczenia jednego dominującego koloru, pozostałe używane z umiarem jako akcenty. Trzy lub cztery kolory w pełnej, równej intensywności mają tendencję do konkurowania zamiast harmonizowania. Kolory analogiczne (różniące się o około 30°) są spokojne i charakteryzują się niskim kontrastem, co sprawia, że są naturalnie spójne. Kolory trójkolorowe i tetradeczne najlepiej sprawdzają się, gdy jeden kolor jest wybrany jako dominujący, a pozostałe używane oszczędnie jako akcenty. Kolory komplementarne (o kątach 180° rozdzielonych) generują najsilniejszy możliwy kontrast, ponieważ znajdują się na przeciwnych końcach koła barw. Kolory analogiczne (w promieniu około 30°) dzielą podobieństwo, co sprawia, że są spokojne i spójne. Kolory trójkolorowe i tetradeczne działają najlepiej, gdy jeden kolor jest wybrany jako wizualnie dominujący, a pozostałe używane w niewielkiej ilości jako akcenty.

Complementary       hue, hue + 180°                    maximum contrast, 1 pair
Split-complementary hue, hue + 150°, hue + 210°         contrast, less tension than pure complementary
Triadic             hue, hue + 120°, hue + 240°          balanced, vivid, evenly spaced
Tetradic (square)   hue, hue + 90°, hue + 180°, hue + 270°   rich, needs one dominant colour
Analogous           hue, hue ± 30°                        calm, low contrast, naturally cohesive
Monochromatic       one hue, varying only S and L          safest, guaranteed to cohere

Dlaczego kolory komplementarne wyglądają tak intensywnie razem

Nie jest to tylko konwencja estetyczna – ma swoje źródło w rzeczywistych procesach fizjologicznych w siatkówce. Widzenie barwne u człowieka przekształca sygnały z trzech typów ogniskowych na kanały przeciwstawne: kanał czerwielno-zielony oraz kanał niebiesko-żółty, zamiast przesyłać oddzielnie surowe sygnały czerwone, zielone i niebieskie. Kolory znajdujące się blisko siebie na kole barw zmuszają te kanały przeciwstawne do osiągania swoich ekstremów jednocześnie w przeciwnych kierunkach, co jest przyczyną tego drgającego, wysokiego kontrastu, gdy kolory są umieszczone obok siebie – a także powoduje klasyczny efekt poświaty, gdzie patrzenie na nasycony kolor i odwrócenie wzroku ujawnia duch w jego kolorze komplementarnym, ponieważ wyczerpany kanał przeciwstawny tymczasowo przekracza granice.

RYB kontra RGB: dwa różne koła, dwie różne odpowiedzi

Kluczowa i często pomijana subtelność: tradycyjne koło barw artystycznych (czerwono-żółto-niebiesko, RYB) opisuje mieszanie pigmentów w sposób destruktywny, gdzie każdy dodany pigment absorbuje więcej długości fal, a mieszanie prowadzi do ciemnych lub zmąconych kolorów. Narzędzia cyfrowe wykorzystują model RGB, który opisuje mieszanie światła w sposób sumaryczny, gdzie dodawanie długości fal prowadzi do bieli. Oba koła umieszczają barwy w różnych pozycjach – na kole RYB pomarańcz znajduje się mniej więcej tam, gdzie na kole RGB znajduje się żółto-zielony – co oznacza, że harmonia odczytana z wydrukowanego koła pigmentów nie przełoży się identycznie na wyniki w edytorze CSS, a odwrotnie.

Gdzie HSL Cię oszukuje

Wartość jasności w przestrzeni HSL jest średnią matematyczną kanałów RGB koloru, a nie miarą tego, jak jasno kolor ten wydaje się ludzkiemu oku. Ponieważ ludzkie oko znacznie bardziej wrażliwe jest na fale świetlne żółto-zielone niż na niebieskie, czysty żółty i czysty błękit ustawione na tej samej jasności HSL wynoszącej 50% wyglądają zupełnie niesymetrycznie – żółć wydaje się znacznie jaśniejsza. Dlatego też paleta wygenerowana równymi obrotami odcięcia przy stałej jasności i nasyceniu HSL może wyglądać nierównomiernie, z niektórymi swatchemi "wyrzszywającymi się" a innymi cofającymi się w cień. Przestrzenie kolorów percepcyjnie jednorodne, takie jak CIELAB lub nowsza HSLuv, korygują to poprzez modelowanie rzeczywistej wrażliwości ludzkiego oka na luminancję i są coraz częściej wykorzystywane przez profesjonalne narzędzia projektowe do generowania naprawdę zbalansowanych palet zamiast surowej rotacji HSL.

Frequently asked questions

Dlaczego kolory komplementarne wydają się tak intensywne, gdy są umieszczone obok siebie?

Wynika to z tego, jak jest ukształtowane ludzkie postrzeganie kolorów. Sygnały retinalne są kodowane na kanały przeciwnościowe (czerwono-zielona, niebiesko-żółta) zamiast być przesyłane jako surowe sygnały czerwonego, zielonego i niebieskiego, a kolory o różnicy 180 stopni na kole barwowym stymulują te kanały przeciwnościowe w przeciwnych kierunkach, co powoduje maksymalny kontrast współdziałający. Dzieje się tak również wtedy, gdy patrzymy na intensywny kolor i odwracamy wzrok, pojawia się poświatka w jego kolorze komplementarnym – kanał przeciwnościowy jest zmęczony i przekracza granice, gdy stymulus jest usuwany.

Czy koło barw ułożone na podstawie mieszania pigmentów jest takie samo jak to ułożone na podstawie mieszania światła?

Nie, a to jest częsty powód dezorientacji. Tradycyjne koło barw RYB (czerwono-żółto-niebiesko) opisuje proces odchłaniania długości fal przez pigmenty, gdzie mieszanie usuwa długości fal. Narzędzia cyfrowe do pracy z kolorami używają modelu RGB, który opisuje dodawanie długości fal światła, gdzie łączenie długości fal daje biały kolor. Oba koła umieszczają barwy w różnych pozycjach – RYB'owy pomarańcz znajduje się mniej więcej tam, gdzie RGB'owy żółto-zielony – więc zasada harmonii odczytana z jednego koła nie tłumaczy się bezpośrednio na drugie.

Dlaczego paleta HSL czasami wygląda nienaturalnie, nawet jeśli barwy są równomiernie rozmieszczone?

Wynika to z tego, że wartości saturaacji i jasności w HSL są matematycznie zdefiniowane, a nie percepcyjnie – czysty żółty przy jasności HSL 50% wydaje się znacznie jaśniejszy dla oka ludzkiego niż czyste niebieskie przy tej samej jasności 50%, ponieważ oko ludzkie jest bardziej wrażliwe na fale świetlne żółto-zielone. Przestrzenie percepcyjnie jednolite, takie jak CIELAB lub HSLuv, korygują to, modelując rzeczywistą wrażliwość oka ludzkiego na jasność, dlatego profesjonalne narzędzia do pracy z kolorami coraz częściej generują palety w tych przestrzeniach zamiast w surowym HSL.

Wypróbuj na żywo

Wszystko powyżej działa bezpośrednio w Twojej przeglądarce — otwórz Colour Harmony i zmieniaj parametry podczas działania. Nic nie jest instalowane ani przesyłane na serwer, cały model działa w jednej karcie.

▶ Otwórz symulację Colour Harmony

Harmonia Kolorów: Koło HSL i Zasady Za Dobre Palety