Jak dobrać schemat kolorów dla swojej strony internetowej

Większość porad o „schemacie kolorów strony” rozsypuje się w momencie, gdy otworzysz prawdziwy plik projektowy. Wybierasz trzy ładne próbki z generatora, wrzucasz je do layoutu i w godzinę improwizujesz czwarty kolor na komunikat błędu, piąty na wyciszony tekst podpisu i szósty, bo pierwotny markowy niebieski jest nieczytelny na bieli. Problem nie leży w twoim guście. Leży w tym, że strona nie potrzebuje palety ładnych kolorów — potrzebuje małego, warstwowego systemu, w którym każdy kolor ma swoje zadanie.

Wdrożyłem dość interfejsów, by znać przepaść między „uwielbiam te kolory” a „ta strona jest użyteczna”. Ten przewodnik to metoda, której faktycznie używam, żeby przejść od jednego do drugiego, oraz to, jak złożyć go z palety, którą generujesz, zamiast zgadywać po omacku.

Ilu kolorów strona naprawdę potrzebuje

Dużo mniej, niż ludziom się wydaje, i dużo więcej niż trzech.

Zamieszanie bierze się z mylenia barw z kolorami używanymi w UI. Czysta strona może być zbudowana z zaledwie dwóch–trzech barw — powiedzmy markowego niebieskiego i ciepłej szarości — ale rozwijają się one w kilkanaście-i-więcej faktycznych wartości, gdy uwzględnisz tła, obramowania, tekst na różnych poziomach wyrazistości, stany hover i tak dalej. Uczciwa odpowiedź brzmi więc: celuj w jedną lub dwie prawdziwe barwy plus zdyscyplinowany zestaw neutralnych, a potem wyprowadź z nich resztę.

Jeśli łapiesz się na sięganiu po naprawdę nową, niepowiązaną barwę, zatrzymaj się. Dziewięć razy na dziesięć nie potrzebujesz kolejnego koloru — potrzebujesz jaśniejszej lub ciemniejszej wersji takiego, który już masz. Ten jeden nawyk zapobiega błotnistemu wyglądowi cyrkowego namiotu, który krzyczy „amator”.

Warstwowy zestaw: przypisz zadanie każdemu kolorowi

Myśl warstwami, a nie płaskim rzędem próbek. Oto struktura, którą buduję za każdym razem, od góry do dołu.

1. Kolor podstawowy / markowy

To kolor, który odwiedzający wymieniłby, gdybyś zapytał, czym twoja strona „jest”. Niesie osobowość i powinien pojawiać się na rzeczach, które najbardziej chcesz uwypuklić — logo, głównych przyciskach, aktywnej nawigacji. Wybierz go najpierw, bo wszystko inne na niego reaguje.

Jedno ostrzeżenie z doświadczenia: nasycony kolor marki niemal nigdy nie jest czytelny jako tekst blokowy ani używalny jako duże tło. Fiolet Stripe’a, zieleń Spotify, niemal-czerń GitHuba — w praktyce te marki używają swojej sygnaturowej barwy oszczędnie i opierają się na neutralnych na pozostałych 90% powierzchni. Twój kolor marki jest przyprawą, nie daniem. Jeśli dobierasz barwę od zera, mają znaczenie skojarzenia emocjonalne, a Psychologia koloru w brandingu to lepsze miejsce, by rozważać, którą barwę wybrać, niż jakikolwiek podgląd generatora.

2. Ciąg neutralnych / tła

To nieopiewany bohater każdej profesjonalnie wyglądającej strony i warstwa, którą początkujący pomijają. Chcesz ciągu neutralnych — nie jednej szarości, lecz gradientu pięciu do ośmiu kroków od niemal-bieli do niemal-czerni. Czegoś w rodzaju #FFFFFF, #F7F8FA, #EBEDF0, #D2D6DC, #9AA0A8, #4B5159, #23272E.

Czysta szarość (równe R, G, B) jest w porządku, ale podbarwiona neutralna sprawia wrażenie bardziej zamierzonej — przesuń barwę o kilka stopni w stronę koloru marki i zbij nasycenie do okolic 5–10%. Niebiesko ciążąca szarość pod niebieską marką czyta się jako „zaprojektowane”; martwa neutralna szarość czyta się jako „domyślny Bootstrap”. Używaj tych kroków na tła stron, powierzchnie kart, separatory i stany nieaktywne. Mechanikę generowania spójnego ciągu warto zrozumieć porządnie — zobacz Tinty, shade'y i tony — wyjaśnienie.

3. Czytelne kolory tekstu (i rządząca nimi reguła kontrastu)

Tekst blokowy rzadko jest czystą czernią na czystej bieli — #000000 na #FFFFFF potrafi sprawiać wrażenie ostrego i wywoływać u części czytelników wibrujący, męczący efekt. Zwykle ustawiam tekst podstawowy w okolicach #1A1D21 i definiuję jeszcze dwa poziomy: tekst drugorzędny przy #5A6068 na podpisy i metadane oraz szarość nieaktywną/placeholder przy #9AA0A8.

Ale prawdziwe ograniczenie nie jest tu estetyczne, tylko mierzalne. Zgodnie z wytycznymi WCAG od W3C tekst blokowy normalnego rozmiaru potrzebuje wobec tła współczynnika kontrastu co najmniej 4.5:1, by spełnić poziom AA; duży tekst (z grubsza 24px lub 18,66px pogrubiony) potrzebuje jedynie 3:1. Ta drugorzędna szarość, która ci się spodobała? Sprawdź ją. Najczęstszy błąd dostępności, jaki widuję, to jasnoszary „subtelny” tekst na bieli, który ląduje w okolicach 2.8:1 — ładny w makiecie, nieczytelny w słońcu. Przepuść każdą parę tekst-na-tle przez narzędzie do kontrastu WCAG w generatorze palet kolorów, zanim cokolwiek zatwierdzisz. Jeśli chcesz zrozumieć, co właściwie mierzy ten współczynnik i dlaczego 4.5:1 to granica, Kontrast WCAG — wyjaśnienie wchodzi głębiej.

4. Kolor akcentu / CTA

Oto ruch wbrew intuicji: kolor twojego call-to-action często nie jest kolorem twojej marki. Jeśli twoja marka jest niebieska, a główne przyciski również są niebieskie, przycisk „Kup teraz” rywalizuje o uwagę z każdym linkiem i nagłówkiem. Wyraźny akcent — często barwa dopełniająca lub dopełniająca rozszczepiona — sprawia, że ta jedna akcja, na której ci zależy, wyskakuje ze strony.

Wygeneruj go celowo. Rzuć barwę swojej marki na koło, przełącz na harmonię dopełniającą lub dopełniającą rozszczepioną, a dostaniesz kandydata na tyle napiętego, by przyciągnąć oko, a jednocześnie niegryzącego się z resztą. Niebieska marka (#2563EB) czysto łączy się z ciepłym bursztynowym lub koralowym akcentem (#F59E0B / #F97316) na główne CTA. Zarezerwuj ten kolor niemal wyłącznie na momenty konwersji — w sekundzie, w której użyjesz go na dekorację, przestanie znaczyć „kliknij tutaj”.

5. Semantyczne kolory stanów

Każdy prawdziwy interfejs w końcu musi powiedzieć sukces, ostrzeżenie, błąd i informacja. Większość ludzi pożycza oczywiste domyślne — zieleń, żółć, czerwień, niebieski — i na tym poprzestaje, co rodzi dwa problemy.

Po pierwsze, podręcznikowa czerwień i zieleń gryzą się ze starannie dobranymi kolorami marki i wyglądają jak osobny, głośniejszy język projektowy doczepiony z boku. Rozwiązaniem jest ściągnięcie tych barw w stronę ogólnego nasycenia i ciepła twojej palety, by czuły się jak rodzina. Celuj w coś w rodzaju sukces #16A34A, ostrzeżenie #D97706, błąd #DC2626, informacja #2563EB, a następnie dostrój nasycenie tak, by pasowało do pozostałych kolorów.

Po drugie — i to ma większe znaczenie — nigdy nie polegaj wyłącznie na kolorze, by zakomunikować stan. Mniej więcej 1 na 12 mężczyzn i 1 na 200 kobiet ma jakąś formę zaburzenia widzenia barw, a czerwień/zieleń to klasyczna pomyłka. Zawsze paruj kolor stanu z ikoną, etykietą lub kształtem. Czerwone obramowanie oraz komunikat „✕ Pole wymagane”. Zielony ptaszek oraz słowo „Zapisano”. To wymóg WCAG, a nie uprzejmość, i jest to najwyżej dźwigniowy nawyk dostępności, jaki możesz wyrobić. Jeśli twoi odbiorcy lub produkt są wrażliwi na kolor, Palety przyjazne osobom z daltonizmem omawiają, jak to bezpośrednio przetestować.

6. Kolory linków, hover i fokusu

Najmniejsza warstwa i ta, która oddziela dopracowane strony od niechlujnych.

• Linki zwykle przyjmują kolor marki, ale zweryfikuj kontrast wobec powierzchni, na której siedzą — kolor marki dostrojony pod przyciski bywa zbyt jasny na tekstowe linki w treści.
• Hover powinien być wyprowadzonym odcieniem, a nie nowym kolorem: weź bazę i przesuń jasność w dół o 8–12% w HSL. Spójnie, przewidywalnie, za darmo.
• Obrysy fokusu są nienegocjowalne dla użytkowników klawiatury. WCAG 2.1 wymaga też, by komponenty interfejsu i ich stany osiągały 3:1 współczynnika kontrastu nietekstowego, więc słaby obrys fokusu, który „wygląda czysto”, ale ledwo widać, jest błędem. Uczyń go oczywistym.

Składanie tego z wygenerowanej palety

Oto przepływ pracy, który zamienia wyjście generatora w powyższy system, zamiast w pięć próbek, które potem musisz ratować.

Zacznij od zablokowania barwy marki na kole. Użyj reguły harmonii, by proponować, a nie dyktować — analogiczna, jeśli chcesz spokojnego, spójnego klimatu; dopełniająca lub dopełniająca rozszczepiona, jeśli potrzebujesz wyrazistego akcentu. (Jeśli wahasz się między schematami, Palety dopełniające rozszczepione kontra triadyczne rozkłada kompromisy.) Skopiuj hex marki i hex akcentu; to warstwy 1 i 4.

Następnie zbuduj neutralne z rozmysłem. Weź barwę swojej marki, zbij nasycenie do około 8% i użyj odczytu HSL, by wystopniować jasność od ~98% w dół do ~14% w pięciu lub sześciu przystankach. To cały twój ciąg neutralnych — warstwa 2 — a ponieważ dzieli barwę marki, poczuje się ujednolicony, zamiast doczepiony. Wyprowadź kolory tekstu z ciemnego końca tego ciągu (warstwa 3) i sprawdź każdy wobec jego tła narzędziem do kontrastu, aż każda para przekroczy 4.5:1.

Na stany semantyczne wygeneruj zieleń/bursztyn/czerwień/niebieski osobno, a potem poprzesuwaj ich nasycenie w polach HSL, by usiadły obok twojej palety, zamiast ją przekrzykiwać. Na koniec wyprowadź wartości hover i fokusu, przesuwając jasność kolorów, które już masz — żadne nowe barwy nie są potrzebne.

Powód, by przez cały czas pracować w HSL, jest taki, że czyni „odrobinę jaśniej” lub „ciut mniej nasycenia” korektą o jedną liczbę, zamiast zgadywanką w trzech kanałach RGB. Jeśli ta reprezentacja jest dla ciebie nowa, Kody kolorów HEX, RGB i HSL — wyjaśnienie jest warte dziesięciu minut.

Jeden krok, który oszczędza ci przeprojektowania

Zanim zakochasz się w jakimkolwiek schemacie, wklej swoje finalne wartości w szary, gęsty od tekstu szkielet — prawdziwe nagłówki, prawdziwe akapity, prawdziwe przyciski — i patrz na to przez pełną minutę. Kolor zawsze uwodzi w siatce próbek i rozczarowuje w layoucie, bo kontekst, otaczające neutralne i proporcja zmieniają wszystko. Reguła 60-30-10 daje ci proporcje, które warto tu uszanować: głównie neutralnie, znacząca ilość marki, mały wstrząs akcentu.

Schemat kolorów strony to nie zestaw kolorów, które lubisz. To zestaw decyzji — co jest marką, co powierzchnią, co czytelne, co „kliknij tutaj”, co „coś poszło nie tak” — każda z nich przypisana, przetestowana i wielokrotnie użyta z dyscypliną. Trafiaj z zadaniami, a niemal każda gustowna paleta zadziała. Pomiń zadania, a nawet piękna paleta będzie z tobą walczyć na każdym ekranie.