Dobór palety barw na stronę — poradnik i ćwiczenia

1. Zasady dobierania kolorów (teoria dla informatyków)

Ustal minimum 3-4 kolory: kolor główny (primary), dodatkowy (secondary), akcent, tło, tekst.
Dbaj o kontrast: Ciemny tekst na jasnym tle lub jasny tekst na ciemnym tle. Użyj narzędzi do kontroli kontrastu (np. contrast-ratio.com).
Pamiętaj o funkcji i symbolice: Niebieski (zaufanie), zielony (pozytyw, rozwój), czerwony (ostrzeżenie, akcja), żółty (energia).
Kolor przycisków, alertów i ikon ma wskazywać funkcję (np. sukces = zielony, błąd = czerwony).
Nigdy nie używaj tylko koloru do przekazywania informacji — n.p. do alertów dodaj ikonę/tekst.

2. Przykładowa realistyczna paleta kolorów

Niebieski
#1976d2

Żółty
#ffd600

Turkus
#00bcd4

Zielony
#43a047

Czerwony
#e53935

Muted
#6c8499

Fioletowy
#6c41af

Pomarańczowy
#ff9800

Dostosowuj odcienie do swojego projektu. Możesz testować inne warianty — patrz Ćwiczenie 4 poniżej.

3. Tabela — psychologia i przykłady użycia kolorów

Kolor	Znaczenie	Przykład (gdzie użyć na stronie)
Niebieski	Zaufanie, profesjonalizm	Nagłówki, tło sekcji, główny przycisk
Żółty	Energia, optymizm	Przyciski akcji, wyróżnienia, ikony
Zielony	Sukces, bezpieczeństwo	Potwierdzenia, komunikat „OK”, wykresy
Czerwony	Błąd, ostrzeżenie, akcja szybka	Alerty, przycisk zamykania, ważna informacja
Turkus	Kreatywność, nowoczesność	Ikony, przyciski dodatkowe, elementy dekoracyjne
Muted	Stonowanie, drugorzędność	Stopka, opisy, tła kart podrzędnych
Fioletowy	Ambicja, technologia	Przyciski wersji testowej, nagłówki bloga
Pomarańczowy	Entuzjazm, nowość	Podkreślenia, informacja o promocji

4. Przykład — jak zaimplementować paletę w CSS (kopia-wklej, z pokazem przycisków)

:root {
  --primary: #1976d2; /* Niebieski */
  --secondary: #ffd600; /* Żółty */
  --success: #43a047; /* Zielony */
  --danger: #e53935; /* Czerwony */
  --violet: #6c41af;
  --orange: #ff9800;
}
.button-main {
  background: var(--primary); color: #fff;
  border-radius: 8px; padding: 12px 24px; border: none;
}
.button-accent {
  background: var(--secondary); color: #232f3e;
  border-radius: 8px; padding: 12px 24px; border: none;
  font-weight: bold;
}
.button-success{ background: var(--success); color:#fff;}
.button-danger{ background: var(--danger); color:#fff;}
.button-contrast{background: var(--violet); color:#fff;}
.button-warm{background: var(--orange); color:#232f3e;}

Przyciski możesz kopiować na swoją stronę i dowolnie zmieniać kolory poprzez edycję wartości w :root lub w klasach.

5. Ćwiczenia praktyczne — dobór i użycie kolorów w kodzie

Ćwiczenie 1: Zmień kolor główny nagłówka na wybrany przez siebie.
Wskaż, dlaczego wybrałeś właśnie taki kolor (n.p. pasuje do tematyki strony lub pozytywnie wpływa na odbiór).

Ćwiczenie 2: Dodaj do strony minimum dwa przyciski — np. "Wyślij" (zielony, button-success) i "Usuń" (czerwony, odede>button-danger).
Każdy niech wyraźnie różni się kolorem i znaczeniem.

Ćwiczenie 3: Stwórz komunikat o sukcesie (zielony) i ostrzeżenie lub błąd (czerwony). Upewnij się, że tekst jest kontrastowy względem tła.

Ćwiczenie 4: Zmień całą paletę na nietypową (np. fiolet+pomarańcz). Oceń, jak zmienia się styl Twojej strony i jakie emocje wywołuje!

6. Checklist — twój webmasterski projekt z kolorami

Kolor główny i akcentowy są ściśle dopasowane do tematu strony Wszystkie przyciski mają indywidualny kolor zgodny z przeznaczeniem Tekst i tło zawsze mają właściwy kontrast (zgodność z zasadami dostępności) Informacje o błędach/sukcesach są zarówno barwne, jak i opisane Każdy kolor został dobrany świadomie i uwzględnia psychologię i funkcję