Schematy kolorów stron internetowych: 40 palet na prawdziwych układach stron

Dobry schemat kolorów strony internetowej to jedno spokojne tło dla większości strony, ciemny kolor tekstu z kontrastem co najmniej 4.5:1 i jeden akcent marki zarezerwowany dla przycisków i linków. Oto 40 autorskich schematów na żywych układach stron, każdy z trybem ciemnym, wynikami kontrastu i kodem CSS oraz Tailwind do skopiowania.

Poniżej znajdziesz 40 schematów kolorów, które przygotowaliśmy dla tej strony. Każdy zastosowaliśmy na małej stronie docelowej z sekcją hero, przyciskiem i kartą cennika, żeby można go było ocenić tak, jak zobaczy go odwiedzający, a nie jako rządek próbek. Każdy schemat ma wersję jasną i ciemną, zmierzone współczynniki kontrastu i dwa formaty gotowe do skopiowania: zwykłe zmienne CSS i blok @theme dla Tailwind CSS v4, a do tego wskazówkę, jak zamienić je w tokeny projektowe.

Jak korzystać z tej kolekcji

Jak wybrać schemat kolorów strony

1. Zacznij od koloru marki, a nie od palety

Jeśli firma ma już kolor w logo, to on jest akcentem. Zbuduj wszystko inne wokół niego: tło, kolor tekstu, jaśniejszą powierzchnię dla kart, przygaszony kolor tekstu dla linii drugorzędnych i kolor tekstu, który leży na akcencie. Wybranie najpierw ładnej palety, a potem wciskanie w nią logo, kończy się stronami z dwoma rywalizującymi niebieskimi.

Jeśli firma nie ma jeszcze koloru marki, wybierz go według tego, co odwiedzający ma poczuć w pierwszej kolejności. Głębokie niebieskie i zielone odbierane są jako staranne i ugruntowane, ciepłe czerwienie i pomarańcze jako energetyczne i apetyczne, a przygaszone ziemiste tony jako naturalne i spokojne. To konwencje, nie reguły; hydraulik w kolorze morskim może się wyróżnić właśnie dlatego, że cała konkurencja jest niebieska.

2. Potraktuj podział 60-30-10 jako punkt wyjścia

Reguła 60-30-10 pochodzi z projektowania wnętrz: około 60 procent pokoju to kolor dominujący, 30 procent kolor drugorzędny, a 10 procent akcent. Na stronie internetowej wygląda to tak:

UdziałRola na stronieZmienna w tych schematach
Około 60%Tło strony i duże puste obszary--bg
Około 30%Tekst, karty, panele, stopka, obramowania--text, --surface, --muted
Około 10%Przyciski, linki, stany aktywne, jedno wyróżnienie na ekran--accent, --on-accent

Chodzi o umiar w używaniu akcentu. Jeśli wszystko ma kolor akcentu, nic nie jest wezwaniem do działania. Traktuj te liczby jako kontrolę, a nie pomiar: jeśli zmrużysz oczy, patrząc na stronę, a akcent zajmuje ćwierć ekranu, robi za dużo.

3. Sprawdź kontrast, zanim się zakochasz

Wytyczne dotyczące dostępności treści internetowych (WCAG 2.2) określają progi kontrastu, z których korzysta większość przepisów i audytów dostępności:

CoMinimum (AA)Rozszerzony (AAA)Kryterium WCAG
Tekst główny4.5:17:11.4.3 i 1.4.6
Duży tekst (co najmniej 18pt lub 14pt pogrubiony)3:14.5:11.4.3 i 1.4.6
Przyciski, obramowania pól, ikony niosące znaczenie3:1 względem tego, co jest obokBrak poziomu AAA1.4.11

Każdy schemat na tej stronie osiąga 4.5:1 dla tekstu głównego, dla tekstu przygaszonego i dla etykiety przycisku na akcencie, zarówno w wersji jasnej, jak i ciemnej. Reguła dla etykiet przycisków jest ostrzejsza, niż wymaga WCAG dla dużych pogrubionych etykiet, ale tekst na przyciskach bywa mały, więc trzymaliśmy go na poziomie tekstu głównego.

Współczynniki obliczyliśmy wzorem WCAG na luminancję względną, a nie szacowaliśmy na oko. Jeśli zmienisz wartość hex, sprawdź ją ponownie w sprawdzarce kontrastu kolorów. Oto to samo obliczenie w JavaScripcie:

// WCAG 2.x contrast ratio between two hex colors
function luminance(hex) {
  const [r, g, b] = [0, 2, 4].map((i) => {
    const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrast(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}

contrast("#141a2e", "#f7f8fc"); // 16.26, AAA

4. Zaprojektuj wersję ciemną celowo

Odwrócenie jasnej palety rzadko się sprawdza. Wersje ciemne w tej kolekcji trzymają się czterech zasad:

5. Przetestuj go na prawdziwym układzie

Kolory, które jako próbki wyglądają na zrównoważone, na całej stronie potrafią przytłaczać, dlatego każdy schemat poniżej pokazujemy na sekcji hero i karcie cennika. Zanim się zdecydujesz, nałóż schemat na własną stronę główną, obejrzyj ją na telefonie na zewnątrz i sprawdź, czy główny przycisk to pierwsze, co wyłapuje oko.

Wszystkie 40 schematów w skrócie

Kolumny kontrastu pokazują jasny / ciemny. Kliknij nazwę, aby przejść do podglądu.

SchematGrupaAkcentKontrast tekstuKontrast przycisku
Midnight LaunchSaaS i technologia#3b4fe016.3 / 16.06.2 / 4.6
Signal MintSaaS i technologia#0e7c6615.4 / 15.75.1 / 11.5
Graphite VoltSaaS i technologia#c43d1616.2 / 15.95.2 / 6.2
Cloud IrisSaaS i technologia#6a3fd115.8 / 16.16.5 / 4.7
Dev ConsoleSaaS i technologia#13795b16.7 / 15.75.4 / 11.2
Ledger NavyFinanse i prawo#1d4f9115.8 / 15.98.1 / 6.0
Vault GreenFinanse i prawo#1f6b3e15.0 / 15.76.5 / 9.5
Counsel OxbloodFinanse i prawo#8a2a2b16.7 / 16.18.6 / 5.3
Steady SlateFinanse i prawo#3e5f7d15.0 / 15.96.7 / 6.6
Brass AuditFinanse i prawo#8a641416.1 / 15.75.4 / 9.6
Clinic AquaZdrowie i wellness#0b728514.2 / 15.85.6 / 9.8
Calm SageZdrowie i wellness#4f7a3a14.7 / 15.85.0 / 8.6
Soft LavenderZdrowie i wellness#7445b015.2 / 16.16.5 / 5.1
Dental BrightZdrowie i wellness#1769c215.1 / 16.05.5 / 6.3
Studio ClayZdrowie i wellness#a4502a15.5 / 15.95.6 / 6.6
Tomato TableGastronomia i hotelarstwo#c0381f16.5 / 16.05.5 / 5.8
Espresso BarGastronomia i hotelarstwo#7a4a2a15.6 / 15.87.4 / 7.0
Citrus MarketGastronomia i hotelarstwo#b45a0015.8 / 15.84.8 / 8.1
Bistro OliveGastronomia i hotelarstwo#5c6b1f15.1 / 15.65.9 / 10.5
Berry BakeryGastronomia i hotelarstwo#b0285a16.2 / 16.16.4 / 5.4
Gallery InkTwórczość i portfolio#e0301e18.1 / 16.04.5 / 5.6
Poster CobaltTwórczość i portfolio#2340d816.6 / 16.17.5 / 4.7
Neon StudioTwórczość i portfolio#c0129a17.1 / 16.05.5 / 5.8
Paper SketchTwórczość i portfolio#b5462a13.9 / 16.05.4 / 6.1
Film TealTwórczość i portfolio#00756e15.0 / 15.75.6 / 11.6
Hardhat OrangeLokalne usługi i prace domowe#c4520a16.1 / 15.94.6 / 7.3
Pipeline BlueLokalne usługi i prace domowe#0b5cad15.8 / 15.96.7 / 6.5
Roofline CharcoalLokalne usługi i prace domowe#b3261e15.6 / 16.06.5 / 5.4
Fresh LawnLokalne usługi i prace domowe#2f7a1f15.5 / 15.75.3 / 9.9
Spark ElectricLokalne usługi i prace domowe#a15c0016.7 / 15.85.2 / 8.7
Forest TrailNatura i outdoor#2d6a4f14.8 / 15.86.4 / 8.7
Desert DuskNatura i outdoor#b04a2815.1 / 15.95.5 / 6.3
Glacier LakeNatura i outdoor#14708f15.0 / 15.85.6 / 8.8
Moss and StoneNatura i outdoor#5a6b3a14.7 / 15.95.8 / 8.5
Coastal DuneNatura i outdoor#1f6f8b14.6 / 15.85.7 / 8.3
Noir GoldLuksus i moda#86651a17.3 / 15.75.4 / 9.4
Velvet PlumLuksus i moda#6d216016.5 / 16.010.3 / 5.8
Ivory EmeraldLuksus i moda#0f5f4615.7 / 15.77.7 / 11.2
Rose AtelierLuksus i moda#9c3d4a15.9 / 16.16.6 / 5.6
Onyx SapphireLuksus i moda#24409a17.2 / 16.09.2 / 4.9
Pokazano wszystkie 40

Schematy kolorów dla SaaS i technologii

Strony produktowe potrzebują wyraźnego akcentu dla głównej akcji i spokojnych neutralnych barw dla gęstych ekranów. Te pięć trzyma tło blisko bieli i wydaje kolor na przyciski i linki.

Midnight Launch

MidnightCennik · Kontakt

Notatki o wydaniu, które Twój zespół naprawdę czyta

Przygaszony tekst w kolorze #586eb6.

Zacznij

Starter

$19

Wybierz plan
KolorJasnyCiemny
Tło#f7f8fc#10121b
Powierzchnia#ffffff#1a1b29
Tekst#141a2e#ededf3
Przygaszony#586eb6#81859c
Akcent#3b4fe0#5869e5
Na akcencie#ffffff#ffffff
Kontrast
Tekst16.26:1 AAA16.02:1 AAA
Przygaszony4.58:1 AA5.13:1 AA
Przycisk6.21:1 AA4.60:1 AA

Zmienne CSS 

:root {
  --bg: #f7f8fc;
  --surface: #ffffff;
  --text: #141a2e;
  --muted: #586eb6;
  --accent: #3b4fe0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1b29;
    --text: #ededf3;
    --muted: #81859c;
    --accent: #5869e5;
    --on-accent: #ffffff;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Signal Mint

SignalCennik · Kontakt

Alerty o dostępności, które budzą właściwą osobę

Przygaszony tekst w kolorze #357e70.

Zacznij

Zespół

$29

Wybierz plan
KolorJasnyCiemny
Tło#f4faf8#101b19
Powierzchnia#ffffff#1a2926
Tekst#0f2420#edf3f2
Przygaszony#357e70#7e9a95
Akcent#0e7c66#55e7ca
Na akcencie#ffffff#101b19
Kontrast
Tekst15.37:1 AAA15.68:1 AAA
Przygaszony4.55:1 AA5.82:1 AA
Przycisk5.13:1 AA11.46:1 AAA

Zmienne CSS 

:root {
  --bg: #f4faf8;
  --surface: #ffffff;
  --text: #0f2420;
  --muted: #357e70;
  --accent: #0e7c66;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b19;
    --surface: #1a2926;
    --text: #edf3f2;
    --muted: #7e9a95;
    --accent: #55e7ca;
    --on-accent: #101b19;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Graphite Volt

GraphiteCennik · Kontakt

Faktury wysłane, zanim wystygnie kawa

Przygaszony tekst w kolorze #6e6e81.

Zacznij

Solo

$12

Wybierz plan
KolorJasnyCiemny
Tło#f5f5f2#1b1310
Powierzchnia#ffffff#291d1a
Tekst#18181a#f3eeed
Przygaszony#6e6e81#9a857e
Akcent#c43d16#e77655
Na akcencie#ffffff#1b1310
Kontrast
Tekst16.23:1 AAA15.92:1 AAA
Przygaszony4.57:1 AA5.26:1 AA
Przycisk5.22:1 AA6.21:1 AA

Zmienne CSS 

:root {
  --bg: #f5f5f2;
  --surface: #ffffff;
  --text: #18181a;
  --muted: #6e6e81;
  --accent: #c43d16;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #e77655;
    --on-accent: #1b1310;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Cloud Iris

CloudCennik · Kontakt

Jedna skrzynka na każde pytanie klienta

Przygaszony tekst w kolorze #7367b2.

Zacznij

Wzrost

$49

Wybierz plan
KolorJasnyCiemny
Tło#f8f7fd#13101b
Powierzchnia#ffffff#1e1a29
Tekst#1e1a33#eeedf3
Przygaszony#7367b2#89819c
Akcent#6a3fd1#8c6bdc
Na akcencie#ffffff#13101b
Kontrast
Tekst15.76:1 AAA16.14:1 AAA
Przygaszony4.57:1 AA5.09:1 AA
Przycisk6.47:1 AA4.70:1 AA

Zmienne CSS 

:root {
  --bg: #f8f7fd;
  --surface: #ffffff;
  --text: #1e1a33;
  --muted: #7367b2;
  --accent: #6a3fd1;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13101b;
    --surface: #1e1a29;
    --text: #eeedf3;
    --muted: #89819c;
    --accent: #8c6bdc;
    --on-accent: #13101b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dev Console

DevCennik · Kontakt

Podglądy wdrożeń dla każdego pull requesta

Przygaszony tekst w kolorze #537768.

Zacznij

Pro

$24

Wybierz plan
KolorJasnyCiemny
Tło#f3f6f4#101b18
Powierzchnia#ffffff#1a2924
Tekst#101714#edf3f1
Przygaszony#537768#7e9a92
Akcent#13795b#58e5bb
Na akcencie#ffffff#101b18
Kontrast
Tekst16.71:1 AAA15.68:1 AAA
Przygaszony4.59:1 AA5.81:1 AA
Przycisk5.37:1 AA11.19:1 AAA

Zmienne CSS 

:root {
  --bg: #f3f6f4;
  --surface: #ffffff;
  --text: #101714;
  --muted: #537768;
  --accent: #13795b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a92;
    --accent: #58e5bb;
    --on-accent: #101b18;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Schematy kolorów dla finansów i prawa

Banki, księgowi i kancelarie prawne są oceniani przez pryzmat zaufania, więc te schematy używają głębokich, mało nasyconych akcentów i bardzo skromnych ozdobników. Akcent wciąż musi działać jako przycisk, dlatego każdy osiąga 4.5:1 ze swoją etykietą.

Ledger Navy

LedgerCennik · Kontakt

Księgowość dla firm od pięciu do pięćdziesięciu osób

Przygaszony tekst w kolorze #3a70c5.

Zacznij

Zamknięcie miesiąca

$240

Wybierz plan
KolorJasnyCiemny
Tło#f6f7f9#10151b
Powierzchnia#ffffff#1a2029
Tekst#0f1d33#edeff3
Przygaszony#3a70c5#7e8a9a
Akcent#1d4f91#5e95df
Na akcencie#ffffff#10151b
Kontrast
Tekst15.75:1 AAA15.93:1 AAA
Przygaszony4.55:1 AA5.23:1 AA
Przycisk8.14:1 AAA5.97:1 AA

Zmienne CSS 

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #0f1d33;
  --muted: #3a70c5;
  --accent: #1d4f91;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2029;
    --text: #edeff3;
    --muted: #7e8a9a;
    --accent: #5e95df;
    --on-accent: #10151b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Vault Green

VaultCennik · Kontakt

Cele oszczędnościowe, które realizują się same

Przygaszony tekst w kolorze #417b59.

Zacznij

Plus

$6

Wybierz plan
KolorJasnyCiemny
Tło#f5f7f3#101b15
Powierzchnia#ffffff#1a2920
Tekst#13241a#edf3ef
Przygaszony#417b59#7e9a8a
Akcent#1f6b3e#69d394
Na akcencie#ffffff#101b15
Kontrast
Tekst15.04:1 AAA15.69:1 AAA
Przygaszony4.64:1 AA5.78:1 AA
Przycisk6.50:1 AA9.54:1 AAA

Zmienne CSS 

:root {
  --bg: #f5f7f3;
  --surface: #ffffff;
  --text: #13241a;
  --muted: #417b59;
  --accent: #1f6b3e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b15;
    --surface: #1a2920;
    --text: #edf3ef;
    --muted: #7e9a8a;
    --accent: #69d394;
    --on-accent: #101b15;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Counsel Oxblood

CounselCennik · Kontakt

Porady z prawa pracy prostym językiem

Przygaszony tekst w kolorze #a65c45.

Zacznij

Pierwsza konsultacja

$150

Wybierz plan
KolorJasnyCiemny
Tło#faf7f5#1b1010
Powierzchnia#ffffff#291a1a
Tekst#24140f#f3eded
Przygaszony#a65c45#9a7e7f
Akcent#8a2a2b#d26a6b
Na akcencie#ffffff#1b1010
Kontrast
Tekst16.66:1 AAA16.09:1 AAA
Przygaszony4.65:1 AA5.02:1 AA
Przycisk8.58:1 AAA5.33:1 AA

Zmienne CSS 

:root {
  --bg: #faf7f5;
  --surface: #ffffff;
  --text: #24140f;
  --muted: #a65c45;
  --accent: #8a2a2b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1010;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a7e7f;
    --accent: #d26a6b;
    --on-accent: #1b1010;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Steady Slate

SteadyCennik · Kontakt

Wypłaty realizowane tego samego dnia każdego miesiąca

Przygaszony tekst w kolorze #59718d.

Zacznij

Podstawowy

$39

Wybierz plan
KolorJasnyCiemny
Tło#f4f6f8#12161a
Powierzchnia#ffffff#1c2127
Tekst#1a2129#edf0f3
Przygaszony#59718d#7e8d9a
Akcent#3e5f7d#7da0bf
Na akcencie#ffffff#12161a
Kontrast
Tekst14.99:1 AAA15.89:1 AAA
Przygaszony4.65:1 AA5.33:1 AA
Przycisk6.69:1 AA6.62:1 AA

Zmienne CSS 

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1a2129;
  --muted: #59718d;
  --accent: #3e5f7d;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161a;
    --surface: #1c2127;
    --text: #edf0f3;
    --muted: #7e8d9a;
    --accent: #7da0bf;
    --on-accent: #12161a;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Brass Audit

BrassCennik · Kontakt

Zeznania podatkowe przygotowane i złożone do kwietnia

Przygaszony tekst w kolorze #847048.

Zacznij

Osobisty

$180

Wybierz plan
KolorJasnyCiemny
Tło#fbf9f4#1b1810
Powierzchnia#ffffff#29241a
Tekst#211c12#f3f1ed
Przygaszony#847048#9a917e
Akcent#8a6414#e6b856
Na akcencie#ffffff#1b1810
Kontrast
Tekst16.10:1 AAA15.71:1 AAA
Przygaszony4.54:1 AA5.68:1 AA
Przycisk5.37:1 AA9.58:1 AAA

Zmienne CSS 

:root {
  --bg: #fbf9f4;
  --surface: #ffffff;
  --text: #211c12;
  --muted: #847048;
  --accent: #8a6414;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a917e;
    --accent: #e6b856;
    --on-accent: #1b1810;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Schematy kolorów dla zdrowia i wellness

Przychodnie, terapeuci i studia chcą sprawiać wrażenie czystych i budzących zaufanie. Dominują chłodne błękity i zielenie, z jedną ciepłą opcją w kolorze gliny dla spa i gabinetów fizjoterapii, które chcą wyglądać mniej klinicznie.

Clinic Aqua

ClinicCennik · Kontakt

Wizyty u lekarza rodzinnego jeszcze w tym tygodniu

Przygaszony tekst w kolorze #267c8b.

Zacznij

Bez zapisów

$0

Wybierz plan
KolorJasnyCiemny
Tło#f3f9fa#10191b
Powierzchnia#ffffff#1a2629
Tekst#0d2a2f#edf2f3
Przygaszony#267c8b#7e969a
Akcent#0b7285#55d0e7
Na akcencie#ffffff#10191b
Kontrast
Tekst14.21:1 AAA15.80:1 AAA
Przygaszony4.55:1 AA5.71:1 AA
Przycisk5.59:1 AA9.82:1 AAA

Zmienne CSS 

:root {
  --bg: #f3f9fa;
  --surface: #ffffff;
  --text: #0d2a2f;
  --muted: #267c8b;
  --accent: #0b7285;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10191b;
    --surface: #1a2629;
    --text: #edf2f3;
    --muted: #7e969a;
    --accent: #55d0e7;
    --on-accent: #10191b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Calm Sage

CalmCennik · Kontakt

Zajęcia z oddychania z prowadzącym, rano i wieczorem

Przygaszony tekst w kolorze #5a7a4d.

Zacznij

Wejście jednorazowe

$15

Wybierz plan
KolorJasnyCiemny
Tło#f6f8f3#141a11
Powierzchnia#ffffff#1f271b
Tekst#1c2618#eff3ed
Przygaszony#5a7a4d#889a7e
Akcent#4f7a3a#92c17c
Na akcencie#ffffff#141a11
Kontrast
Tekst14.66:1 AAA15.78:1 AAA
Przygaszony4.54:1 AA5.88:1 AA
Przycisk5.03:1 AA8.55:1 AAA

Zmienne CSS 

:root {
  --bg: #f6f8f3;
  --surface: #ffffff;
  --text: #1c2618;
  --muted: #5a7a4d;
  --accent: #4f7a3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141a11;
    --surface: #1f271b;
    --text: #eff3ed;
    --muted: #889a7e;
    --accent: #92c17c;
    --on-accent: #141a11;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Soft Lavender

SoftCennik · Kontakt

Sesje terapeutyczne z cichego pokoju w domu

Przygaszony tekst w kolorze #7d65a8.

Zacznij

Pojedyncza sesja

$90

Wybierz plan
KolorJasnyCiemny
Tło#f9f7fc#15101b
Powierzchnia#ffffff#201a28
Tekst#251d33#efedf3
Przygaszony#7d65a8#8d819c
Akcent#7445b0#9974c8
Na akcencie#ffffff#15101b
Kontrast
Tekst15.16:1 AAA16.11:1 AAA
Przygaszony4.59:1 AA5.13:1 AA
Przycisk6.52:1 AA5.07:1 AA

Zmienne CSS 

:root {
  --bg: #f9f7fc;
  --surface: #ffffff;
  --text: #251d33;
  --muted: #7d65a8;
  --accent: #7445b0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15101b;
    --surface: #201a28;
    --text: #efedf3;
    --muted: #8d819c;
    --accent: #9974c8;
    --on-accent: #15101b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dental Bright

DentalCennik · Kontakt

Higienizacje, przeglądy i godziny wieczorne

Przygaszony tekst w kolorze #3373bd.

Zacznij

Badanie nowego pacjenta

$79

Wybierz plan
KolorJasnyCiemny
Tło#f4f8fd#10151b
Powierzchnia#ffffff#1a2129
Tekst#0f2238#edf0f3
Przygaszony#3373bd#7e8c9a
Akcent#1769c2#559be7
Na akcencie#ffffff#10151b
Kontrast
Tekst15.08:1 AAA16.03:1 AAA
Przygaszony4.55:1 AA5.33:1 AA
Przycisk5.47:1 AA6.31:1 AA

Zmienne CSS 

:root {
  --bg: #f4f8fd;
  --surface: #ffffff;
  --text: #0f2238;
  --muted: #3373bd;
  --accent: #1769c2;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559be7;
    --on-accent: #10151b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Studio Clay

StudioCennik · Kontakt

Masaż i fizjoterapia pod jednym dachem

Przygaszony tekst w kolorze #9e6042.

Zacznij

60 minut

$95

Wybierz plan
KolorJasnyCiemny
Tło#fbf6f2#1b1410
Powierzchnia#ffffff#291e1a
Tekst#2b1a12#f3efed
Przygaszony#9e6042#9a877e
Akcent#a4502a#d78865
Na akcencie#ffffff#1b1410
Kontrast
Tekst15.54:1 AAA15.93:1 AAA
Przygaszony4.65:1 AA5.32:1 AA
Przycisk5.59:1 AA6.58:1 AA

Zmienne CSS 

:root {
  --bg: #fbf6f2;
  --surface: #ffffff;
  --text: #2b1a12;
  --muted: #9e6042;
  --accent: #a4502a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291e1a;
    --text: #f3efed;
    --muted: #9a877e;
    --accent: #d78865;
    --on-accent: #1b1410;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Schematy kolorów dla gastronomii i hotelarstwa

Restauracje i sklepy spożywcze mogą sobie pozwolić na cieplejsze, głośniejsze akcenty, bo apetyt reaguje na ciepło. Tła są lekko kremowe, żeby zdjęcia jedzenia nie wyglądały chłodno na czystej bieli.

Tomato Table

TomatoCennik · Kontakt

Pizza z pieca opalanego drewnem i długi stół dla przyjaciół

Przygaszony tekst w kolorze #b35944.

Zacznij

Rodzinna uczta

$58

Wybierz plan
KolorJasnyCiemny
Tło#fff8f3#1b1210
Powierzchnia#ffffff#291c1a
Tekst#2a1510#f3eeed
Przygaszony#b35944#9a837e
Akcent#c0381f#e46e58
Na akcencie#ffffff#1b1210
Kontrast
Tekst16.46:1 AAA16.01:1 AAA
Przygaszony4.51:1 AA5.19:1 AA
Przycisk5.49:1 AA5.85:1 AA

Zmienne CSS 

:root {
  --bg: #fff8f3;
  --surface: #ffffff;
  --text: #2a1510;
  --muted: #b35944;
  --accent: #c0381f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291c1a;
    --text: #f3eeed;
    --muted: #9a837e;
    --accent: #e46e58;
    --on-accent: #1b1210;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Espresso Bar

EspressoCennik · Kontakt

Ziarna single origin palone w każdy wtorek

Przygaszony tekst w kolorze #916548.

Zacznij

Torebka 340 g

$18

Wybierz plan
KolorJasnyCiemny
Tło#f8f3ee#1b1510
Powierzchnia#fffdfa#29201a
Tekst#241912#f3efed
Przygaszony#916548#9a897e
Akcent#7a4a2a#cd956f
Na akcencie#ffffff#1b1510
Kontrast
Tekst15.58:1 AAA15.83:1 AAA
Przygaszony4.58:1 AA5.38:1 AA
Przycisk7.39:1 AAA7.00:1 AAA

Zmienne CSS 

:root {
  --bg: #f8f3ee;
  --surface: #fffdfa;
  --text: #241912;
  --muted: #916548;
  --accent: #7a4a2a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1510;
    --surface: #29201a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #cd956f;
    --on-accent: #1b1510;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Citrus Market

CitrusCennik · Kontakt

Skrzynki owoców dowożone w piątkowe poranki

Przygaszony tekst w kolorze #82732f.

Zacznij

Mała skrzynka

$32

Wybierz plan
KolorJasnyCiemny
Tło#fffbef#1b1610
Powierzchnia#ffffff#29211a
Tekst#24200d#f3f0ed
Przygaszony#82732f#9a8c7e
Akcent#b45a00#e79e55
Na akcencie#ffffff#1b1610
Kontrast
Tekst15.77:1 AAA15.83:1 AAA
Przygaszony4.57:1 AA5.50:1 AA
Przycisk4.77:1 AA8.06:1 AAA

Zmienne CSS 

:root {
  --bg: #fffbef;
  --surface: #ffffff;
  --text: #24200d;
  --muted: #82732f;
  --accent: #b45a00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29211a;
    --text: #f3f0ed;
    --muted: #9a8c7e;
    --accent: #e79e55;
    --on-accent: #1b1610;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Bistro Olive

BistroCennik · Kontakt

Krótkie menu, które zmienia się z sezonem

Przygaszony tekst w kolorze #6c743f.

Zacznij

Menu degustacyjne

$65

Wybierz plan
KolorJasnyCiemny
Tło#f7f6ee#191b10
Powierzchnia#ffffff#26291a
Tekst#1f2112#f2f3ed
Przygaszony#6c743f#959a7e
Akcent#5c6b1f#bed369
Na akcencie#ffffff#191b10
Kontrast
Tekst15.08:1 AAA15.61:1 AAA
Przygaszony4.60:1 AA5.97:1 AA
Przycisk5.87:1 AA10.54:1 AAA

Zmienne CSS 

:root {
  --bg: #f7f6ee;
  --surface: #ffffff;
  --text: #1f2112;
  --muted: #6c743f;
  --accent: #5c6b1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191b10;
    --surface: #26291a;
    --text: #f2f3ed;
    --muted: #959a7e;
    --accent: #bed369;
    --on-accent: #191b10;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Berry Bakery

BerryCennik · Kontakt

Torty warstwowe zamawiane z dwudniowym wyprzedzeniem

Przygaszony tekst w kolorze #b74e6a.

Zacznij

Tort sześciocalowy

$42

Wybierz plan
KolorJasnyCiemny
Tło#fdf5f7#1b1014
Powierzchnia#ffffff#291a1f
Tekst#2c1219#f3edef
Przygaszony#b74e6a#9a7e89
Akcent#b0285a#db618e
Na akcencie#ffffff#1b1014
Kontrast
Tekst16.21:1 AAA16.07:1 AAA
Przygaszony4.54:1 AA5.06:1 AA
Przycisk6.37:1 AA5.41:1 AA

Zmienne CSS 

:root {
  --bg: #fdf5f7;
  --surface: #ffffff;
  --text: #2c1219;
  --muted: #b74e6a;
  --accent: #b0285a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1014;
    --surface: #291a1f;
    --text: #f3edef;
    --muted: #9a7e89;
    --accent: #db618e;
    --on-accent: #1b1014;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Schematy kolorów dla twórczości i portfolio

Portfolio i studia mogą bardziej zaryzykować. Te schematy łączą prawie czarny tekst z jednym mocnym akcentem, jak na drukowanym plakacie, a resztę koloru zostawiają samym pracom.

Poster Cobalt

PosterCennik · Kontakt

Sitodruki w nakładach po pięćdziesiąt sztuk

Przygaszony tekst w kolorze #7d6a6a.

Zacznij

Wydruk A2

$70

Wybierz plan
KolorJasnyCiemny
Tło#f6f4ef#10121b
Powierzchnia#ffffff#1a1c29
Tekst#151515#edeef3
Przygaszony#7d6a6a#7e839a
Akcent#2340d8#6077e6
Na akcencie#ffffff#10121b
Kontrast
Tekst16.61:1 AAA16.12:1 AAA
Przygaszony4.61:1 AA4.98:1 AA
Przycisk7.51:1 AAA4.69:1 AA

Zmienne CSS 

:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #151515;
  --muted: #7d6a6a;
  --accent: #2340d8;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1c29;
    --text: #edeef3;
    --muted: #7e839a;
    --accent: #6077e6;
    --on-accent: #10121b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Neon Studio

NeonCennik · Kontakt

Motion graphics na premiery muzyczne

Przygaszony tekst w kolorze #785ec7.

Zacznij

Lyric video

$900

Wybierz plan
KolorJasnyCiemny
Tło#f7f5ff#1b1019
Powierzchnia#ffffff#291a25
Tekst#160f2b#f3edf1
Przygaszony#785ec7#9a7e94
Akcent#c0129a#e755c7
Na akcencie#ffffff#1b1019
Kontrast
Tekst17.11:1 AAA16.03:1 AAA
Przygaszony4.61:1 AA5.10:1 AA
Przycisk5.53:1 AA5.75:1 AA

Zmienne CSS 

:root {
  --bg: #f7f5ff;
  --surface: #ffffff;
  --text: #160f2b;
  --muted: #785ec7;
  --accent: #c0129a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a25;
    --text: #f3edf1;
    --muted: #9a7e94;
    --accent: #e755c7;
    --on-accent: #1b1019;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Paper Sketch

PaperCennik · Kontakt

Ilustrowane mapy miasteczek i szlaków

Przygaszony tekst w kolorze #7b6f5e.

Zacznij

Mapa na zamówienie

$650

Wybierz plan
KolorJasnyCiemny
Tło#f9f6ef#1b1210
Powierzchnia#fffdf8#291d1a
Tekst#2a2620#f3eeed
Przygaszony#7b6f5e#9a847e
Akcent#b5462a#da7a62
Na akcencie#ffffff#1b1210
Kontrast
Tekst13.93:1 AAA16.01:1 AAA
Przygaszony4.55:1 AA5.24:1 AA
Przycisk5.42:1 AA6.09:1 AA

Zmienne CSS 

:root {
  --bg: #f9f6ef;
  --surface: #fffdf8;
  --text: #2a2620;
  --muted: #7b6f5e;
  --accent: #b5462a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a847e;
    --accent: #da7a62;
    --on-accent: #1b1210;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Film Teal

FilmCennik · Kontakt

Krótkie dokumenty dla organizacji non profit

Przygaszony tekst w kolorze #45767d.

Zacznij

Trzyminutowy film

$3,200

Wybierz plan
KolorJasnyCiemny
Tło#f2f6f6#101b1a
Powierzchnia#ffffff#1a2928
Tekst#142224#edf3f2
Przygaszony#45767d#7e9a98
Akcent#00756e#55e7de
Na akcencie#ffffff#101b1a
Kontrast
Tekst15.02:1 AAA15.67:1 AAA
Przygaszony4.66:1 AA5.83:1 AA
Przycisk5.57:1 AA11.62:1 AAA

Zmienne CSS 

:root {
  --bg: #f2f6f6;
  --surface: #ffffff;
  --text: #142224;
  --muted: #45767d;
  --accent: #00756e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b1a;
    --surface: #1a2928;
    --text: #edf3f2;
    --muted: #7e9a98;
    --accent: #55e7de;
    --on-accent: #101b1a;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Schematy kolorów dla lokalnych usług i prac domowych

Hydraulicy, dekarze, elektrycy i ogrodnicy potrzebują przycisku telefonu, który wyróżnia się na ekranie telefonu w świetle dziennym. Każdy akcent tutaj to dobrze widoczny kolor z etykietą, która pozostaje czytelna.

Hardhat Orange

HardhatCennik · Kontakt

Remonty kuchni i łazienek od początku do końca

Przygaszony tekst w kolorze #736f62.

Zacznij

Wizyta na miejscu

Za darmo

Wybierz plan
KolorJasnyCiemny
Tło#f8f6f2#1b1410
Powierzchnia#ffffff#291f1a
Tekst#1b1a17#f3efed
Przygaszony#736f62#9a897e
Akcent#c4520a#e78e55
Na akcencie#ffffff#1b1410
Kontrast
Tekst16.12:1 AAA15.93:1 AAA
Przygaszony4.66:1 AA5.42:1 AA
Przycisk4.61:1 AA7.28:1 AAA

Zmienne CSS 

:root {
  --bg: #f8f6f2;
  --surface: #ffffff;
  --text: #1b1a17;
  --muted: #736f62;
  --accent: #c4520a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291f1a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #e78e55;
    --on-accent: #1b1410;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Pipeline Blue

PipelineCennik · Kontakt

Pęknięta rura? Hydraulik pod Twoimi drzwiami jeszcze dziś wieczorem

Przygaszony tekst w kolorze #3c71b1.

Zacznij

Wyjazd

$89

Wybierz plan
KolorJasnyCiemny
Tło#f3f6fa#10161b
Powierzchnia#ffffff#1a2129
Tekst#0f1c2c#edf0f3
Przygaszony#3c71b1#7e8c9a
Akcent#0b5cad#559ee7
Na akcencie#ffffff#10161b
Kontrast
Tekst15.84:1 AAA15.93:1 AAA
Przygaszony4.62:1 AA5.30:1 AA
Przycisk6.67:1 AA6.45:1 AA

Zmienne CSS 

:root {
  --bg: #f3f6fa;
  --surface: #ffffff;
  --text: #0f1c2c;
  --muted: #3c71b1;
  --accent: #0b5cad;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559ee7;
    --on-accent: #10161b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Roofline Charcoal

RooflineCennik · Kontakt

Naprawy dachów ze zdjęciami każdego gontu

Przygaszony tekst w kolorze #7f6c6c.

Zacznij

Inspekcja

$120

Wybierz plan
KolorJasnyCiemny
Tło#f5f5f5#1b1110
Powierzchnia#ffffff#291a1a
Tekst#1c1c1c#f3eded
Przygaszony#7f6c6c#9a807e
Akcent#b3261e#e36059
Na akcencie#ffffff#1b1110
Kontrast
Tekst15.63:1 AAA16.00:1 AAA
Przygaszony4.52:1 AA5.08:1 AA
Przycisk6.54:1 AA5.36:1 AA

Zmienne CSS 

:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --text: #1c1c1c;
  --muted: #7f6c6c;
  --accent: #b3261e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1110;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a807e;
    --accent: #e36059;
    --on-accent: #1b1110;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Fresh Lawn

FreshCennik · Kontakt

Cotygodniowe koszenie i wiosenne porządki

Przygaszony tekst w kolorze #4f7c47.

Zacznij

Cotygodniowa wizyta

$45

Wybierz plan
KolorJasnyCiemny
Tło#f4f8f1#121b10
Powierzchnia#ffffff#1c291a
Tekst#152113#eef3ed
Przygaszony#4f7c47#839a7e
Akcent#2f7a1f#79d864
Na akcencie#ffffff#121b10
Kontrast
Tekst15.53:1 AAA15.70:1 AAA
Przygaszony4.54:1 AA5.79:1 AA
Przycisk5.35:1 AA9.93:1 AAA

Zmienne CSS 

:root {
  --bg: #f4f8f1;
  --surface: #ffffff;
  --text: #152113;
  --muted: #4f7c47;
  --accent: #2f7a1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121b10;
    --surface: #1c291a;
    --text: #eef3ed;
    --muted: #839a7e;
    --accent: #79d864;
    --on-accent: #121b10;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Spark Electric

SparkCennik · Kontakt

Wymiana rozdzielnic i montaż ładowarek EV

Przygaszony tekst w kolorze #737359.

Zacznij

Montaż ładowarki

$650

Wybierz plan
KolorJasnyCiemny
Tło#fbfaf2#1b1610
Powierzchnia#ffffff#29221a
Tekst#1a1a14#f3f0ed
Przygaszony#737359#9a8e7e
Akcent#a15c00#e7a855
Na akcencie#ffffff#1b1610
Kontrast
Tekst16.69:1 AAA15.83:1 AAA
Przygaszony4.64:1 AA5.60:1 AA
Przycisk5.19:1 AA8.67:1 AAA

Zmienne CSS 

:root {
  --bg: #fbfaf2;
  --surface: #ffffff;
  --text: #1a1a14;
  --muted: #737359;
  --accent: #a15c00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29221a;
    --text: #f3f0ed;
    --muted: #9a8e7e;
    --accent: #e7a855;
    --on-accent: #1b1610;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Schematy kolorów dla natury i outdooru

Marki outdoorowe, gospodarstwa, organizatorzy wycieczek i produkty eko. Ziemiste akcenty na złamanej bieli, z trybami ciemnymi, które przypominają zmierzch, a nie edytor kodu.

Forest Trail

ForestCennik · Kontakt

Wędrówki z przewodnikiem dla małych grup

Przygaszony tekst w kolorze #4a7958.

Zacznij

Pół dnia

$55

Wybierz plan
KolorJasnyCiemny
Tło#f3f6f2#111a16
Powierzchnia#ffffff#1a2822
Tekst#16241a#edf3f0
Przygaszony#4a7958#7e9a8e
Akcent#2d6a4f#77c5a3
Na akcencie#ffffff#111a16
Kontrast
Tekst14.81:1 AAA15.79:1 AAA
Przygaszony4.63:1 AA5.83:1 AA
Przycisk6.39:1 AA8.71:1 AAA

Zmienne CSS 

:root {
  --bg: #f3f6f2;
  --surface: #ffffff;
  --text: #16241a;
  --muted: #4a7958;
  --accent: #2d6a4f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111a16;
    --surface: #1a2822;
    --text: #edf3f0;
    --muted: #7e9a8e;
    --accent: #77c5a3;
    --on-accent: #111a16;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Desert Dusk

DesertCennik · Kontakt

Wycieczki po kanionie o wschodzie i zachodzie słońca

Przygaszony tekst w kolorze #976646.

Zacznij

Wycieczka o zachodzie

$75

Wybierz plan
KolorJasnyCiemny
Tło#fbf5ee#1b1310
Powierzchnia#ffffff#291d1a
Tekst#2b1d14#f3eeed
Przygaszony#976646#9a857e
Akcent#b04a28#db8061
Na akcencie#ffffff#1b1310
Kontrast
Tekst15.05:1 AAA15.92:1 AAA
Przygaszony4.51:1 AA5.26:1 AA
Przycisk5.45:1 AA6.34:1 AA

Zmienne CSS 

:root {
  --bg: #fbf5ee;
  --surface: #ffffff;
  --text: #2b1d14;
  --muted: #976646;
  --accent: #b04a28;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #db8061;
    --on-accent: #1b1310;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Glacier Lake

GlacierCennik · Kontakt

Wypożyczalnia kajaków na godziny

Przygaszony tekst w kolorze #37749a.

Zacznij

Dwie godziny

$40

Wybierz plan
KolorJasnyCiemny
Tło#f1f6f9#10181b
Powierzchnia#ffffff#1a2529
Tekst#10222d#edf1f3
Przygaszony#37749a#7e939a
Akcent#14708f#55c2e7
Na akcencie#ffffff#10181b
Kontrast
Tekst14.97:1 AAA15.81:1 AAA
Przygaszony4.67:1 AA5.59:1 AA
Przycisk5.61:1 AA8.78:1 AAA

Zmienne CSS 

:root {
  --bg: #f1f6f9;
  --surface: #ffffff;
  --text: #10222d;
  --muted: #37749a;
  --accent: #14708f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #55c2e7;
    --on-accent: #10181b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Moss and Stone

MossCennik · Kontakt

Ogrody z rodzimych roślin, które potrzebują mało wody

Przygaszony tekst w kolorze #68725a.

Zacznij

Projekt ogrodu

$300

Wybierz plan
KolorJasnyCiemny
Tło#f4f5f0#171912
Powierzchnia#ffffff#23261c
Tekst#1f221b#f1f3ed
Przygaszony#68725a#909a7e
Akcent#5a6b3a#a7bb81
Na akcencie#ffffff#171912
Kontrast
Tekst14.71:1 AAA15.86:1 AAA
Przygaszony4.63:1 AA6.00:1 AA
Przycisk5.84:1 AA8.50:1 AAA

Zmienne CSS 

:root {
  --bg: #f4f5f0;
  --surface: #ffffff;
  --text: #1f221b;
  --muted: #68725a;
  --accent: #5a6b3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171912;
    --surface: #23261c;
    --text: #f1f3ed;
    --muted: #909a7e;
    --accent: #a7bb81;
    --on-accent: #171912;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Coastal Dune

CoastalCennik · Kontakt

Domki przy plaży kilka kroków od wody

Przygaszony tekst w kolorze #5c727c.

Zacznij

Za noc

$210

Wybierz plan
KolorJasnyCiemny
Tło#f9f6ef#10181b
Powierzchnia#ffffff#1a2529
Tekst#1d2427#edf1f3
Przygaszony#5c727c#7e939a
Akcent#1f6f8b#61bcdc
Na akcencie#ffffff#10181b
Kontrast
Tekst14.59:1 AAA15.81:1 AAA
Przygaszony4.68:1 AA5.59:1 AA
Przycisk5.67:1 AA8.33:1 AAA

Zmienne CSS 

:root {
  --bg: #f9f6ef;
  --surface: #ffffff;
  --text: #1d2427;
  --muted: #5c727c;
  --accent: #1f6f8b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #61bcdc;
    --on-accent: #10181b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Schematy kolorów dla luksusu i mody

Jubilerzy, butikowe hotele i marki modowe zwykle stawiają na umiar: spokojne tło, ciemny tekst i jeden bogaty akcent używany oszczędnie.

Noir Gold

NoirCennik · Kontakt

Ręcznie oprawiane pierścionki na zamówienie

Przygaszony tekst w kolorze #7a6e62.

Zacznij

Konsultacja

Za darmo

Wybierz plan
KolorJasnyCiemny
Tło#f8f6f1#1b1810
Powierzchnia#ffffff#29241a
Tekst#141210#f3f1ed
Przygaszony#7a6e62#9a927e
Akcent#86651a#e0b85d
Na akcencie#ffffff#1b1810
Kontrast
Tekst17.30:1 AAA15.71:1 AAA
Przygaszony4.59:1 AA5.73:1 AA
Przycisk5.40:1 AA9.44:1 AAA

Zmienne CSS 

:root {
  --bg: #f8f6f1;
  --surface: #ffffff;
  --text: #141210;
  --muted: #7a6e62;
  --accent: #86651a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a927e;
    --accent: #e0b85d;
    --on-accent: #1b1810;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Velvet Plum

VelvetCennik · Kontakt

Suknie wieczorowe do wypożyczenia na weekend

Przygaszony tekst w kolorze #a5538e.

Zacznij

Wypożyczenie na weekend

$120

Wybierz plan
KolorJasnyCiemny
Tło#f9f5f8#1b1019
Powierzchnia#ffffff#291a26
Tekst#24121f#f3edf2
Przygaszony#a5538e#9a7e95
Akcent#6d2160#d26ac0
Na akcencie#ffffff#1b1019
Kontrast
Tekst16.46:1 AAA16.04:1 AAA
Przygaszony4.60:1 AA5.10:1 AA
Przycisk10.31:1 AAA5.78:1 AA

Zmienne CSS 

:root {
  --bg: #f9f5f8;
  --surface: #ffffff;
  --text: #24121f;
  --muted: #a5538e;
  --accent: #6d2160;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a26;
    --text: #f3edf2;
    --muted: #9a7e95;
    --accent: #d26ac0;
    --on-accent: #1b1019;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Ivory Emerald

IvoryCennik · Kontakt

Hotel z dwunastoma pokojami nad starym portem

Przygaszony tekst w kolorze #3e7c65.

Zacznij

Pokój z ogrodem

$340

Wybierz plan
KolorJasnyCiemny
Tło#f8f7f2#101b18
Powierzchnia#ffffff#1a2924
Tekst#10201a#edf3f1
Przygaszony#3e7c65#7e9a91
Akcent#0f5f46#58e5b9
Na akcencie#ffffff#101b18
Kontrast
Tekst15.74:1 AAA15.68:1 AAA
Przygaszony4.58:1 AA5.80:1 AA
Przycisk7.65:1 AAA11.18:1 AAA

Zmienne CSS 

:root {
  --bg: #f8f7f2;
  --surface: #ffffff;
  --text: #10201a;
  --muted: #3e7c65;
  --accent: #0f5f46;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a91;
    --accent: #58e5b9;
    --on-accent: #101b18;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Rose Atelier

RoseCennik · Kontakt

Poprawki krawieckie sukien ślubnych z dwiema przymiarkami w cenie

Przygaszony tekst w kolorze #a65b57.

Zacznij

Pakiet przymiarek

$280

Wybierz plan
KolorJasnyCiemny
Tło#fcf6f5#1b1012
Powierzchnia#ffffff#281a1c
Tekst#2a1716#f3eded
Przygaszony#a65b57#9a7e82
Akcent#9c3d4a#c9747f
Na akcencie#ffffff#1b1012
Kontrast
Tekst15.93:1 AAA16.07:1 AAA
Przygaszony4.62:1 AA5.03:1 AA
Przycisk6.60:1 AA5.57:1 AA

Zmienne CSS 

:root {
  --bg: #fcf6f5;
  --surface: #ffffff;
  --text: #2a1716;
  --muted: #a65b57;
  --accent: #9c3d4a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1012;
    --surface: #281a1c;
    --text: #f3eded;
    --muted: #9a7e82;
    --accent: #c9747f;
    --on-accent: #1b1012;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Onyx Sapphire

OnyxCennik · Kontakt

Zegarki serwisowane przez certyfikowanego zegarmistrza

Przygaszony tekst w kolorze #586db6.

Zacznij

Pełny serwis

$450

Wybierz plan
KolorJasnyCiemny
Tło#f5f6f8#10131b
Powierzchnia#ffffff#1a1d29
Tekst#0e1220#edeef3
Przygaszony#586db6#7e859a
Akcent#24409a#627eda
Na akcencie#ffffff#10131b
Kontrast
Tekst17.25:1 AAA16.03:1 AAA
Przygaszony4.54:1 AA5.05:1 AA
Przycisk9.23:1 AAA4.88:1 AA

Zmienne CSS 

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #0e1220;
  --muted: #586db6;
  --accent: #24409a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10131b;
    --surface: #1a1d29;
    --text: #edeef3;
    --muted: #7e859a;
    --accent: #627eda;
    --on-accent: #10131b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Jak korzystać z bloków kodu

Zwykłe zmienne CSS

Blok CSS definiuje sześć zmiennych na :root i definiuje je ponownie wewnątrz @media (prefers-color-scheme: dark), więc strona podąża za ustawieniem systemowym odwiedzającego bez JavaScriptu. Używaj ich gdziekolwiek:

body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); }
.small { color: var(--muted); }
.button { background: var(--accent); color: var(--on-accent); }

Jeśli chcesz też ręczny przełącznik, skopiuj ciemne wartości do drugiej reguły, np. :root[data-theme="dark"] { ... }, i ustawiaj ten atrybut z przełącznika.

Tailwind CSS v4

W Tailwind v4 wartości motywu znajdują się w CSS, w bloku @theme, a każda zmienna o nazwie --color-* staje się klasą koloru, więc --color-accent daje bg-accent, text-accent i border-accent. Blok Tailwind przy każdym schemacie mapuje te nazwy na zmienne CSS powyżej przez @theme inline, czyli opcję, którą Tailwind opisuje w dokumentacji dla wartości motywu odwołujących się do innych zmiennych. Wklej najpierw zmienne CSS, potem blok @theme, za @import "tailwindcss";. Tryb ciemny nadal działa, bo klasy wskazują na te same zmienne, które zmienia media query:

<section class="bg-bg text-text">
  <div class="bg-surface rounded-xl p-6">
    <p class="text-muted">Starter plan</p>
    <a class="bg-accent text-on-accent rounded-lg px-4 py-2">Get started</a>
  </div>
</section>

Używasz Tailwind v3? Umieść te same jasne wartości hex w theme.extend.colors w tailwind.config.js. Jeśli wolisz wygenerować pełną skalę odcieni od 50 do 950 z jednego akcentu, zrobi to generator palet kolorów Tailwind.

Tokeny projektowe

Aby przekazać schemat do narzędzia do tokenów projektowych, zmapuj sześć ról na tokeny w formacie JSON Design Tokens Community Group, z $type równym color i wartością hex jako $value, w grupie light i dark:

{
  "color": {
    "light": { "accent": { "$type": "color", "$value": "#3b4fe0" } },
    "dark":  { "accent": { "$type": "color", "$value": "#5869e5" } }
  }
}

Narzędzia czytające ten format, takie jak Style Dictionary, potrafią zamienić go na wartości CSS, iOS lub Android.

Najczęstsze błędy w schematach kolorów

Narzędzia do budowania własnego schematu

Układy, na których możesz przetestować schemat, znajdziesz w sekcjach hero i komponentach cenników, a kolory połącz z krojem pisma z przewodnika najlepsze fonty na strony internetowe.

Najczęściej zadawane pytania

Jaki schemat kolorów jest dobry dla strony internetowej?

Taki, który ma spokojne tło pokrywające większość strony, ciemny kolor tekstu z kontrastem co najmniej 4.5:1 względem tła i jeden kolor akcentu zarezerwowany dla przycisków i linków. Akcent powinien pasować do marki, a etykieta przycisku na nim także powinna osiągać 4.5:1.

Ile kolorów powinna mieć strona internetowa?

Większość stron radzi sobie z pięcioma lub sześcioma rolami: tło, powierzchnia dla kart, tekst główny, tekst przygaszony, akcent i kolor tekstu na akcencie. Czerwony, bursztynowy i zielony dodawaj tylko dla komunikatów o błędzie, ostrzeżeniu i sukcesie.

Czym jest reguła 60-30-10 w projektowaniu stron?

To wskazówka dotycząca proporcji zapożyczona z projektowania wnętrz: mniej więcej 60 procent koloru dominującego (tło strony), 30 procent koloru drugorzędnego (tekst, karty i panele) i 10 procent akcentu (przyciski, linki i wyróżnienia). Dzięki niej akcent pozostaje na tyle rzadki, że przyciąga uwagę.

Jakiego współczynnika kontrastu wymaga WCAG dla tekstu?

WCAG 2.2 na poziomie AA wymaga co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu, czyli co najmniej 18 punktów lub 14 punktów pogrubionych. Poziom AAA podnosi te progi do 7:1 i 4.5:1. Przyciski, obramowania pól i znaczące ikony potrzebują 3:1 względem otoczenia.

Czy mogę używać tych schematów kolorów na stronie komercyjnej?

Tak. Przygotowaliśmy te palety dla tej strony i możesz ich używać w dowolnym projekcie prywatnym lub komercyjnym bez podawania autorstwa.

Jak zrobić wersję ciemną schematu kolorów?

Nie odwracaj go po prostu. Użyj bardzo ciemnego tła zabarwionego barwą marki, złamanej bieli dla tekstu i jaśniejszej wersji akcentu, żeby pozostał widoczny. Potem ponownie sprawdź kontrast tekstu i etykiety przycisku, która może wymagać zmiany z białej na ciemną.

Podglądy

Jasne lub ciemne podglądy

Jasny

Ciemny

Filtruj według nastroju

Wszystkie

SaaS

Finanse

Zdrowie

Gastronomia

Twórczość

Usługi

Natura

Luksus

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

Produkt

Dla kogo

Funkcje

Zasoby

Firma

Mapa strony