Jaki piękny kolor! Jak technologie wpływają na percepcję barw?

Autor: Krzysztof Ścira

Kolor na ekranie wygląda inaczej niż w rzeczywistości — przez przestrzenie barwne, gamut wyświetlacza, oświetlenie i biologię oka. Jak to minimalizować w projektowaniu i e-commerce.

Ten sam kolor wyświetlany na różnych urządzeniach – wpływ technologii na percepcję barw — Ilustracja pokazująca, jak ten sam kolor może wyglądać inaczej na telefonie, komputerze i w druku – wpływ przestrzeni barwnych, ekranów i światła na odbiór kolorów.

Dlaczego kolor na ekranie wygląda inaczej niż w rzeczywistości

Każdy, kto kupował coś przez internet, zna ten moment — paczka przychodzi, otwierasz ją i kolor jest „nie ten". Nie dlatego, że sprzedawca oszukał. Dlatego, że między ekranem a rzeczywistością stoi cały łańcuch technologiczny: przestrzeń barwna, gamut wyświetlacza, profil ICC, warunki oświetleniowe, a na koniec — biologia ludzkiego oka. W e-commerce ta różnica przekłada się na realne pieniądze: według raportu Barclaycard z 2023 roku jednym z najczęstszych powodów zwrotów odzieży kupionej online jest „kolor inny niż na zdjęciu".

W tym artykule przyglądamy się technologicznym przyczynom rozbieżności w percepcji barw i pokazujemy, jak je minimalizować — zarówno na etapie projektu graficznego, jak i budowy aplikacji webowej.

Przestrzenie barwne — ten sam kolor, inne liczby

Kolor to nie jedna wartość — to punkt w przestrzeni matematycznej, a tych przestrzeni jest kilka. Każda ma inny zakres i inne zastosowanie:

RGB (Red, Green, Blue) — model addytywny, używany na ekranach. Trzy źródła światła mieszają się, tworząc barwy. To domyślna przestrzeń w przeglądarkach, aplikacjach i aparatach cyfrowych.
CMYK (Cyan, Magenta, Yellow, Key/Black) — model subtraktywny, używany w druku. Farby nakładane na papier pochłaniają światło. Gamut CMYK jest węższy niż RGB — intensywne niebieskie, neonowe zielone i fluorescencyjne odcienie po konwersji stają się przygaszone.
HSL (Hue, Saturation, Lightness) — model intuicyjny dla projektantów: opisuje kolor przez odcień, nasycenie i jasność. Popularny w CSS i edytorach graficznych.
LAB (CIELAB) — model oparty na percepcji ludzkiego wzroku. Odległość między dwoma punktami w LAB odpowiada temu, jak różne te kolory wydają się oku. Używany w profesjonalnym retuszu i analizie kolorymetrycznej.
Oklab — nowoczesna przestrzeń percepcyjna dostępna w CSS (funkcja oklab() i oklch()). Lepiej niż HSL oddaje percepcyjne różnice w jasności i nasyceniu, co ułatwia tworzenie spójnych palet kolorystycznych.

Dla osób pracujących z grafiką na potrzeby zarówno ekranu, jak i druku najczęstszy błąd to projektowanie wyłącznie w RGB i konwersja do CMYK na samym końcu. Kolory, które wyglądały żywo na monitorze, stają się matowe na papierze. Warto przygotowywać osobne wersje — albo przynajmniej sprawdzić konwersję na wczesnym etapie.

Gamut — nie każdy ekran pokaże to samo

Gamut to zakres barw, które dane urządzenie potrafi wyświetlić lub wydrukować. Trzy najczęściej spotykane profile:

sRGB — standard od lat 90., obejmujący ok. 35% widocznych barw. Większość monitorów biurowych, laptopów i telefonów niższej klasy pracuje w sRGB.
Adobe RGB — szerszy gamut, pokrywający ok. 50% widocznych barw. Stosowany w fotografii i poligrafii.
DCI-P3 — jeszcze szerszy gamut, opracowany dla przemysłu filmowego. Dziś standardowy w ekranach OLED, iPhone'ach (od modelu 7), MacBookach Pro i wielu flagowych smartfonach z Androidem. Pokrywa ok. 45% widocznych barw, ale w innych obszarach niż Adobe RGB.

Pułapka „dobrego monitora" polega na tym, że grafik pracujący na ekranie z szerokim gamutem DCI-P3 dobiera subtelne gradienty i przejścia kolorystyczne, które na monitorze sRGB zlewają się w jednolity kolor. Efekt: projekt wygląda pięknie na MacBooku projektanta i płasko na monitorze klienta. W CSS od kilku lat można deklarować kolory w przestrzeni display-p3 za pomocą funkcji color(display-p3 r g b), ale trzeba pamiętać o fallbacku dla urządzeń sRGB.

Próbniki kolorów — Pantone, RAL i powtarzalność

Na ekranie kolor to przybliżenie. W fizycznym świecie — druk, farby, tekstylia, lakiery — potrzebna jest powtarzalność. Do tego służą standaryzowane systemy próbnikowe:

Pantone (PMS) — najpopularniejszy system w projektowaniu graficznym i brandingu. Każdy kolor ma numer (np. Pantone 485 C to czerwień Coca-Coli). Drukarz odwzorowuje go z gotowej mieszanki farby, nie z CMYK.
RAL — system stosowany w przemyśle, architekturze i lakiernictwie. RAL 9010 (czysta biel) wygląda tak samo niezależnie od producenta farby — w przeciwieństwie do „bieli z ekranu", która zależy od ustawień jasności i temperatury barwowej monitora.
NCS (Natural Colour System) — system skandynawski oparty na percepcji. Stosowany głównie w architekturze wnętrz i budownictwie, popularny w krajach nordyckich.

Jeśli projektujesz identyfikację wizualną, która będzie używana zarówno cyfrowo, jak i w druku — zdefiniuj kolory marki w Pantone (lub RAL, jeśli dotyczy materiałów fizycznych) jako źródło prawdy, a wersje RGB i CMYK jako derywaty.

Trudne kolory — perłowe, metaliczne, flip-flop

Niektóre kolory po prostu nie istnieją na ekranie:

Lakiery perłowe i metaliczne zmieniają odcień w zależności od kąta padania światła. Na zdjęciu wyglądają jak płaski kolor — cała „głębia" znika.
Brokat błyszczy w ruchu, ale na statycznym zdjęciu to po prostu szum jasnych pikseli.
Powłoki flip-flop (np. na samochodach) zmieniają kolor przy obrocie o kilkadziesiąt stopni. Żaden ekran tego nie odda — potrzeba wideo albo fizycznej próbki.

W e-commerce, gdzie sprzedajesz produkty o takich wykończeniach, jedynym uczciwym rozwiązaniem jest ostrzeżenie „kolor może odbiegać od prezentowanego" i — jeśli to możliwe — oferowanie fizycznych wzorników.

Warunki oświetleniowe — ten sam kolor wygląda inaczej w dzień i w nocy

Temperatura barwowa otoczenia wpływa na percepcję koloru zarówno na ekranie, jak i w rzeczywistości:

Światło dzienne (~5500 K) — neutralne, najlepiej oddaje rzeczywiste barwy. To warunek, w którym powinno się oceniać kolory przy pracy z drukiem.
Światło LED ciepłe (~3000 K) — przesuwa percepcję w stronę żółci. Białe ściany wyglądają kremowo, niebieskie elementy tracą intensywność.
Świetlówki — mogą powodować zielonkawe zabarwienie, szczególnie starsze typy T8.

Do tego dochodzą filtry systemowe — tryb nocny (Night Shift, Redshift, f.lux) przesuwa temperaturę barwową ekranu w stronę cieplejszych tonów. Użytkownik przeglądający sklep wieczorem z włączonym filtrem nocnym widzi produkty w cieplejszych odcieniach niż w rzeczywistości.

Złudzenia optyczne — oko kłamie

Percepcja koloru zależy od otoczenia. Kilka efektów, które warto znać przy projektowaniu interfejsów:

Efekt Bezolda — ten sam kolor wydaje się jaśniejszy na ciemnym tle i ciemniejszy na jasnym. Przy zmianie motywu (dark/light mode) kolory akcentów mogą wyglądać inaczej, choć wartość RGB się nie zmieniła.
Iluzja siatki Hermanna — na przecięciach jasnych linii na ciemnym tle oko widzi ciemne plamy, których tam nie ma. To wpływa na projektowanie tabel i gridów.
Zjawisko „sukienki" (2015) — jedno zdjęcie, dwie zupełnie różne percepcje koloru (niebiesko-czarna vs. biało-złota), w zależności od tego, jak mózg interpretuje oświetlenie na zdjęciu.

Co z tym zrobić w praktyce

Pracuj z profilami ICC. Kalibruj monitor kolorymetrem (X-Rite, Datacolor) co 2–4 tygodnie. Bez kalibracji każda decyzja kolorystyczna jest obarczona błędem.
Projektuj w docelowej przestrzeni. Materiały do druku — w CMYK od początku. Grafikę webową — w sRGB (z opcjonalnym display-p3 dla nowoczesnych ekranów).
Testuj na różnych urządzeniach. Sprawdź, jak kolory wyglądają na iPhonie, na tanim telefonie z Androidem, na monitorze biurowym i na laptopie. Różnice bywają zaskakujące.
Definiuj kolory marki w Pantone/RAL jako źródło prawdy. RGB i CMYK to derywaty.
W e-commerce dodaj informację o możliwych różnicach kolorystycznych i — jeśli to produkt premium — rozważ fizyczne wzorniki.

Kolor to nie jeden plik — to cały ekosystem od monitora przez druk po oświetlenie sklepu. Jeśli projektujesz system dedykowany z komponentem e-commerce lub konfiguratorem produktów, warto uwzględnić zarządzanie kolorami od początku. Porozmawiajmy o tym, jak to zrobić dobrze.

Źródła

MDN Web Docs — CSS color values — dokumentacja funkcji kolorów w CSS, w tym oklab(), oklch() i color(display-p3).
Adobe — About color spaces — wyjaśnienie przestrzeni barwnych RGB, CMYK i LAB w kontekście projektowania graficznego.
Pantone — Color Systems Explained — opis systemów próbnikowych Pantone.
RAL Colours — oficjalna strona systemu RAL.
WebKit — Wide Gamut Color in CSS with Display-P3 — jak używać szerszego gamutu w CSS.