Na stronie internetowej każdy kolor ma swoje zadanie: tło, tekst, przyciski, linki i komunikaty. Te 12 palet powstało właśnie z myślą o tym: jasne lub ciemne tło, czytelny kolor tekstu i akcent na przyciski. Skopiuj kody HEX prosto do CSS lub kreatora stron.
Czysty niebieski SaaS
Prawie białe tło, bardzo ciemnoniebieski tekst i przyciski w żywym niebieskim.
Stonowana firmowa
Dla kancelarii, firm doradczych lub przemysłowych.
Ciepły sklep online
Pomarańcz wyróżnia przyciski zakupu na ciepłym tle.
Tryb ciemny z zielenią
Warstwowe ciemne tła, jasny tekst i zielony akcent dla akcji.
Naturalna i organiczna
Dla sklepów z naturalnymi produktami, gospodarstw lub wellness.
Dla blogów, magazynów i mediów; czerwień wyróżnia linki i nagłówki.
Technologiczny fiolet
Częsta w produktach cyfrowych, kursach online i narzędziach AI.
Turkus i koral
Dwa dopełniające się akcenty: jeden na przyciski, drugi na komunikaty.
Ciemny luksus
Dla hoteli, restauracji lub marek premium, w których główną rolę grają zdjęcia.
Zdrowie i wellness
Czysta i spokojna; dobra dla klinik i terapeutów.
Piasek i niebieskozielony
Ciepła i poważna zarazem; dla turystyki, nieruchomości lub kawiarni.
Kliknij kolor, żeby skopiować jego kod HEX. Ikona ołówka otwiera paletę w edytorze, gdzie możesz ją zmienić.
Stosuj zasadę 60-30-10
Kolor dominujący (zwykle tło) zajmuje około 60% strony, kolor drugorzędny 30% (sekcje, karty, nagłówek), a akcent pozostałe 10%. Akcent zostaw dla przycisków i linków, wtedy użytkownik wie, gdzie kliknąć.
Sprawdź kontrast tekstu
Wytyczne dostępności WCAG wymagają kontrastu co najmniej 4,5:1 dla zwykłego tekstu. Jasnoszary na białym wygląda elegancko, ale trudno go czytać, zwłaszcza na telefonie w słońcu. Przed publikacją użyj narzędzia do sprawdzania kontrastu.
Ustal kolory stanów i komunikatów
Oprócz palety marki strona potrzebuje kolorów dla błędów (czerwony), sukcesu (zielony) i ostrzeżeń (żółty lub pomarańczowy). Wybierz wersje pasujące do palety i używaj ich zawsze tak samo w formularzach i komunikatach.