Zielona kolorystyka strony: 6 palet z kodami hex

Zielone palety kolorów dla stron www z kodami hex, sprawdzonym kontrastem tekstu i zastosowaniami. Wybierz zieleń, która jest czytelna i pasuje do marki.

Najczęściej zadawane pytania

Jaka zieleń jest najlepsza na stronę internetową?

Nie ma jednej najlepszej zieleni, ale głęboka, lekko przygaszona zieleń, taka jak #166534 lub #2D6A4F, to najbezpieczniejszy punkt wyjścia. Obie spełniają próg WCAG AA 4,5:1 dla tekstu na białym tle (7,13:1 i 6,39:1), więc nadają się na przyciski, linki i nagłówki. Jaskrawe zielenie, takie jak #22C55E, nie przechodzą testu na bieli (2,28:1) i lepiej zostawić je na ikony albo ciemne tła.

Jakie kolory pasują do zieleni na stronie internetowej?

Dobrze łączą się ciepłe złamane biele i kremy (#F6F4EC), niemal czarne zielenie (#081C15) oraz jeden ciepły akcent, na przykład bursztynowy lub terakotowy. Neutralne kolory warto lekko przyciemnić w stronę zieleni zamiast używać czystej szarości, żeby strona wyglądała spójnie. Akcent ogranicz do jednego koloru przycisków.

Czy zieleń jest dostępna dla tekstu?

Ciemne zielenie tak, jasne i średnie często nie. WCAG 2 AA wymaga kontrastu co najmniej 4,5:1 dla zwykłego tekstu oraz 3:1 dla dużego tekstu i elementów interfejsu. Sprawdzaj każdą parę kolorów, zamiast oceniać na oko, bo średnie zielenie, takie jak #40916C (3,83:1 na bieli), mieszczą się w strefie, w której przechodzą tylko dla dużego tekstu.

Co zieleń komunikuje w projektowaniu stron?

Zieleń najczęściej kojarzy się z naturą, rozwojem, zdrowiem, zrównoważonym podejściem i pieniędzmi, dlatego tak często pojawia się na stronach o wellness, finansach, energii i aktywności na świeżym powietrzu. Znaczenie zmienia się wraz z odcieniem: głęboka leśna zieleń wygląda na solidną i spokojną, a limonkowa na energiczną i nowoczesną. Traktuj to jako konwencje, a nie gwarancje, i testuj na własnych odbiorcach.

Czy używać zieleni na przyciskach CTA?

Możesz, jeśli przycisk wyraźnie wyróżnia się na tle strony, a jego etykieta spełnia wymogi kontrastu. Ciemnozielony przycisk z białym tekstem sprawdza się na jasnych stronach. Na stronie, która jest w większości zielona, lepiej odcina się zwykle przycisk w ciepłym kolorze akcentu. Zajrzyj do naszego przewodnika po kolorystyce sprzyjającej konwersji, żeby zdecydować.

Czy potrzebuję zielonej palety na tryb ciemny?

Nie jest to wymagane, ale ciemnozielone tła są popularnym wyborem same w sobie. Jeśli oferujesz tryb ciemny, nie używaj po prostu jasnej palety: jaskrawe zielenie, które nie przechodzą na bieli, często świetnie wyglądają na niemal czarnej zieleni, na przykład #22C55E na #052E16 daje 6,54:1.

Krótka odpowiedź: na zieloną stronę użyj głębokiej zieleni, takiej jak #166534 lub #2D6A4F, do przycisków, linków i nagłówków, lekko zabarwionej bieli, takiej jak #F6F4EC lub #F0FDF4, na tło, a jaskrawe zielenie, np. #22C55E, zachowaj wyłącznie na ciemne tła lub dekorację. Ciemne zielenie na jasnym tle spełniają próg WCAG AA 4,5:1 dla tekstu. Jaskrawe zielenie na bieli już nie (#22C55E na bieli to 2,28:1).

Poniżej znajdziesz sześć zielonych palet z kodami hex, zmierzonymi współczynnikami kontrastu i rodzajem strony, do którego pasują. Każdy współczynnik obliczono wzorem WCAG na luminancję względną, a dowolną parę możesz sprawdzić samodzielnie w narzędziu do sprawdzania kontrastu kolorów.

Dlaczego zieleń jest trudna na ekranie

Zieleń leży w środku skali luminancji. Średnia zieleń wygląda intensywnie, ale na białym tle jest często zbyt jasna dla tekstu, a na czarnym zbyt ciemna. Dlatego zieleń, która świetnie wygląda w logo, może nie sprawdzić się jako kolor przycisku.

Praktyczna zasada: wybieraj zieleń według współczynnika kontrastu, a nie według tego, jak wygląda na próbniku. Dla zwykłego tekstu celuj w 4,5:1 lub więcej. Dla dużego tekstu (mniej więcej od 24 px zwykłego lub 19 px pogrubionego) oraz elementów interfejsu, takich jak obramowania pól i ikony, minimum to 3:1.

Sześć zielonych palet z kodami hex

Każda paleta zawiera tło, kolor tekstu, akcent do przycisków lub linków oraz współczynnik kontrastu dla najważniejszej pary.

1. Las i krem (edytorskie, outdoor, jedzenie)

Rola	Hex	Para i współczynnik
Tło	#F6F4EC
Tekst i nagłówki	#1B4332	na tle: 10.06:1
Przycisk / link	#2D6A4F	biały tekst na nim: 6.39:1
Jasny panel	#95D5B2	tekst #1B4332 na nim: 6.56:1

Ciepła, spokojna i czytelna. Kremowe tło chroni przed klinicznym wrażeniem. Dobra dla restauracji, sklepów z produktami z gospodarstw, podróży i stron z długimi treściami.

2. Świeża mięta (wellness, kliniki, treści o zdrowiu)

Rola	Hex	Para i współczynnik
Tło	#F0FDF4
Tekst i nagłówki	#14532D	na tle: 8.70:1
Przycisk	#15803D	biały tekst na nim: 5.02:1
Ciemny pas	#052E16	tekst #DCFCE7 na nim: 13.57:1

Jasna i czysta. Zieleń przycisku jest tylko nieco powyżej progu AA, więc etykiety przycisków pisz zwykłą lub grubszą czcionką i nie umieszczaj jej na kolorowych panelach.

3. Szałwia i oliwka (pracownie, wnętrza, rękodzieło)

Rola	Hex	Para i współczynnik
Tło	#E9F5DB
Tekst i nagłówki	#31572C	na tle: 7.33:1
Przycisk	#4F772D	biały tekst na nim: 5.24:1
Wyróżnienie	#90A955	tekst #132A13 na nim: 5.84:1

Przygaszona, ziemista paleta. Sprawdza się w portfolio i markach butikowych, gdzie zieleń ma być obecna, ale nie krzyczeć.

4. Głęboka zieleń w ciemnym motywie (fintech, SaaS, premium)

Rola	Hex	Para i współczynnik
Tło	#081C15
Tekst	#B7E4C7	na tle: 12.58:1
Akcent / linki	#40916C	na tle: 4.62:1
Karta	#1B4332	tekst #95D5B2 na niej: 6.56:1

Na ciemnych tłach średnie zielenie sprawdzają się jako akcenty. Zwróć uwagę, że #40916C przechodzi na #081C15, ale nie przechodzi na bieli (3.83:1), więc nie używaj go w jasnej sekcji.

5. Neonowa limonka na ciemnej zieleni (wydarzenia, twórcy, marki młodzieżowe)

Rola	Hex	Para i współczynnik
Tło	#1A2E05
Nagłówek / przycisk	#A3E635	na tle: 9.69:1
Alternatywna jaskrawa	#22C55E	na #052E16: 6.54:1

Dużo energii i bardzo dobra czytelność, bo jasna limonka leży na ciemnej bazie. Używaj jej oszczędnie: cała strona w limonce szybko męczy wzrok.

6. Morska zieleń (SaaS, health tech, zrównoważony rozwój)

Rola	Hex	Para i współczynnik
Tło	#CCFBF1
Tekst i nagłówki	#134E4A	na tle: 8.41:1
Przycisk	#0F766E	biały tekst na nim: 5.47:1

Przechyla się w stronę niebiesko-zielonego, co wygląda bardziej technicznie i mniej „naturalnie”. Dobry wybór, gdy chcesz zieleni bez organicznego klimatu.

Zielenie, które nie przechodzą testu, i czym je zastąpić

Nie przechodzi	Para	Współczynnik	Zamień na
Jaskrawozielony przycisk	#22C55E z białym tekstem	2.28:1	#15803D z białym tekstem (5.02:1)
Limonkowy link na bieli	#65A30D na bieli	3.09:1	#4D7C0F na bieli (4.99:1)
Średnia zieleń w tekście podstawowym	#40916C na bieli	3.83:1	#2D6A4F na bieli (6.39:1)

Średnie odcienie nadal przekraczają próg 3:1, więc są akceptowalne dla dużych nagłówków, ikon i obramowań, ale nie dla akapitów ani małych linków. Więcej o tym, co może pójść nie tak, znajdziesz w artykule przykłady złego kontrastu kolorów, a o mocniejszych zestawieniach w ogóle w przewodniku palety kolorów o wysokim kontraście.

Jak krok po kroku zbudować własną zieloną paletę

Najpierw ustal rolę zieleni. Czy to kolor marki, kolor akcji, czy tylko akcent? Zieleń używana wyłącznie jako kolor marki może mieć dowolny odcień. Zieleń akcji musi spełniać wymogi kontrastu.
Wybierz ciemną kotwicę. Zacznij od zieleni w okolicach #14532D–#2D6A4F. To będzie kolor nagłówków, linków i przycisków na jasnym tle.
Zabarw tło. Zamiast czystej bieli użyj bardzo jasnej zieleni lub ciepłego kremu, na przykład #F0FDF4 albo #F6F4EC. Po zabarwieniu ponownie sprawdź kontrast tekstu.
Dodaj jeden akcent, który nie jest zielony. Bursztyn lub terakota na tle zieleni oddzielają przyciski na stronach, na których zieleni jest dużo. Sprawdź kontrast etykiety: na przykład tekst #92400E na #FEF3C7 daje 6.37:1.
Przetestuj każdą parę tekst–tło. Przepuść nagłówki, tekst podstawowy, linki, przyciski i placeholdery przez narzędzie do sprawdzania kontrastu. Wszystko poniżej 4,5:1 przy rozmiarze tekstu podstawowego wymaga ciemniejszego lub jaśniejszego odcienia.
Sprawdź stany hover i disabled. Odcienie po najechaniu często wpadają w strefę niewystarczającego kontrastu.
Zapisz paletę jako nazwane tokeny. Nazwy zmiennych, takie jak brand-900, brand-700 i brand-100, sprawiają, że późniejsze zmiany to edycja jednej linijki. Nasz przewodnik po kolorach Tailwind CSS pokazuje ideę skali odcieni, a kilka powyższych kodów hex pochodzi właśnie z takiej skali.

Jaka zieleń do jakiego rodzaju strony

Zrównoważony rozwój, energetyka, organizacje non-profit: las i krem lub szałwia. Prawdziwe przykłady takiego nastroju znajdziesz w naszym szablonie Greenfield Renewables.
Zdrowie i wellness: świeża mięta lub morska zieleń.
Finanse i SaaS: głęboka zieleń w ciemnym motywie z jednym jaskrawym akcentem.
Jedzenie, gospodarstwo, ogród: las i krem z ciepłym akcentem.
Strony twórców i wydarzeń: neonowa limonka na ciemnej zieleni, ograniczona do nagłówków i jednego przycisku.

Lista kontrolna do skopiowania przed publikacją

[ ] Tekst podstawowy ma kontrast co najmniej 4,5:1 względem tła
[ ] Duży tekst i ikony mają co najmniej 3:1
[ ] Etykiety przycisków osiągają 4,5:1 względem wypełnienia przycisku
[ ] Linki odróżniają się od tekstu podstawowego czymś więcej niż samym kolorem (sprawdza się podkreślenie)
[ ] Jaskrawe zielenie pojawiają się tylko na ciemnych tłach lub jako dekoracja
[ ] Poza zielenią jest najwyżej jeden kolor akcentu
[ ] Ciemne sekcje mają własne, przetestowane pary, a nie przerobione z jasnego motywu
[ ] Paleta jest zapisana jako nazwane tokeny, więc można ją zmienić w jednym miejscu

Jeśli nie masz pewności, ilu kolorów potrzebuje cała strona, podstawy znajdziesz w przewodniku po kolorystyce stron internetowych, a użyte tu pojęcia definiuje hasło słownika: paleta kolorów.

Zielona paleta na prawdziwej stronie

Gdy masz już kody hex, potrzebujesz miejsca, w którym je zastosujesz. Bezpłatny plan We.Inc pozwala opublikować do trzech stron z gotowych szablonów, a kreator AI, który tworzy stronę na podstawie opisu, jest dostępny od planu Starter za $20 miesięcznie. Możesz zarejestrować się tutaj, wkleić kody hex tła, tekstu i przycisków do stylów strony, a następnie uruchomić te same testy kontrastu na opublikowanych stronach.

Zacznij za darmo · Bez karty kredytowej

Umair Ali Sadaqat

Założyciel We.Inc

Umair jest założycielem We.Inc. Pisze o tworzeniu stron z AI, agencjach i prowadzeniu studia internetowego.

Chcesz zbudować coś świetnego?

Dołącz do 15,000+ firm, które z We.Inc startują, rosną i automatyzują pracę, wszystko na jednej platformie.