Zasada 60-30-10
To najbardziej przydatna zasada rozdzielania kolorów. Pochodzi z projektowania wnętrz, ale sprawdza się w każdym projekcie.
- 60%: kolor dominujący. Zwykle neutralny lub łagodny. Zajmuje tła i duże powierzchnie.
- 30%: kolor drugoplanowy. Nadaje charakter. Pojawia się w blokach, menu lub meblach.
- 10%: kolor akcentu. Najbardziej wyrazisty. Służy do przycisków, ikon lub detali.
Na przykład: złamana biel w 60%, granat w 30% i pomarańczowy w 10%.
Nie musisz mierzyć dokładnie. Chodzi o to, żeby jeden kolor dominował, drugi mu towarzyszył, a trzeci się wyróżniał.
Rola kolorów neutralnych
Kolory neutralne to biały, czarny, szary, beżowy, kremowy i jasne brązy. Pasują prawie do wszystkiego.
Dają odpocząć oczom i pozwalają mocnym kolorom się wyróżnić. Paleta bez kolorów neutralnych zwykle męczy.
- Biel i złamana biel: czystość i przestrzeń.
- Szary: nowoczesny i stonowany. Wybierz ciepłe lub zimne szarości, zależnie od reszty palety.
- Beż i piaskowy: ciepło i naturalność.
- Czarny lub prawie czarny: elegancja i kontrast. Do tekstu bardzo ciemny szary jest zwykle wygodniejszy niż czysta czerń.
Łączenie według temperatury
Kolory dzielą się na ciepłe (czerwienie, pomarańcze, żółcie) i zimne (niebieskie, zielenie, fiolety). Są trzy proste sposoby, żeby je łączyć:
- Same ciepłe: przytulny i energiczny efekt. Idealne dla restauracji lub przyjaznych marek.
- Same zimne: spokojny i profesjonalny efekt. Idealne dla medycyny, technologii lub finansów.
- Zimna baza z ciepłym akcentem: najbardziej uniwersalna opcja. Ciepły akcent przyciąga wzrok na spokojnym tle.
Najczęściej zawodzi mieszanie wielu intensywnych ciepłych i zimnych kolorów naraz, bez koloru dominującego.
Kontrast tekstu
Ładny kolor nic nie da, jeśli tekstu nie da się przeczytać. Kontrast między tekstem a tłem jest kluczowy dla czytelności i dostępności.
- Używaj ciemnego tekstu na jasnym tle albo jasnego tekstu na ciemnym tle.
- Unikaj żółtego, jasnozielonego lub jasnoszarego tekstu na białym.
- Nie kładź nasyconych kolorów dopełniających jeden na drugim, na przykład czerwonego na zielonym. „Drgają” i męczą.
- Wytyczne WCAG wymagają współczynnika co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego.
Każdą parę kolorów sprawdzisz w naszym narzędziu do sprawdzania kontrastu.
15 połączeń kolorów, które zawsze działają
Te pary to bezpieczny start. Traktuj je jako bazę i dodaj kolor neutralny lub akcent, jeśli trzeba.
- Granatowy i kremowy: klasyczne, poważne i czytelne.
- Czarny i złoty: luksus i elegancja.
- Niebieski i pomarańczowy: kolory dopełniające z dużą energią.
- Butelkowa zieleń i beż: naturalne i spokojne.
- Różowy i grafitowy: nowoczesne i zrównoważone.
- Żółty i czarny: maksymalny kontrast, idealne do ostrzeżeń.
- Bordowy i piaskowy: ciepłe i wyrafinowane.
- Turkusowy i koralowy: świeże i letnie.
- Fioletowy i jasnoliliowy: monochromatyczne i kreatywne.
- Brązowy i szałwiowy: ziemiste, idealne dla naturalnych marek.
- Szary i brzoskwiniowy: łagodne i przyjazne.
- Ciemnoniebieski i bladożółty: spokojne, z odrobiną światła.
- Terakota i złamana biel: ciepłe i śródziemnomorskie.
- Ciemny morski i musztardowy: retro i z charakterem.
- Biały i czerwony: bezpośrednie, energiczne i bardzo widoczne. W Polsce od razu kojarzą się z barwami narodowymi.
Znacznie więcej pomysłów z kodami HEX znajdziesz na naszej stronie połączenia kolorów.
Co pasuje do każdego koloru
Jeśli masz już kolor główny, ta lista da ci szybki punkt wyjścia:
- Czerwony: biały, czarny, szary, granatowy i beżowy. Odważniej: różowy lub pomarańczowy.
- Pomarańczowy: granatowy, turkusowy, biały, kremowy i brązowy.
- Żółty: szary, czarny, granatowy i biały. Musztardowy dobrze łączy się z ciemną zielenią.
- Zielony: beżowy, biały, brązowy, złoty i jasnoróżowy.
- Niebieski: biały, pomarańczowy, szary, żółty i koralowy. Granatowy działa prawie jak kolor neutralny.
- Fioletowy: szary, liliowy, złoty, szałwiowy i biały.
- Różowy: szary, granatowy, oliwkowy, biały i złoty.
- Brązowy: kremowy, zielony, ciemnoniebieski, pomarańczowy i złamana biel.
Zauważ, że kolory neutralne pojawiają się prawie na każdej liście. To najbezpieczniejszy sposób, żeby towarzyszyć mocnemu kolorowi.
Jak stworzyć własne połączenie
- Wybierz kolor główny zależnie od tego, co chcesz przekazać.
- Poszukaj koloru drugoplanowego na kole barw: sąsiada dla spokojnego efektu, przeciwieństwa dla wyrazistego.
- Dodaj jeden lub dwa kolory neutralne.
- Wybierz tylko jeden kolor akcentu dla najważniejszych elementów.
- Przetestuj paletę na prawdziwym przykładzie: stronie, slajdzie lub zdjęciu pokoju.
Jeśli masz wątpliwości, użyj mniej kolorów. Od trzech do pięciu kolorów wystarczy do prawie każdego projektu.
Częste błędy przy łączeniu kolorów
- Zbyt wiele kolorów. Efekt wygląda chaotycznie i nic się nie wyróżnia.
- Ta sama waga dla wszystkich. Bez koloru dominującego oko nie wie, gdzie patrzeć.
- Zapominanie o kontraście. Teksty, których nie da się przeczytać, i przyciski, których nie widać.
- Nasycanie wszystkiego. Bardzo żywe kolory męczą. Łącz je z łagodnymi odcieniami.
- Ignorowanie kontekstu. Kolor wygląda inaczej w świetle dziennym, na ekranie i w druku.
- Kopiowanie bez dopasowania. Paleta, która działa w jednej marce, może nie pasować do twoich odbiorców.
- Mieszanie neutralnych kolorów o różnej temperaturze. Zimny szary obok ciepłego beżu może wyglądać brudno. Wybieraj neutralne kolory z tej samej rodziny.
- Brak testów na różnych ekranach. Kolor może dobrze wyglądać na komputerze, a blado na telefonie. Zawsze sprawdzaj na więcej niż jednym urządzeniu.