Generator palet kolorystycznych
Dobierz pasujące kolory do koloru bazowego: dopełniające, analogiczne, triada, odcienie i tinty — z kodami HEX i zmiennymi CSS.
Umieść to narzędzie na swojej stronie
Bezpłatnie, bez rejestracji. Widżet pokazuje na dole napis „Narzędzie udostępnia AMKBIT.pl”.
Harmonie kolorów na kole barw
- Dopełniająca — kolor po przeciwnej stronie koła (180°). Silny kontrast, dobry do wyróżnienia przycisku.
- Rozszczepiona dopełniająca — zamiast jednego dopełnienia dwa sąsiednie (150° i 210°): kontrast łagodniejszy.
- Analogiczna — sąsiednie kolory (±30°): spokojne, naturalne zestawienie.
- Triada i tetrada — kolory co 120° lub 90°: barwne, wymagają dominującego koloru.
- Monochromatyczna i odcienie 50–900 — ten sam odcień w różnej jasności, jak w systemach projektowych (np. tła 50–100, tekst 700–900).
Obliczenia prowadzimy w przestrzeni HSL (odcień, nasycenie, jasność): obracamy odcień, a nasycenie i jasność zostawiamy. Napis na próbce ma kolor dobrany według kontrastu WCAG.
Poradniki
Programowanie i tworzenie stronJak dobrać kolory na stronę internetowąProsty schemat kolor główny, akcent i neutralne tło, kontrast i tryb ciemny bez chaosu.Zdjęcia, grafika i obrazyKolory ze zdjęcia i palety barw — jak dobrać kolory do projektuJak wyciągnąć kolory ze zdjęcia, czym różnią się zapisy HEX, RGB i HSL, jak zbudować spójną paletę (barwy dopełniające, analogiczne, triada) i jak…Programowanie i tworzenie stronKolory w CSS: HEX, RGB, HSL i OKLCH — który zapis wybraćCo oznacza #1e88e5, jak działa przezroczystość w rgba, dlaczego projektanci lubią HSL, czym jest nowy zapis OKLCH i jak zbudować spójną paletę…Programowanie i tworzenie stronKontrast kolorów na stronie — wymagania WCAG i dostępność w praktyceCo oznacza kontrast 4,5:1, kogo obowiązują wymagania dostępności (także sklepy internetowe od 2025 r.) i jak poprawić kolory, nie psując wyglądu…
Wynik ma charakter pomocniczy. Przy ważnych decyzjach (finansowych, technicznych, zdrowotnych) sprawdź go niezależnie. Zasady korzystania.