Dobieranie pasujących kolorów na oko to strata czasu przy projektowaniu. Ten generator wykorzystuje klasyczne harmonie koła barw - te same zależności odcieni, których uczy się na kursach teorii koloru - dzięki czemu każda paleta jest matematycznie spójna, a nie wybrana na wyczucie. Kliknij dowolną próbkę, by skopiować jej kod hex, albo skopiuj całą paletę jako gotowe zmienne CSS. Narzędzie działa w całości po stronie klienta: bez konta, bez wysyłania plików i bez śledzenia kolorów Twojej marki.
Darmowy generator palety kolorów
Działa w całości w przeglądarce - bez wysyłania plików i bez rejestracji.
Harmonia
Zmienne CSS
Czym jest generator palety kolorów?
Generator palety kolorów tworzy dopasowany schemat barw z jednego koloru bazowego, opierając się na teorii koła barw. Wybierz lub wpisz kolor hex, wskaż harmonię - dopełniającą, analogiczną, triadyczną lub monochromatyczną - a narzędzie natychmiast wyliczy spójne kolory, każdy z kodem hex do skopiowania. Wszystko dzieje się w przeglądarce.
Jak korzystać
- 1Ustaw kolor bazowy. Kliknij pole koloru, aby wybrać wizualnie, wpisz kod hex w formacie #6366f1 albo naciśnij „Losowy”, by dostać nowy punkt startowy.
- 2Wybierz harmonię. Przełączaj się między dopełniającą, rozdzieloną dopełniającą, analogiczną, triadyczną, tetradyczną, monochromatyczną, cieniami i rozjaśnieniami. Paleta przelicza się natychmiast.
- 3Skopiuj kolory. Kliknij dowolną próbkę, by skopiować jej kod hex, albo użyj przycisku Kopiuj, by pobrać całą paletę jako zmienne CSS.
Dla kogo
- Projektanci stron zaczynający projekt od jednego koloru marki: generują analogiczne lub rozdzielone dopełniające pary do tła, przycisków i akcentów.
- Front-end developerzy, którzy potrzebują startowego zestawu tokenów projektowych: kopiują paletę jako zmienne CSS i wklejają wprost do arkusza stylów.
- Marketerzy i twórcy prezentacji dopasowujący kolory wykresów, grafik do social mediów lub slajdów do koloru logo bez narzędzi graficznych.
- Ilustratorzy i hobbyści eksplorujący cienie i rozjaśnienia jednego odcienia, by uzyskać głębię, światła i cienie w pracy.
Najczęstsze pytania
Czy ten generator palety kolorów jest darmowy?
Tak - w 100% za darmo, bez rejestracji, bez znaków wodnych i bez limitów. Twórz i kopiuj dowolną liczbę palet do projektów prywatnych lub komercyjnych.
Czy moje dane o kolorach są gdzieś wysyłane?
Nie. Paleta jest w całości obliczana w Twojej przeglądarce zwykłym JavaScriptem. Kolory Twojej marki, wpisane wartości i kliknięcia nigdy nie trafiają na serwer.
Czym jest kolor dopełniający?
Kolor dopełniający leży dokładnie naprzeciwko koloru bazowego na kole barw - to obrót odcienia o 180 stopni. Pary dopełniające, takie jak niebieski i pomarańczowy, dają najsilniejszy kontrast, dlatego są popularne w przyciskach call-to-action na tle koloru marki.
Jaka jest różnica między paletą analogiczną a triadyczną?
Paleta analogiczna korzysta z sąsiadujących odcieni (w promieniu około 30 stopni od bazowego), więc wygląda spokojnie i spójnie. Paleta triadyczna bierze trzy odcienie rozstawione co 120 stopni, dając żywy, zrównoważony schemat z większym kontrastem między kolorami.
Czym są cienie i rozjaśnienia?
Cienie (shades) przyciemniają kolor bazowy, przesuwając jasność w stronę czerni; rozjaśnienia (tints) rozjaśniają go w stronę bieli. Oba zachowują ten sam odcień i nasycenie, więc świetnie sprawdzają się w stanach hover, obramowaniach i warstwach tła jednego koloru marki.
Ile kolorów powinna mieć paleta strony internetowej?
Popularna zasada to 60-30-10: jeden dominujący kolor na około 60% interfejsu, drugorzędny na 30%, akcentowy na 10%. Zacznij od harmonii 3-5 kolorów tutaj, a potem dodaj cienie i rozjaśnienia każdego z nich dla stanów i powierzchni.
Dlaczego paleta prawie się nie zmienia dla szarości lub czerni?
Szarości, czerń i biel mają zerowe nasycenie, więc nie mają odcienia, na którym mogłyby zadziałać obroty harmonii - obrót niczego daje tę samą neutralną wartość. Zbuduj neutralną skalę za pomocą trybów jasności: rozjaśnienia dla czerni lub ciemnych szarości, cienie dla bieli lub jasnych szarości, a tryb monochromatyczny dla szarości środkowych.