32 schematy kolorów stron z kodami hex z szablonów We.Inc oraz jak zbudować schemat, który konwertuje: spokojna paleta bazowa z jednym akcentem zarezerwowanym dla działań, przykłady według branż i testy dostępności.
Żaden pojedynczy kolor nie wygrywa wszędzie. Najlepszy kolor przycisku to taki, który silnie kontrastuje ze stroną i nie jest używany do niczego innego, więc wzrok idzie prosto do niego.
Typowe podejście to neutralna baza (biel lub złamana biel i ciemny kolor tekstu), jeden główny kolor marki i jeden akcent dla wezwań do działania, plus kolory semantyczne dla komunikatów o sukcesie i błędzie. Więcej zwykle osłabia hierarchię wizualną.
Skojarzenia z kolorami istnieją, ale różnią się w zależności od kultury, branży i kontekstu, a wiele popularnych twierdzeń jest przesadzonych. To, co rzetelnie wpływa na konwersje, to kontrast, czytelność i to, czy pożądane działanie jest wizualnie oczywiste.
Kupujący przemysłowi cenią jasność i zaufanie. Granat, grafit i stalowe szarości z jednym mocnym akcentem, często pomarańczem bezpieczeństwa, żółcią lub jasnym niebieskim, pasują do tej kategorii. Upewnij się, że karty specyfikacji, przyciski wyceny i numery telefonów używają akcentu, aby łatwo je znaleźć.
Użyj kalkulatora kontrastu, takiego jak ten od WebAIM. WCAG 2.2 poziom AA wymaga co najmniej kontrastu 4.5:1 dla zwykłego tekstu oraz 3:1 dla dużego tekstu i kluczowych elementów interfejsu, takich jak obrysy przycisków i pola formularzy.
Żaden pojedynczy kolor nie konwertuje najlepiej. Liczy się to, jak bardzo przycisk wyróżnia się na tle strony. Schematy kolorów, które konwertują, to te ze spokojną, spójną bazą i jednym kontrastowym akcentem zarezerwowanym wyłącznie dla działań, które chcesz, by ludzie podejmowali.
Zamiast pytać „który kolor?”, zapytaj „czy mój najważniejszy przycisk wygląda jak nic innego na stronie?”. Ten przewodnik pokazuje, jak zbudować schemat wokół tej idei.
Te palety pochodzą z szablonów We.Inc (cztery najczęściej używane kolory w podglądzie każdego projektu, z wyłączeniem zwykłych szarości ramki podglądu). To projekty szablonów, a nie strony klientów — nie twierdzimy, jak żaden z nich konwertuje. Wklej kod hex do narzędzia hex color picker, aby go zobaczyć i uzyskać wartości RGB/HSL, a każdą parę tekst–tło sprawdź w narzędziu do sprawdzania kontrastu kolorów przed użyciem.
| Szablon We.Inc | Styl | Kolory (hex) | Schemat |
|---|---|---|---|
| Atlas Builders | Budownictwo / usługi | #101d2c #0b1521 #f2a614 #d18f0a | Głęboki granat, bursztynowy akcent |
| Summit Trades | Usługi | #0e2436 #e4671e #16222e #f6eeec | Granat z pomarańczem bezpieczeństwa |
| Ironpeak Roofing | Dekarstwo | #e4671e #0e2436 #17415f #16222e | Pomarańczowy wiodący, granatowa struktura |
| Ridgewater Plumbing | Hydraulika | #b08544 #d8401f #f2ede3 #c9a063 | Mosiądz i czerwień na ciepłym kremie |
| Sunward Solar | Energia słoneczna | #0b1f3a #f5a524 #d98a0b #fff6e6 | Granat jak północ i złoto słońca |
| Hookline Towing | Pomoc drogowa | #0e0e0e #ffc400 #f4f1ea #161616 | Czarny i żółty o wysokiej widoczności |
| Redline Auto Group | Dealer samochodowy | #e3262e #0e0f11 #eeeeee #17191c | Czerwień wyścigowa na prawie czarnym |
| Maple Street Motors | Serwis samochodowy | #1f4d3a #1b1b1b #f2b134 #e6efe9 | Leśna zieleń z musztardą |
| Freshpile Carpet Cleaning | Sprzątanie | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | Jaskrawy żółty na granatowym |
| Tideline Pressure Washing | Mycie zewnętrzne | #0b1b2b #3fd0c9 #f3f6f5 #020617 | Ciemny granat z akwamarynowym |
| Mowline Lawn Care | Pielęgnacja trawnika | #eef3e6 #c6f24e #0f1410 #1a2a17 | Jasnozielona baza, limonkowy akcent |
| Fairway Lawn Co. | Ogrodnictwo | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | Krem, głęboka zieleń, miękkie złoto |
| Brightside Dental | Stomatologia | #10312e #3f605c #0e5f57 #0a4841 | Spokojne odcienie teal |
| Meadowpaw Veterinary | Weterynaria | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | Stonowany teal na bladej mięcie |
| Vibrant Wellness | Klinika wellness | #25382c #eef2e6 #7c9a7e #3f6b4a | Szałwia i leśna zieleń |
| Kinfolk Home Care | Opieka domowa | #0f3d2e #f4c542 #fffdf6 #0a2e22 | Sosnowa zieleń z ciepłą żółcią |
| Lumora | Opieka zdrowotna | #c8a97e #182c41 #0b1220 #0e1a26 | Granat jak północ z piaskowym złotem |
| Sterling & Vance LLP | Kancelaria prawna | #8a93a2 #b08a4f #0b0e14 #f6eeec | Łupek, brąz i atrament |
| Harborview Wealth Partners | Doradztwo finansowe | #102a43 #b08d57 #d9bf8f #faf8f4 | Granat i złoto na kości słoniowej |
| Harborline Insurance Agency | Ubezpieczenia | #0f2742 #5fd3c9 #17a398 #0b1e33 | Granat z tealem |
| Larkfield Partners | Doradztwo | #1f4d3f #f4f1ea #14181c #4a5560 | Butelkowa zieleń na papierze |
| Keystone Realty | Nieruchomości | #f6eeec #7a2e2a #59606b #e9f0ef | Różowa baza z ciemną czerwienią |
| Lucia Trattoria | Restauracja | #e9c9a8 #f7f1e6 #efe6d4 #23301f | Ciepły piasek z oliwkowo-czarnym |
| Ember & Roast | Kawiarnia / restauracja | #ede6dc #c9642f #14100d #f6eeec | Owsiany, palony pomarańcz, espresso |
| Kilnhouse Coffee | Kawiarnia | #2b1d16 #c65d3b #f3ebe0 #fff8ef | Brąz kawy i terakota |
| Parcel No. 9 Wines | Winnica | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | Bordowy z różą |
| Petalry Florist | Kwiaciarnia | #3e1f2b #b4546c #fbf5f2 #f3e3dd | Śliwkowy i pudrowy róż |
| Hollow Oak Farm Shop | Sklep farmerski | #24301f #f6f1e4 #5e7f3a #e3a33b | Mech, krem i miód |
| Suds & Scruff | Grooming dla zwierząt | #3b1740 #ffd84d #ff8fab #fff8e7 | Bakłażan, żółty i różowy |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | Fioletowy z koralem |
| Mast Security | Bezpieczeństwo | #1e2628 #34e0a1 #e7ede9 #8d9a97 | Grafit z miętą |
| Afterglow Sound | Wydarzenia / muzyka | #efeaff #f472b6 #ec4899 #8b5cf6 | Lawenda, różowy i fioletowy |
Widoczny wzorzec: większość zestawia ciemną lub jasną bazę z jednym nasyconym akcentem (bursztynowy, pomarańczowy, żółty, limonkowy lub koralowy). To ta sama struktura „cicha baza, jeden kolor działania” opisana poniżej.
Artykuły o psychologii kolorów często twierdzą, że niebieski oznacza zaufanie, czerwony pilność, a zielony wzrost. Jest w ogólnych skojarzeniach trochę prawdy, ale silnie zależą od kultury, branży i kontekstu. Czerwień to ostrzeżenie w jednym otoczeniu i świętowanie w innym. Zieleń może znaczyć „jedź”, „eko” lub „pieniądze”.
Dobrze potwierdzony jest efekt izolacji, znany też jako efekt Von Restorff: element różniący się od otoczenia jest częściej zauważany i zapamiętywany. Przycisk w jedynym pomarańczu na niebiesko-białej stronie zostaje zauważony. Ten sam pomarańcz na stronie pełnej pomarańczy już nie.
Daje to dwie zasady, które sprawdzają się w różnych branżach:
Projektanci wnętrz używają podziału 60-30-10, który dobrze przekłada się na strony:
| Udział | Rola | Typowy wybór |
|---|---|---|
| ~60% | Tło i baza | Biel, złamana biel, bardzo jasny szary lub głęboka ciemność w ciemnych motywach |
| ~30% | Marka i struktura | Główny kolor marki dla nagłówków, nawigacji, teł sekcji |
| ~10% | Akcent / działanie | Przyciski, kluczowe linki, jedna rzecz, którą chcesz, by kliknięto |
Dodaj ciemny kolor tekstu (często prawie czarny lub ciemnoszary zamiast czystej czerni) i kolory semantyczne: zielony dla sukcesu, czerwony dla błędów, bursztynowy dla ostrzeżeń. Trzymaj te kolory semantyczne z dala od głównych przycisków, aby przycisk „Kup teraz” nie był mylony z błędem.
Jeśli masz logo, weź jego główny kolor jako podstawowy. Jeśli nie, wybierz taki, który pasuje do Twojej kategorii (zobacz tabelę poniżej) i który lubisz na tyle, by z nim żyć.
Spójrz na koło barw. Kolory dopełniające (przeciwległe) tworzą najsilniejszy efekt: niebieski i pomarańczowy, fioletowy i żółty, turkusowy i koralowy. Jeśli Twoja marka jest niebieska, pomarańczowy lub ciepły żółty akcent wyróżni się znacznie bardziej niż drugi odcień niebieskiego.
Wybierz tło, kolor powierzchni dla kart, szarość obramowań i kolor tekstu. Wykonują większość pracy i powinny być ciche.
Przepuść każdą kombinację tekstu i przycisków przez kalkulator kontrastu (ten od WebAIM jest darmowy). WCAG 2.2 poziom AA wymaga:
Jasnoszary tekst o niskim kontraście na bieli to jeden z najczęstszych problemów z czytelnością w sieci. Jeśli ludzie mają trudność z przeczytaniem Twojej oferty, kolor przycisku ma niewielkie znaczenie.
Sprawdź paletę na telefonie na zewnątrz, na tanim ekranie laptopa i w trybie ciemnym, jeśli Twoja strona go obsługuje. Kolory, które wyglądają wyrafinowanie na monitorze projektanta, mogą wyblaknąć gdzie indziej.
To rozsądne punkty startowe, a nie reguły. Każda używa cichej bazy i jednego kontrastowego akcentu.
| Branża | Baza i kolor podstawowy | Akcent dla działań | Dlaczego działa |
|---|---|---|---|
| Produkcja / przemysł | Granat, grafit, stalowa szarość | Pomarańcz bezpieczeństwa lub żółty | Poważna i niezawodna, z widocznym „Poproś o wycenę” |
| Opieka zdrowotna / stomatologia | Biel, miękki niebieski lub turkus | Ciepły koral lub zieleń | Czysta i spokojna, przycisk rezerwacji się wyróżnia |
| Prawo / finanse | Głęboki granat lub leśna zieleń, krem | Złoto lub jasny niebieski | Tradycyjne sygnały zaufania z wyraźnym działaniem kontaktu |
| Restauracje / jedzenie | Ciepłe neutralne, głęboka czerwień lub oliwka | Jasny żółty lub pomarańcz | Apetyczna, z oczywistym „Zamów” lub „Zarezerwuj” |
| SaaS / technologia | Biel lub prawie czerń, indygo lub niebieski | Żywa zieleń, pomarańcz lub róż | Wyrazista, z kontrastowym „Zacznij za darmo” |
| Uroda / wellness | Róż, szałwia, krem | Głęboka śliwka lub czerń | Miękka marka, pewny przycisk rezerwacji |
| Usługi domowe (hydraulika, HVAC, dekarstwo) | Biel, ciemny niebieski | Czerwień lub pomarańcz | Pilnie wyglądający przycisk połączenia dla awarii |
| E-commerce / moda | Głównie biel i czerń | Jeden akcent marki | Pozwala zdjęciom produktów nieść kolor |
Konkretnie dla producentów: kupujący często trafiają na stronę produktu lub możliwości i chcą karty specyfikacji lub wyceny. Niech „Poproś o wycenę”, „Pobierz kartę specyfikacji” i numer telefonu będą jedynymi elementami w kolorze akcentu na tych stronach.
Wyobraź sobie stronę firmy ogrodniczej z zielonym logo, zielonymi nagłówkami, zielonymi ikonami, zielonym tłem sekcji głównej i zielonym przyciskiem „Poproś o bezpłatną wycenę”. Wszystko jest zgodne z marką, a przycisk znika.
Poprawka:
Nic w marce się nie zmieniło, ale działanie jest teraz najbardziej widoczną rzeczą na ekranie.
Jeśli masz dość ruchu, przeprowadź test A/B koloru przycisku lub akcentu, ale zmieniaj jedną rzecz naraz i pozwól testowi trwać na tyle długo, by był miarodajny. Strony z niskim ruchem często nie osiągną wiarygodnego wyniku; dla nich lepsze są prostsze kontrole:
Kolor to jedna z części tego, co sprawia, że strona konwertuje; nasze zestawienie przykładów stron docelowych, które konwertują, omawia resztę. W We.Inc możesz opisać w czacie wygląd, którego chcesz, na przykład „granat i szarość z pomarańczowym przyciskiem wyceny”, przeglądać szablony, a potem dopracować kolory wizualnie lub w kodzie.
Zacznij za darmo · Bez karty kredytowej