Jak dobrać kolory na stronę internetową
Prosty schemat kolor główny, akcent i neutralne tło, kontrast i tryb ciemny bez chaosu.
Mała paleta
- Kolor główny marki.
- Akcent do przycisków.
- Neutralne tła i tekst.
- Kolory stanów: sukces, ostrzeżenie, błąd.
Propozycje zbuduje generator palet, a kody zmienisz w konwerterze kolorów. Zapisy wyjaśnia poradnik HEX, RGB i HSL.
Czytelność
Sprawdź każdy tekst w teście kontrastu. Zasady opisuje poradnik kontrast i dostępność. Informacji nie przekazuj tylko kolorem: błąd warto oznaczyć także tekstem lub ikoną.
Tryb ciemny
Nie odwracaj kolorów mechanicznie. Unikaj czystej czerni z jaskrawym tekstem i sprawdzaj kontrast osobno dla obu motywów.
Zasada 60-30-10
Popularny punkt wyjścia to 60% koloru neutralnego, 30% drugorzędnego i 10% akcentu. Dzięki temu główny przycisk rzuca się w oczy. Jeśli wszystko jest jaskrawe, nic się nie wyróżnia. Akcent rezerwuj dla najważniejszych działań na stronie.
Skala zamiast jednego koloru
Dla koloru głównego przygotuj odcienie, np. od bardzo jasnego tła po ciemny tekst. Zapisz je jako zmienne CSS, np. --kolor-500. Dzięki temu nie powstanie 30 podobnych odcieni niebieskiego. W kolejnych projektach łatwiej też zmienić cały motyw.
Znaczenie kolorów
Czerwony często wskazuje błąd, zielony sukces, a żółty ostrzeżenie. Nie zmieniaj tych skojarzeń bez powodu. Skojarzenia zależą też od branży i kultury, dlatego warto przyjrzeć się konkurencji i potrzebom odbiorców.
Test końcowy
- Sprawdź stronę w odcieniach szarości.
- Zobacz ją na telefonie w słońcu.
- Zmierz kontrast tekstu i przycisków.
- Sprawdź fokus klawiatury.
Narzędzia do tego poradnika
koloryprojektowaniedostępnośćCSS