Generator kolorów

Wylosuj kolor albo całą paletę z kodami gotowymi do skopiowania.

Czym jest generator kolorów?

Generator kolorów tworzy losowe kolory i pokazuje ich kody, żebyś od razu mógł ich użyć. To szybkie źródło inspiracji, gdy projektujesz stronę, logo, prezentację, wnętrze albo dzieło sztuki i nie wiesz, od czego zacząć. Wygeneruj jeden kolor albo całą paletę, skopiuj kody kolorów, które Ci się podobają, i generuj kolejne.

Jak go używać

  1. Kolory: wybierz jeden kolor, paletę 5 kolorów albo 10 kolorów.
  2. Styl: wybierz, jakiego rodzaju kolorów chcesz (zobacz niżej).
  3. Kliknij Generuj kolory. Każda próbka pokazuje swoje kody HEX, RGB i HSL.
  4. Kliknij Kopiuj pod próbką, aby skopiować jej kod HEX, gotowy do wklejenia w CSS, Figmie, Canvie, PowerPoincie albo innej aplikacji graficznej.

Pełny ekran: kliknij Pełny ekran u góry narzędzia, aby pokazać paletę w dużym rozmiarze – przydatne, gdy prezentujesz pomysły kolorystyczne klientowi albo klasie. Naciśnij Esc, aby wrócić. W 🎨 Kolory i efekty możesz wybrać własne kolory tła i przycisków.

Cztery style

  • Harmonijny: losowy odcień ze średnim lub silnym nasyceniem i średnią jasnością. Te kolory zwykle dobrze wyglądają i do siebie pasują. Najlepszy punkt wyjścia.
  • Pastelowy: miękkie, jasne kolory, świetne na tła, projekty dziecięce i ślubne oraz spokojne interfejsy.
  • Ciemny: głębokie, stonowane odcienie, przydatne na tła w trybie ciemnym, nagłówki i nastrojowe projekty.
  • Dowolny kolor: wybiera jeden z 16 777 216 kolorów RGB z równą szansą. To naprawdę losowe, więc spodziewaj się wielu brązów, szarości i mętnych odcieni – i czasem perełki.

HEX, RGB i HSL w skrócie

  • HEX (na przykład #4F46E5) to najpopularniejszy sposób zapisu koloru w internecie. Trzy pary znaków to ilość czerwieni, zieleni i niebieskiego, każda od 00 do FF.
  • RGB (na przykład rgb(79, 70, 229)) podaje te same ilości czerwieni, zieleni i niebieskiego jako liczby od 0 do 255.
  • HSL (na przykład hsl(243, 75%, 59%)) opisuje kolor tak, jak myślą o nim ludzie: odcień (miejsce na kole barw, 0–360°), nasycenie (intensywność) i jasność (jak jasny lub ciemny jest kolor). To najłatwiejszy format do ręcznego dostrajania koloru, na przykład do jaśniejszej wersji dla efektu najechania.

Kiedy przydają się losowe kolory?

  • Projektowanie stron i aplikacji: znajdź kolor akcentu albo paletę startową i dopracuj ją.
  • Sztuka i ilustracja: rzuć sobie wyzwanie, aby malować albo rysować tylko wylosowaną paletą.
  • Marka i prezentacje: szybko sprawdź różne kierunki kolorystyczne, zanim ustalisz kolory marki.
  • Gry i szkoła: przydziel drużynom losowe kolory albo graj w „jak nazywa się ten kolor?”.
  • Dom i rękodzieło: znajdź pomysły na dzierganie, patchwork albo zestawienia kolorów we wnętrzu.

Wskazówki, jak używać palety

  • Wielu projektantów stosuje zasadę 60-30-10: jeden kolor główny na około 60% projektu, drugi kolor na 30% i kolor akcentu na pozostałe 10%.
  • Zawsze sprawdzaj kontrast tekstu. Ciemny tekst na kolorach pastelowych i biały tekst na ciemnych kolorach zwykle dobrze się czyta.
  • Skopiuj kolory, które Ci się podobają, zanim ponownie klikniesz „Generuj kolory”, bo nowa paleta zastępuje je wszystkie.

Potrzebujesz losowej litery albo liczby? Wypróbuj generator liter albo generator liczb.

Najczęściej zadawane pytania

W jakich formatach dostanę kolory?

Każdy kolor jest przedstawiony jako kod HEX (np. #4F46E5) oraz wartości RGB i HSL — gotowe do skopiowania do CSS, Figmy lub dowolnego programu graficznego.

Czym różni się „Harmonijny” od „Dowolny kolor”?

„Dowolny kolor” wybiera spośród wszystkich 16,7 miliona kolorów RGB z równą szansą, co często daje mętne odcienie. „Harmonijny” utrzymuje nasycenie i jasność w zakresie, w którym kolory zwykle dobrze do siebie pasują.

Czy mogę zachować kolor, który mi się podoba?

Kliknij przycisk Kopiuj przy kolorze, aby skopiować jego kod HEX. Nowa paleta zastępuje wszystkie kolory, więc najpierw skopiuj te, które chcesz zachować.

Czy mogę pokazać paletę na pełnym ekranie?

Tak. Kliknij „Pełny ekran” u góry narzędzia, a próbki kolorów wypełnią ekran – przydatne przy prezentowaniu pomysłów. Naciśnij Esc albo „Zamknij pełny ekran”, aby wrócić.