Potrzebujesz koloru do makiety, wykresu albo pustego płótna i wolisz nie wybierać go z przyzwyczajenia? Ten darmowy generator losowych kolorów pobiera kolory z pełnego 24-bitowego zakresu, jaki może pokazać ekran, i umieszcza każdy z nich na próbce obok jego kodu. Wybierz, ile chcesz w polu Liczba — od 1 do 50 — zaznacz potrzebne formaty i kliknij przycisk Generuj. Strona otwiera się z jednym kolorem w formacie HEX, więc od pierwszego wyniku dzieli Cię jedno kliknięcie. Pole wyboru Kod HEX jest zaznaczone od początku, obok znajdują się pola wyboru Kod RGB i Kod HSL, a dowolną kombinację tych trzech można włączyć jednocześnie. Przycisk z ikoną koła zębatego obok przycisku Generuj otwiera sekcję Opcje zaawansowane, gdzie możesz ograniczyć kolory do jednego rodzaju lub zakresu, wykluczyć powtórzenia i zmienić sposób zapisu HEX.
Każdy kolor powstaje w Twojej przeglądarce dzięki Web Crypto API (crypto.getRandomValues), który dostarcza kryptograficznie silne losowe bajty z własnego źródła losowości Twojego systemu, a nie z funkcji pseudolosowej, takiej jak Math.random(). Kolor na ekranie to trzy kanały — czerwony, zielony i niebieski — każdy jako liczba całkowita od 0 do 255, a jeden losowy bajt może przyjąć dokładnie 256 wartości. Każdy kanał to więc po prostu jeden bajt, bez etapów pośrednich: nie jest brana żadna reszta z dzielenia, a żaden krok konwersji nie faworyzuje żadnego odcienia. To sprawia, że wszystkie 16 777 216 kolorów, jakie może wygenerować strona, są dokładnie równie prawdopodobne za każdym razem, gdy klikniesz Generuj. Węższy zakres w sekcji Opcje zaawansowane dotrzymuje tej obietnicy w obrębie zakresu: kolory nadal są losowane z całej przestrzeni, a te, które wypadają poza zakres, są odrzucane, więc każdy kolor dopuszczony przez zakres ma taką samą szansę. Nic nie jest wysyłane na serwer, nic nie jest zapisywane, a po wczytaniu strony działa ona nadal nawet bez połączenia.
Trzy formaty opisują ten sam kolor na trzy sposoby. Format Kod HEX to sześciocyfrowa forma używana w CSS i większości narzędzi graficznych, na przykład #0778ff; zapisuje się go małymi literami z # na początku, a opcje Wielkie litery i Bez # w sekcji Opcje zaawansowane zmieniają to dla narzędzi, które oczekują innego zapisu. Format Kod RGB wypisuje trzy kanały, jak w rgb(7, 120, 255), co pasuje do kodu operującego na każdym kanale osobno. Format Kod HSL opisuje kolor za pomocą odcienia, nasycenia i jasności, jak w hsl(213, 100%, 51%) — to forma najłatwiejsza do ręcznej korekty później. Wszystkie trzy wklejasz bezpośrednio do arkusza stylów. Nie są jednak jednakowo dokładne. HEX i RGB są dokładne; HSL jest zaokrąglony. Strona zapisuje odcień, nasycenie i jasność jako liczby całkowite, a dla około 89% kolorów ta zaokrąglona wartość nie daje po ponownym przeliczeniu dokładnie tego samego koloru: #646503 jest pokazywany jako hsl(61, 94%, 20%), co po ponownym przeliczeniu daje #616303. Różnica nigdy nie przekracza 5 kroków w jednym kanale i zwykle wynosi 1 lub 2 — niewidoczna na ekranie, ale realna, jeśli zapiszesz wartość HSL i liczysz na odzyskanie pierwotnego kodu HEX. Zapisuj raczej wartość HEX lub RGB.
Jeden kolor pojawia się jako pojedyncza kostka na środku wyniku; kilka kolorów pojawia się jako ponumerowana lista, jeden kolor w wierszu, z wybranymi formatami obok siebie i małą plakietką kontrastu na końcu. Lista licząca więcej niż trzy kolory przewija się wewnątrz ramki, a strzałka w jej rogu rozwija ją na pełną wysokość; strona zapamiętuje, w jakim stanie ją zostawiłeś. Kliknij dowolny kod, aby skopiować tylko ten kod. Przycisk kopiowania na końcu wiersza kopiuje wszystkie kody danego koloru w jednej linii, rozdzielone spacjami. Kliknij samą próbkę, a otworzy się wbudowany selektor kolorów Twojej przeglądarki: wybierz tam inny kolor, a wszystkie kody w tym wierszu zostaną odpowiednio przepisane, w każdym włączonym formacie, wraz z plakietką. Przycisk Kopiuj wszystko kopiuje całą partię, jeden kolor w wierszu, a przycisk Zapisz do pliku zapisuje ten sam tekst w zwykłym pliku .txt; oba uwzględniają dowolny kolor zmieniony w selektorze. Panel Historia przechowuje Twoich ostatnich 10 partii w tej przeglądarce, dokładnie takich, jakie zostały wygenerowane, a przycisk Wyczyść czyści wynik. Twoje ustawienia, w tym te w sekcji Opcje zaawansowane, są zapamiętywane na następną wizytę.
Równie prawdopodobne kolory nie wyglądają na rozłożone równomiernie, a wiedza o tym, czego się spodziewać, oszczędza klikanie Generuj z niewłaściwego powodu. Według pomiarów na całym zakresie około 35% kolorów jest żywych i nasyconych, z nasyceniem HSL wynoszącym co najmniej 70% i jasnością między 35% a 65%. Kolory niemal szare, o nasyceniu poniżej 20%, stanowią tylko około 4%, a bardzo ciemne kolory (jasność poniżej 20%) i bardzo jasne (powyżej 80%) stanowią po około 3%. Partia dziesięciu kolorów przy opcji Wszystkie kolory będzie więc zwykle zawierać kilka mocnych kolorów i rzadko pastelowy lub antracytowy. Gdy potrzebujesz konkretnego rodzaju, wybierz go w polu Typ koloru: opcja Żywe odpowiada dokładnie tej grupie, a opcje Pastelowe, Ciemne, Stonowane i Odcienie szarości — każda swojej. Opcja Własne pozwala ustawić swoje zakresy dla pól Odcień, Nasycenie i Jasność, a zakres odcienia może przechodzić przez 0, więc zakres od 330 do 30 daje czerwienie. Zakres jest sprawdzany względem kodu HSL pokazywanego przez stronę, więc żaden kod nie wypada poza niego, a jeśli zawiera zbyt mało kolorów dla Twojej wartości w polu Liczba, strona prosi o jego poszerzenie zamiast powtarzania kolorów. Poza tym powtórzenia są możliwe, ale rzadkie: zaznacz opcję Bez powtórzeń, aby je wykluczyć, a bez niej szansa, że dwa z 50 kolorów z pełnego zakresu wyjdą identyczne, wynosi około 1 do 13 700.
Losowy kolor często jest potrzebny jako tło, co rodzi jedno pytanie, na które próbka nie odpowie gołym okiem: czy tekst na nim będzie czytelny? Wytyczne dostępności stron internetowych, WCAG, wymagają współczynnika kontrastu co najmniej 4,5:1 dla zwykłego tekstu. Według pomiarów na wszystkich kolorach, jakie może wygenerować ta strona, czarny tekst osiąga to na około 65% z nich, a biały tekst na około 36%, i nie ma koloru, na którym oba zawodzą: lepszy z dwóch zawsze osiąga co najmniej 4,58:1. Dla dowolnego losowego tła wymóg spełni więc czarny lub biały tekst, a strona pokazuje który. Przy każdym kolorze wyświetla się mała plakietka pokazująca Aa w lepiej czytelnym z dwóch kolorów tekstu, a po niej współczynnik kontrastu. Współczynnik jest zaokrąglany w dół, więc nigdy nie zawyża oceny koloru, i aktualizuje się, gdy zmienisz kolor w selektorze. Plakietka porównuje tylko czarny i biały tekst; dla koloru marki lub dowolnego innego koloru tekstu użyj narzędzia do sprawdzania kontrastu.
Losowość to nie to samo co harmonia. Każdy kolor w partii jest losowany niezależnie, bez wiedzy o pozostałych, więc generator nigdy nie buduje palety w sensie projektanckim — bez par dopełniających, bez analogicznych ciągów, bez wspólnej jasności. Węższy zakres zmienia charakter partii, ale nie tę zasadę: pastele albo seria niebieskich odcieni wciąż pojawiają się jeden po drugim, bez niczego, co by je łączyło. Właśnie o to chodzi: dostajesz kolor, którego sam byś nie wybrał, i to pomaga przełamać przyzwyczajenie lub twórczą blokadę. Aby zamienić losowe znalezisko w coś użytecznego, zachowaj kolor, który Ci się podoba, i buduj na jego podstawie, zamiast klikać Generuj, aż cały zestaw przypadkiem się zgra. Zachowaj jego odcień i zmieniaj jasność, aby uzyskać jaśniejsze i ciemniejsze warianty, albo obróć odcień o 180 stopni, aby uzyskać kontrastujący kolor. Format Kod HSL sprawia, że te operacje stają się rachunkiem, a nie zgadywaniem.
Dlaczego warto wybrać ten generator losowych kolorów?
- Każdy kolor powstaje w Twojej przeglądarce dzięki Web Crypto API, nic nie jest wysyłane
- Wszystkie 16 777 216 kolorów dokładnie równie prawdopodobne, jeden losowy bajt na kanał
- Kody HEX, RGB i HSL dla tego samego koloru, w dowolnej kombinacji
- Do 50 kolorów naraz, każdy na próbce z plakietką kontrastu tekstu
- Żywe, Pastelowe, Ciemne, Stonowane i Odcienie szarości albo własny zakres odcienia, nasycenia i jasności
- Bez powtórzeń, gdy tego potrzebujesz, oraz HEX wielkimi literami lub bez #
- Kliknij kod, aby go skopiować, albo zmień dowolny kolor w selektorze kolorów Twojej przeglądarki
- Kopiuj wszystko, Zapisz do pliku i Historia ostatnich 10 partii, przechowywana w Twojej przeglądarce
- Bezpłatnie i bez ograniczeń: bez rejestracji, bez limitu, nic nie jest zapisywane na naszych serwerach
Losowe kolory przydają się wszędzie tam, gdzie kolor jest potrzebny, zanim ktokolwiek go wybierze. Projektanci używają ich, by przełamać twórczą blokadę i znaleźć punkt wyjścia, do którego ich zwykła paleta nigdy by nie dotarła. Programiści wypełniają makiety, elementy zastępcze i awatary, nadają każdej serii na wykresie własny kolor, zanim zostanie ustalony właściwy motyw, i testują, jak interfejs radzi sobie z tłami, z myślą o których nie został zaprojektowany — partia 50 kolorów przy opcji Wszystkie kolory niemal zawsze zawiera przynajmniej jeden bardzo ciemny lub bardzo jasny kolor, a opcja Ciemne lub Pastelowe kieruje test w jedną z tych skrajności. Artyści generatywni i osoby prototypujące gry wprowadzają wartości bezpośrednio do kodu, gdzie forma RGB pasuje do większości bibliotek graficznych. Nauczyciele zestawiają trzy formaty obok siebie, aby pokazać, że jeden kolor można zapisać jako kod, jako trzy kanały lub jako pozycję na kole barw, i dlaczego wersja HSL jest zaokrąglona. A każdy, kto etykietuje, taguje lub koduje kolorami listę, otrzymuje wyraźnie różne kolory bez zamartwiania się, który wybrać.
Warto znać kilka uczciwych ograniczeń. To generator, a nie narzędzie do palet: nie buduje harmonii kolorystycznych i nie utrzymuje jednego koloru niezmiennego, gdy inne się zmieniają, a węższy zakres daje kolory jednego rodzaju, a nie kolory dobrane, by do siebie pasowały. Plakietka kontrastu porównuje wyłącznie czarny i biały tekst. Strona działa na kolorach sRGB wyświetlanych przez ekran — HEX, RGB i HSL — bez przezroczystości i bez CMYK, Pantone, OKLCH ani nazwanych kolorów CSS; do druku dopasuj kolor w swoim procesie druku, zamiast ufać kodowi z ekranu. Ten sam kod może też wyglądać nieco inaczej na różnych ekranach, ponieważ ekrany nie są kalibrowane jednakowo. Wartości HSL są zaokrąglone, jak opisano wyżej, a jeśli opcja Bez powtórzeń nie jest zaznaczona, partia nie jest sprawdzana pod kątem powtórzeń. To, co strona naprawdę gwarantuje, jest węższe i dokładne: każdy z jej 16 777 216 kolorów, lub każdy kolor w ustawionym przez Ciebie zakresie, ma taką samą szansę przy każdym kliknięciu, wylosowany z kryptograficznego źródła Twojej przeglądarki i nigdy nigdzie nie wysłany.